🎯 semantics를 이해하면 이미지가 보인다.
semantic의 의미
프로그래밍에서 "semantic하다" 는 것은 의미를 가지고 있음을 나타낸다.
HTML에서의 semantics
HTML 마크업을 할 때, 컨텐츠(데이터)를 대표할 수 있는 태그를 사용하여 작성되어야 한다.
컨텐츠를 대표할 수 있는 태그(sementic tag)란?
브라우저와 개발자 모두에게 코드에 담긴 컨텐츠(데이터)의 의미를 명확하게 전달할 수 있는 요소로 그 종류는 다음과 같다.
<header>, <main>, <nav>, <section>, <summary>, <footer> etc..
참고로<div>, <span>은 non-sementic 태그로, 해당 요소가 어떤 컨텐츠를 가지고 있는 지 정보를 담고 있지 않다.
semantic 마크업의 이점
1) 검색엔진 최적화에 유리하다. 즉, 검색에 잘 노출되어 사용자의 접근을 증가시킬 수 있다.
2) 의미가 부여된 마크업을 통해 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색하기 용이하다.
3) 코드 블럭을 찾거나 코드의 의미를 파악하기 쉽다.
4) 개발자가 태그 안에 채워질 데이터 유형을 결정하기 용이하다.
어떤 태그가 컨텐츠(데이터)를 가잘 잘 대표할 수 있을 지 스스로에게 묻자!
이미지를 넣고 싶다. 당신의 선택은?
크게 두 가지 방법이 있다.
- HTML에서
<img src="..." alt="...">로 경로를 연결해서 사용하는 방법 - CSS에서
background-image{ url(...)}로 경로를 연결해서 불러오는 방법
<image> in HTML
이미지가 컨텐츠에 중요한 역할을 하는 경우에 쓴다.
<image>를 쓰면 위에서 언급한 sementic 태그의 이점이 모두 적용된다.
즉, 검색에 잘 노출되어 사용자의 접근이 용이할 뿐만 아니라 <image>의 attribute인 alt에 이미지의 정보를 담는 문구를 정의하여 이미지가 로딩되지 않더라도 어떤 이미지가 표시될 예정이었는지 사용자가 알 수 있고, 시각 장애가 있는 사용자도 스크린리더기로 그 의미를 파악할 수 있다.
background-image property in CSS
컨텐츠를 이해하는데 이미지가 필요한 경우가 아닌 경우, 즉 단지 디자인 적으로 이미지가 필요할 때 쓰는 것이 좋다.
또한 background-image 속성으로 불러온 이미지는 Google 봇이 크롤링하거나 색인하지 않아 사용자의 접근성이 떨어진다.
