semantic ?
시멘틱이 가지고 있는 사전적인 의미를 살펴보면 의미의, 의미론적인과 같은 뜻을 가지고 있다.
semantic web ?
웹 문서, 각종 파일, 서비스 등을 체계화된 규격으로 표현해 기계가 더 쉽게 해석하고 분석할 수 있도록 만들어진 웹이다.
이를 통해 노출에 대한 이점을 가질 수 있다.
semantic tags ?
의미를 가진 태그를 사용한다는 건 어떤 뜻일까,
단순히 설명해서 이 글의 제목에 있는 말머리와 같은 거라 생각할 수 있다.
만약 아무런 제목과 말머리도 없이 내용을 봐야만 비로소 알게 된다면 우리는 원하는 정보를 얻기 위해 하나하나 확인해봐야 하지 않을까?
그래서 나는 이를 구분 짓기 쉽게, 그래서 빠르게 정보를 얻기 위해 말머리와 제목을 작성한 것이고
<header>, <footer>, <nav>등과 같은 시맨틱 태그도 이처럼 설명할 수 있는 것이다.
시각 장애인과 같이 보조 기계를 사용하여 웹 페이지를 이용하는 경우를 예시로 든다면 더더욱 기계는 개발자가 보여주고 싶어하는 정보를 더 명확하고 정확히 해석하고 전달해야하지 않을까?
그렇기에 개발자는 시맨틱 태그를 통하여 컴퓨터나 다른 개발자에게 명확한 의미를 한 눈에 볼 수 있게 하고 깔끔한 코드를 작성할 수 있게 되는 것이다.
사이트에 이미지를 넣는 방법은 두 가지가 있다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은 것일까?
<img> 태그는 alt=""라는 attribute를 갖고 있다.
alt=""는 alternate의 줄임말로 흔히 이미지의 묘사 내용을 작성하는데
- 이미지가 정상적으로 출력되지 못한 경우
- 이미지를 볼 수 없는 시각 장애인에게 스크린 리더가 이미지에 대한 묘사를 전달하는 경우
- 검색 엔진이 이미지를 이해하는 방법
위와 같은 경우에 큰 도움을 주게 된다.
그렇다면 왜 모든 이미지를 <img>로 사용하지 않고 background-image 속성을 사용하는 것일까요?
검색엔진이 이해하지 않아도 되거나 그 자체로 많은 의미를 내포하고 있지 않은 단순한 이미지나 장식등과 같은 상황에서 사용할 수 있습니다.
