~~_**html&CSS를 이용하여 페이지에 이미지를 넣는 방법은 두가지가 있다.
1.<img>태그를 이용해서 이미지를 넣는 방법
2.<div>태그를 이용해 background-image 속성을 넣는 방법
<img>태그를 이용하면
<img src="이미지 링크" alt="대안">
이런 식으로 코드 작성이 될 것이고 background-image 속성을 이용하면
<div style="background-image: 이미지 링크">
이런 식으로 코드가 작성이 될것이다.
어떤 방법으로 작성을 하던지 우리가 눈으로 볼 수 있는 결과값은 크게 다르지 않을것이다. 그렇다면 왜 이미지를 넣는 방법이 두개가 되었으며 두 방법 간에 차이가 있다면 어떤 차이점이 았는걸까?
먼저 <img>는 태그이며 background-image는 태그에 대한 속성이다. background-image를 사용하기 위해서는 다른 태그가 필요하며 그 태그에 속성으로서 부여되어 사용될 수 있다.
이와 같은 이유로 background-img는 img에 비해 상대적으로 사용하기 번거로울 수 있으며 img는 태그의 이름 자체에서 태그가 담고 있는 컨텐츠의 내용을 유추할 수 있지만 background-image를 사용하기 위해서는 별도의 태그가 필요하기 때문에 가독성이 떨어질 수 있다.
<img>와 같이 자신의 컨텐츠를 설명하는 태그들을 시멘틱 태그라고 하며 시멘틱 태그들은 html5에서 개발되었다고 한다. 시멘틱 태그 이전에는 div나 span 등의 논시멘틱 태그에 id나 class같은 속성을 부여해 구역을 나누어 구현되었던 기능들이 html5에서는 articl, aside등의 시멘틱 태그 하나로 구현될 수 있게 된것이다.시멘틱 태그를 사용함으로써 검색엔진이 태그의 컨텐츠를 이전보다 더 정확하게 식별할 수 있게 했다고 한다.
[(나중에 알아볼 거)구글같은 검색엔진을 사용할 때 보통 정확도 순으로 나열되던데 태그의 컨텐츠 식별 정확도에 따른 순서인지 궁금해진다. 맞다면 시멘틱태그를 이용해 코드를 작성하는 것이 검색 결과 상단에 내 웹페이지를 노출시킬 수 있는 방법일 수도 있는건가? 그러면 같은 시멘틱 태그들로 작성된 페이지의 우열은 어떻게 나누는건가? 구글 엔진에 따로 우열을 가리는 알고리즘이 있겠지만 어떤 식으로 나누는 건가? 나중에 따로 알아봐야겠다.]
여하튼 이런 부분에서 <img>태그와 background-image를 이용해 이미지를 넣는 방법에 차이가 생긴다고 한다. 내가 이해한 바로는 결국 시멘틱태그를 사용하느냐 아니냐의 차이인 것 같다. 이렇게 보면 img만 쓰는 것이 더 효율적이고 좋아보이는데 background-image도 쓰이는 것 같고 이것에 대한 정확한 이유는 잘 모르겠다. 아직 더 공부해야할 부분이지만 다른 분들의 글들을 참고해보면 크게 <img>는 컨텐츠를 구현할 때, background-image는 디자인적인 요소를 넣고 싶을 때로 구분하여 사용하시는 것 같으므로 일단 이렇게 기억하고 있어야겠다.
Hello