이 태그 vs 저 태그, 누구를 쓸까?

samkong·2022년 3월 30일
2

HTML

목록 보기
3/5
post-thumbnail

❗ 해당 문서는 지속적으로 업데이트 될 예정입니다.
❗ 잘못된 정보나 오류가 있으면 댓글로 편하게 남겨주세요!🥰

많고 많은 HTML의 태그 중, 이 태그를 써야하나 저 태그를 써야하나 헷갈릴 때가 많습니다. 그렇다고, 비슷하다고 아무거나 사용하면 곤란합니다. 이렇게 고민이 되는 태그들을 한데 모아 비교해봅시다! 🔍

🏷 <section> vs <article>

👉 section

일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용한다.

  • 주제별 영역들을 그룹화하기 위해 사용한다.
  • 논리적으로 관계가 있는 요소 또는 문서를 분리할 때 사용한다.
  • 그래서 다른 서비스에 가져다 놓으면 어색하다.

👉 article

독립적으로 구분하거나 재사용할 수 있는 구획을 나타낸다.

  • article 요소는 독립적 콘텐츠이다.
  • 따라서 다른 서비스에 가져다 놔도 이상하지 않다!
  • 미니 html file이라고 생각하면 쉽다.

article과 section 요소는 heading 요소와 함께 사용하는 것을 권장한다.


🏷 <img>의 srcset 속성 vs <picture> 의 <source>의 srcset 속성

👉 <img>의 srcset 속성

srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있다.

  • srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성이다.
    • x서술자 : 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려주는 역할을 한다.
    • w서술자: 원본 이미지의 넓이를 브라우저에게 알려준다.
    • sizes 속성 : 뷰포트(사용자가 보는 화면) 조건에 따라 이미지가 차지하게 될 사이즈를 브라우저에게 알려준다.

    🖐 여기서 잠깐!

    웹표준을 준수하기 위해서는 srcset 속성을 사용하면 그에 맞는 sizes 속성도 반드시 명시되어야 한다. CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법과 충돌 할 수 있기 때문에 사전 협의가 필요하다.

👉 <picture> 의 <source>의 srcset 속성

<source>요소와 <img>를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소다.

  • <picture>요소는 이미지 포맷 자체를 변경 할 수 있다.
  • 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture>요소와 함께 쓰는걸 권장한다.
  • media 속성 : 조건에 맞는 <source>요소 안의 srcset 속성 값을 찾아 <img>의 src에 넣어 화면에 보여준다.
  • type 속성 : 이미지의 포맷 타입을 브라우저에게 알려준다. 위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색하며 만약 지원하지 않는 포맷이라고 판단되면 다음 <source>요소로 넘어간다. 만약 모두 불가능하면 최후 <img> 요소의 이미지를 랜더링 한다.

🖐 여기서 잠깐!

💡 점진적 향상 기법 : 크로스브라우징을 위해 <picture>요소를 사용하는 것처럼 기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법이다.

🏷 <br> vs <wbr>

둘 다 줄바꿈을 위한 태그인데, <wbr>은 텍스트 박스에서 모두 한줄로 표현이 안되는 경우에 줄바꿈이 일어나게 하는 것이다.

👉 <br>

  • 훨씬 더 많이 사용함
  • 시맨틱한 태그가 아니라, 오로지 줄바꿈을 위한 태그이다.

👉 <wbr>

  • 일반적인 한글이나 영어에 해당되지 않는 글자(브라우저 주소 등)에서 사용된다.
  • 개행이 되는 상황이 아니라면, <wbr>이 없는 것과 같다.

🖐 여기서 잠깐!

일반적인 텍스트의 줄바꿈을 원한다면 css style=”word-break: kepp-all”을 하면 한글도 영어처럼 단어 단위로 줄바꿈을 하게된다.

🏷 <b> vs <strong>

  • <b>는 시맨틱 태그가 아닌 bold한 스타일만 부여해주는 태그이다.
  • <strong>은 <b>와 시각적으로 똑같지만, 거기에 강조라는 의미가 더해진 시맨틱한 태그이다.

🏷 <i> vs <em>

  • <i>는 시맨틱 태그가 아닌 기울인 스타일만 부여해주는 태그이다.
  • <em>은 <b>와 시각적으로 똑같지만, 거기에 강조라는 의미가 더해진 시맨틱한 태그이다.

🏷 <strong> vs <em>

<strong>은 중요성,심각성,긴급성을 나타내는 강조로 쓰이고, <em>은 컨텐츠에서 강세를 주고 싶은 부분에 쓰인다.


태그는 아니지만 이미지가 나왔으니 이미지의 포맷의 종류도 잠깐 비교하고 가기!

SVG vs WebP vs AVIF

SVG (Scalable Vector Graphics)

  • SVG형식의 벡터 이미지(코드로 적혀있음)는 아무리 확대해도 품질 저하가 일어나지 않으며 모든 크기에서 렌더링이 가능하다.
  • 단점은 이미지가 복잡해지면 코드가 굉장히 많아져서 용량이 기하급수적으로 커진다. 따라서 보통 이모지 같이 단순한 이미지만 표현한다.🤟🤟🤟

WebP (Web Picture Format)

  • 압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷이다.
  • PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능하다.
  • 한마디로 만능이다.

AVIF (AV1 Image File Format)

  • WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하다.
  • JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷이다.
  • 단점이라 하면 아직 지원하지 않는 브라우저가 많음에 주의!

태그는 다 비슷해보여도 이렇게나 다르다. 우리가 할 일은 웹접근성과 검색 엔진을 최적화 하기 위해서 이런 태그들의 역할들을 확실히 알고 적절히 사용하는 것이다. 세상은 넓고 태그는 많다. :)

profile
공유와 공감을 사랑하는 프론트엔드 개발자 김삼콩입니다

0개의 댓글