사이트에 이미지를 넣는 방법
💡
img 태그를 사용하는 것과 div태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점은 무엇일까?
이 차이점을 알아보기에 앞서 Semantic Web(시멘틱 웹)과 Semantic Tag(시멘틱 태그)에 대해 알아보자.
Semantic Web
차세대 지능형 웹. 컴퓨터가 이해할 수 있는 웹을 의미한다.
즉, 사람이 읽고 해석하기 편리하게 설계되어 있는 현재의 웹 대신에 컴퓨터가 읽을 수 있는 형태의 새로운 언어로 표현해 기계들끼리 서로 의사소통 할 수 있게끔 만들어둔 지능형 웹을 의미한다.
Semantic Web(시멘틱 웹)을 구현하기 위해서는 정보자원들 사이에 연결되어 있는 의미를 컴퓨터가 이해할 수 있는 형태의 언어로 바꿔줘야 한다.
Semantic Element
웹은 컴퓨터가 해석할 수 있는 언어(메타데이터)와 사람이 읽고 편하게 사용할 수 있는 자연어가 섞여있다.
semantic element를 사용하게 되면 개발자가 의도한 요소가 명확히 드러나고 컴퓨터가 이를 정확하게 이해하고 화면에 구현할 수 있게 한다. 즉 코드의 가독성을 높이고 유지보수를 쉽게한다.
따라서 semantic 요소로 이루어진 웹페이지는 문서 정보를 명확히 전달할 수 있게 되었다.
Semantic tag'란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 보다 정확하게 전달 및 설명하는 역할을 한다.
시멘틱태그를 적절하게 사용함으로써 컴퓨터가 해석할 수 있는 지능형 웹인 시멘틱 웹이 실현된다.즉, 시멘틱 웹이란 웹에 존재하는 수많은 웹페이지들에 Meta Data(메타 데이타)를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
<img > vs background-image 속성
HTML요소는 semantic-elemenet와 non-semantic-element요소로 구분할 수 있다.
<img >는 semantice요소로 컨텐츠의 의미 파악에 용이하며 alt속성으로 이미지에 대한 텍스트도 읽을 수 있어서 웹 접근성도 준수한다.
background 속성으로 이미지를 넣는 경우 div 같은 non-semantice요소의 css로 적용되는 것이 대부분이다. 배경 이미지로 사용하기 때문에 별다른 내용이 없는, 웹페이지 상에서 중요한 내용을 내포하지 않는 이미지를 주로 백그라운드 이미지로 사용한다. 따라서 시멘틱 요소가 아니기에 크게 의미부여를 하지 않는다.
즉, 디자인적인 요소만을 위한 이미지라면 background 속성으로 이미지로 사용하고
삽입하려는 이미지가 핵심적인 내용을 내포하고 있다면 <img >로 사용한다.
