01. 웹페이지에 이미지를 넣는 법
웹페이지에 이미지를 넣는 법은 크게 두가지가 있다.
- html에 < img > 태그를 사용하는 것
<img src = "이미지 링크"/>- css에서 background 속성을 활용하는 것
{background-image : url(“이미지 링크");}이 두가지의 차이점과 사용 시기를 알아보자.
이 둘의 차이점을 알기 위해서는 먼저 sematic tag와 sematic web의 차이점을 알아야한다.
02. semantic web & semantic tag
2.1. semantic web
- 의미론적인 웹이라고한다.
- 웹상에서 축적된 정보가 방대해져 생긴 많은 불필요한 정보들을 사용자가 직접 개입해서 처리해야했다.
컴퓨터가 직접 정보를 추출, 해석, 가공할 수 있는 방법이 없었기 때문이다. - 기계가 읽고 처리할 수 있는 웹을 개발하고자 팀 버너스 리 등에 의해 개념이 제시되었다.
- 검색 엔진에서의 검색에 영향을 줘서 '검색 최적화'에 중요한 역할을 한다.
- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 수 있다.
2.2 semantic tag
-
"의미론적인 태그"라는 뜻으로 HTML5에서는 웹 페이지에서 통상 많이 사용하는 구조에 의미를 부여하기 위해 의미론적 태그를 새롭게 정의했다.
-
semantic tag에 의해 컴퓨터가 html 요소를 더 정확하게 해석하고 사용할 수 있는 semantic web 이 구현될 수 있다.
-
의미없는 'div'를 남발하는 것이 아닌, semantic tag를 정의함으로써 컴퓨터는 'header', 'footer', 'section' 등 웹페이지의 구성을 해석하고, 유의미한 정보처리가 가능하다.
03.차이점
3.1. img 태그
< img > 태그는 semantic tag이다. 웹이 정보로 인지한다. 검색엔진에 사이트가 포함되어 노출되어 사용자에게 도움을 준다. 따라서, 콘텐츠에 관련이 있고 웹페이지의 성능에서 효율적이다.
[사용시기]
1> 프린트가 필요한 경우
백그라운드 이미지는 출력시 포함되지 않는다.
2> 이미지에 문구가 사용되어 의미를 가지는 경우
alt 태그를 통해 이미지가 어떤 의미를 갖고 있는지 알려줄 수 있다.
background-img와 다르게 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있다.
3> 이미지가 콘텐츠의 중심으로 가장 중요한 경우
검색 시 노출이 되도록 만들고 싶을 때
콘텐츠에 관련이 있는 이미지일 때
웹페이지 성능을 높이고 싶을 때
3.2. css에 background-image 속성을 추가하는 것.
{ background-image : url(“이미지 링크);}
1> 디자인적인 요소로만 이미지를 활용하고 싶을 때
2> 콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관 없을 때
정리:
- < img> 태그는 alt 태그를 사용하여 이미지 설명 및 검색 가능한 "Semantic Tag의 일종"이다. 단순히 배경 이미지가 아니라 이미지가 콘텐츠에서 중요한 역할을 해서, 검색 최적화 및 웹페이지 성능에 영향을 미쳐야할 때 필히 사용한다.
- background-image 속성은 페이지 구성에 설명을 필요로 하지 않는 단순 배경이미지일 경우에 활용하기 좋다.
