사이트에 이미지를 넣을 때 < img > 를 이용하는 방법과 < div > 태그에 background-image 속성을 추가하는 것 두 가지 방법이 있는데 둘의 차이와 어떠한 경우에 사용하면 좋을지 알아보자
이를 위해 semantic web 과 semantic tags 에 대해 우선적으로 알아보려한다.
참고자료 출처: 설명 아래에 기재
Semantic Web
네이버 지식백과의 설명:
현재의 컴퓨터처럼 사람이 마우스나 키보드를 이용해 원하는 정보를 찾아 눈으로 보고 이해하는 웹이 아니라,컴퓨터가 이해할 수 있는 웹을 말한다.
즉 사람이 읽고 해석하기에 편리하게 설계되어 있는 현재의 웹 대신에 컴퓨터가 이해할 수 있는 형태의 새로운 언어로 표현해 기계들끼리 의사소통을 할 수 있는 지능형 웹이다.간단히 이야기해서,
의미론적 웹은 말 그대로 의미를 가진 사이트를 말한다.
따라서 시멘틱 웹의 이상향은 인터넷의 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 주는 것이다.
Semantic Tags
HTML5 이전에는 시맨틱 태그가 없었다. 당시에는 대부분 <div>로 감싸져있었고 이는 사용자의 정확한 의미를 파악하기가 어려웠다. 이에 대한 대안으로 내용의 의미를 알려주기 위한 시맨틱 태그가 사용되게 되었다.
non-semantic and semantic
HTML 요소는 non-semantic 요소와 semantic 요소가 존재한다.
non-semantic 요소
non-semantic 요소는 앞서 이야기한 <div>와 <span>등이 있으며 이들 태그는 내용에 관해서는 설명하지 않는다.
semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.
| tag | description |
|---|---|
| header | 헤더를 의미한다 |
| nav | 내비게이션을 의미한다 |
| aside | 사이드에 위치하는 공간을 의미한다. |
| section | 본문의 여러 내용을 포함하는 공간을 의미한다 |
| article | 본문의 주내요이 들어가는 공간을 의미한다 |
| footer | 푸터를 의미한다 |
이 외에도
< details >, < figure >, < time > 등이 있다.
참고자료: https://takeuu.tistory.com/147 / https://poiemaweb.com/html5-semantic-web
IMG vs CSS background-image
IMG 를 사용하기에 적절한 경우
1. 페이지를 프린트를 해야할 경우, background-image는 프린트할 경우 포함되지 않는다.
2. 이미지가 경고 아이콘과 같이 중요한 의미론적 의미를 가지고 있을 때, alt 와 함께 사용한다.
alt를 통해서 이미지가 뜨지 못할 경우에도 어떤 이미지인지 알려줄 수 있다.
CSS background-image
1. 이미지가 내용의 일부분이 아닐 때 사용한다.
2. CSS sprites를 이용해서 다운로드 시간을 향상시키기 위해서 사용한다.
3. background-size:cover를 통해서 이미지를 전체 화면으로 늘리고 싶을 때 사용한다.
4. 프린트 시에 이미지를 출력시키고 싶지않을 때 사용한다.
