200915 TIL Semantic Web & Semantic Tag

journey·2020년 9월 15일
0

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

앞서는 질문에 대답하기 전에 Semantic Web과 Semantic Tag에 대해 알아보자.

Semantic HTML, Semantic Elements

Semantic HTML은 개발자 입장에서 태그 안에 어떤 의미를 가지는 코드, 내용이 오는 지 분명하게 해준다. div 태그는 그 자체로 특정 의미를 가지지 않고 광범위하게 사용된다. div 태그를 보는 것 만으로는 그 안에 어떤 내용이 있을 지 알 수 없다. 반면 Semantic 태그는 태그의 이름을 보는 것만으로 그 안에 어떤 내용이 있을 지 알 수 있다.

예를 들어 article, figure, header, main, nav, aside, etc.

img 태그는 이미지의 소스, 이미지의 설명과 관련된 내용을 가진다. Semantic 요소이다.
div 태그는 구획을 나눠주는 역할을 한다. 안에 올 수 있는 내용은 비교적 자유롭다. Semantic 요소가 아니다.

질문으로 돌아가서...

img 태그를 사용해서 사이트에 이미지를 넣는다면, 일단 소스에서 가져온 이미지는 img의 콘텐츠로서 1번 제시된다.
div 태그에 background-image 속성을 추가하여 사이트에 이미지를 넣는다면, 소스에서 가져온 이미지는 div의 background 영역을 가득 채울 때까지 반복하여 제시된다.

사용자가 웹사이트를 프린트할 때 이미지가 초기에 포함되도록 하려면 img를 사용한다.
하지만 그 이미지를 딱히 사용자가 프린트할 때 보여주고 싶지 않다면 div 태그에 background-image를 사용해라. 왜냐하면 배경 이미지는 초기 프린트 설정이 미출력이기 때문이다.

profile
J for Journey

0개의 댓글