자주 사용하는 HTML CSS, Javascript 꿀팁

 요즘 웹앱, 웹서비스를 공부하면서 알게 된, 꿀팁을 공유하고자 한다. 비전공자 입장에서는 이런 꿀팁들을 모아서 실제로 내 사이드 프로젝트에 적용해보는 재미가 있다. 사용해봐도 제대로 적용이 안된다면 caniuse 사이트를 이용해 사용중인 브라우저가 지원을 하는지 확인해볼 필요가 있다.

 

최신 꿀팁 태그

1. 사용자의 해상도에 따라 크기가 다른 이미지를 불러오기

<picture>
  <source srcset="large.jpg" media="(min-width: 1000px)" />
  <source srcset="medium.jpg" media="(min-width: 600px)" />
  <img src="small.jpg" alt="대체텍스트" />
</picture>

 반응형 웹 디자인에서 다양한 화면 크기와 디스플레이 해상도에 맞는 이미지를 제공하기 위해 사용 된다. 이 요소를 사용하면 브라우저에서 디바이스의 뷰포트 크기와 해상도에 따라 가장 적합한 이미지를 선택하여 로드할 수 있다. 또 불필요한 이미지 다운로드를 방지하고, 사용자 경험을 향상시킬 수 있다.

2. 이미지 프리로딩

<link rel=preload as=image href='저화질이미지' fetchpriority=high>

 이미지 프리로딩은 웹페이지 초기 로딩 속도를 높이는 데 도움이 된다. 특히 중요한 이미지나 사용자가 곧바로 볼 이미지를 미리 다운로드하면, 렌더링 시간을 단축할 수 있다. 그러나 너무 많은 리소스를 프리로딩하면 초기 데이터 전송량이 증가하여 오히려 로딩 속도가 느려질 수 있다.괜찮은 사용 방법으로는 예를 들어, 웹페이지 상단의 로고 이미지나 배너 이미지 등이 해당된다. 이렇게 하면 초기 렌더링 시 필수적인 이미지를 우선적으로 로드할 수 있다.

 

 

3. 데이터 리스트

<label for="movie"> What's your favorite movie?</label>
  <input type="text" list="movie-options" />
  <datalist id="movie-options" />
     <option value="Dune" />
     <option value="Dark Waters" />
</datalist>

 <datalist> 요소를 사용하여 입력 필드에 제안 목록(suggestion list)을 제공하는 예시이다. 다음과 같은 목적으로 사용한다.

사용자가 입력해야 하는 값의 범위가 제한적일 때 (예: 국가 이름, 도시 이름, 제품 카탈로그 등)
사용자가 입력해야 하는 값이 복잡하거나 길 때 (예: 제품 코드, 주소 등)
입력 오류를 최소화하고자 할 때
 이 기능은 HTML5에 새로 추가되었지만, 최신 브라우저에서 잘 지원되며 점점 더 많이 사용되고 있다. 적절히 활용하면 사용자 경험을 향상시킬 수 있다.

 

4. 모바일 환경이나 인터넷이 느린 유저에게 잠시 대체 이미지 보여주기

<img
src="고화질 이미지 주소"
style="background-image: url('저화질이미지 주소')"
alt="설명"
width="가로" height="세로">

 사용자는 고화질 이미지가 완전히 로드되기 전에도 대략적인 이미지 컨텐츠를 먼저 볼 수 있다. 이미지 크기를 미리 지정하여 이미지 로드 후에도 레이아웃이 움직이지 않는다. 이미지가 깨지거나 다운로드에 오래 걸리는 상황에서 일관되고 몰입할 수 있는 사용자 경험을 위한 태그이다.

5. 앵커 태그에는 항상 aria-label 사용하기

<a href="이동할 곳" aria-label="이동할 곳 설명">클릭</a>

 aria-label 속성은 웹 접근성(Web Accessibility) 향상을 위해 사용되는 ARIA(Accessible Rich Internet Applications) 속성 중 하나이다. ARIA는 웹 콘텐츠와 웹 애플리케이션을 보조기기(스크린 리더, 점자 디스플레이 등)에서 더 잘 인식할 수 있도록 하는 기술이다.

 aria-label 속성은 특정 요소에 대한 설명 또는 레이블을 제공한다. 이는 시각적인 레이블이 없거나 불명확한 경우에 유용하다. 예를 들어, 아이콘이나 버튼과 같이 텍스트가 없는 요소에 aria-label을 사용하면 보조기기에서 해당 요소의 역할과 기능을 이해할 수 있다.

주요 ARIA 속성
aria-label: 요소에 대한 설명 또는 레이블을 제공합니다.
aria-labelledby: 다른 요소의 텍스트 콘텐츠를 레이블로 사용합니다.
aria-describedby: 요소에 대한 추가적인 설명을 제공합니다.
aria-hidden: 요소를 보조기기에서 숨깁니다.
aria-live: 동적으로 업데이트되는 콘텐츠에 대한 정보를 제공합니다.
aria-atomic: aria-live와 함께 사용되며, 전체 영역이 업데이트되었는지 여부를 나타냅니다.
aria-busy: 요소가 현재 작업 중임을 나타냅니다.
aria-controls: 해당 요소가 제어하는 다른 요소를 식별합니다.
aria-current: 현재 위치, 페이지 또는 상태를 나타냅니다. (aria-current="page", aria-current="step" 등)
aria-expanded: 요소가 확장되었는지 여부를 나타냅니다. (드롭다운 메뉴 등에 사용)
aria-haspopup: 요소에 팝업 메뉴나 다른 종류의 팝업이 있는지 여부를 나타냅니다.
aria-pressed: 토글 버튼과 같이 눌렀을 때 상태가 변경되는 요소의 현재 상태를 나타냅니다.
aria-selected: 선택된 요소를 나타냅니다. (탭, 옵션 등에 사용)
aria-valuemin, aria-valuemax, aria-valuenow: 슬라이더, 진행률 표시줄 등의 최솟값, 최댓값, 현재값을 나타냅니다.
role: 요소의 역할을 정의합니다. (예: role="button", role="slider" 등)

 이외에도 aria-checked, aria-disabled, aria-grabbed, aria-modal, aria-multiline, aria-readonly, aria-required 등의 다양한 ARIA 속성이 있다.
 ARIA 속성은 웹 접근성을 높이는 데 매우 중요한 역할을 하며, 보조기기 사용자가 웹 콘텐츠와 웹 애플리케이션을 더 잘 이해할 수 있도록 도와준다.

6. CSS Position 기본 상식

position: static //기본값
top: 10px; // top, left, right, bottom 안 먹음

position: relative; //원래 있어야 할 자리에 비해서 이동함
z-index: 1; //stacking 가능, 숫자가 클수록 앞으로 나온다
top: 100px; // top, left, right, bottom 으로 위치 조정 가능

position: absolute; //문서에서 있어야할 위치에서 통째로 빠져나옴 부모태그의 width도 무시
top: 0; // top, left, right, bottom 사용 가능

 직관적으로 표시해 보았다. 

 

 

7. H1, H2, H3 헤딩 태그 스타일링

h1, h2, h3, h4 {
    box-sizing: border-box;
    background-repeat: no-repeat
    --headingBorderColor: GREEN;
}

h1 {
  border-width: 2px 8px;
  border-bottom-style: solid;
  border-bottom-color: var(--headingBorderColor);
  border-left-style: solid;
  border-left-color: var(--headingBorderColor);
  letter-spacing: -1px;
  padding: .5rem;
  margin: .25rem 0;
  line-height: 1.5;
}

h2 {
  border-width: 2px 8px;
  border-bottom-style: solid;
  border-bottom-color: var(--headingBorderColor);
  border-left-style: solid;
  border-left-color: var(--headingBorderColor);
  letter-spacing: -1px;
  padding: .5rem;
  margin: .25rem 0;
  line-height: 1.5;
}

h3 {
  border-width: 2px 8px;
  border-bottom-style: solid;
  border-bottom-color: var(--headingBorderColor);
  border-left-style: solid;
  border-left-color: var(--headingBorderColor);
  letter-spacing: -1px;
  padding: .5rem;
  margin: .25rem 0;
  line-height: 1.5;
}

h4 {
  border-left: 8px solid var(--headingBorderColor);
  letter-spacing: -1px;
  padding 0 0 0 .25rem;
  margin: .25rem 0;
}

 일반적으로 거의 모든 커스터마이징 된 블로그들이 사용하고 있는, 헤딩 태그 스타일링입니다. GREEN이라고 되어있는 --headingBorderColor 변수의 색상만 본인의 블로그와 어울리는 색으로 바꿔주시면 된다.

8. 컨테이너 쿼리 @container

.container {
  /* 기본 스타일 */
}

@container (min-width: 600px) {
  .container {
    /* 요소의 가로 크기가 600px 이상일 때 적용할 스타일 */
  }
}

@container (max-width: 400px) {
  .container {
    /* 요소의 가로 크기가 400px 이하일 때 적용할 스타일 */
  }
}

 개별적 반응형 디자인에 쓰인다. 기존의 미디어 쿼리(Media Queries)가 뷰포트(viewport)나 디바이스의 특성을 기반으로 스타일을 적용했다면, 컨테이너 쿼리는 특정 요소의 크기나 특성에 따라 스타일을 적용할 수 있다.

 

9. Toast, Notification 기능은 popover attribute를 사용하면 좋다.

<button popovertarget="mypopover">클릭하세요</button>
<div id="mypopover" popover>내용</div>

 dialog modal과 더불에 새롭게 등장한 popover api는 정말 흥미로운 기능들을 기본적으로 제공하게 되었다. 대부분의 웹사이트, 웹앱에서 Toast 혹은 Notification이라고 하는 기능이 있다. 하단, 혹은 우측 하단에 일종의 알림을 나타내는 기능이다. 비경고성이며, 새롭게 등장한 항목에 대해 주목을 바라기 때문이다.

 예를 들어, "타인이 나에게 친구 추가를 요청하였습니다.", "새롭게 등장한 게시물이 있습니다.", "내가 쓴 글에 댓글이 달렸습니다."처럼, 경고 사운드도 필요 없고 그냥 사용자에게 알리기만 하면 되는 기능이다. 딱히 사용자가 보는 항목을 가릴 필요가 없기 때문에 우측 하단 같이 구석진 곳에 띄우는 것이 Toast의 방향성이다.

 위 예제 코드를 살펴보면, 새롭게 notification할 것이 생기면, 임의의 popover div를 새롭게 생성한 후, 기존의 popover div를 위로 올리는 것을 알 수 있다. 간단한 예제부터 MDN에서 살펴본 후 이 코드를 보면 좋다. <dialog>를 비롯해서 새롭게 등장하는 태그들은 기존에 존재했던 누더기 같은 코드들을 쉽게 만들 수 있게 도와주는 것 같아서 흥미롭다.

아래 링크를 통해 MDN에서 직접 확인해 보시기 바란다.

상세한 MDN가이드라인

MDN에서 제공하는 Popover API 예제

MDN에서 제공하는 Popover Toast Notification 예제