01. 이해를 돕기
Semantic Web과 Semantic Tag의 이해를 돕기위해
이미지 넣는 방법 두 가지를 살펴보자
1) img 태그를 사용
2) div 태그에 background-image 속성추가
img태그는
1. 프린트가 필요한 경우.
: 백그라운드 이미지는 프린트하면 안나옵니다.
2. 의미있는 이미지인 경우.
: img alt속성을 사용해 어떤 이미지인지 알려줍니다.
(백그라운드 이미지 css속성은 alt태그가 없습니다)
3. 이미지가 콘텐츠의 중심일 경우
div태그 +background-img css속성은
1. 프린트 할경우 이미지를 제거해야 하는 경우
2. 이미지 위에 텍스트가 들어가는 경우
3. hover버튼을 사용하고 싶은 경우
4. 이미지 로딩 속도를 빠르게 향상시키고 싶은 경우에 사용한다.
02. Semantic Web과 Semantic Tag에 관하여
semantic web[시멘틱 웹]
웹페이지를 구성하고 있는 각 요소들의 의미, 관계를 파악하고 구축하여
데이터베이스화하고자 하는 움직임.
이를 통해 검색엔진 또는 컴퓨터가 웹페이지의 구성요소가 가지는 의미와 관계를 쉽게 파악할 수 있다.
정보 검색시 불필요한 정보는 너무 많이 존재한다.
컴퓨터가 정보를 체계적으로 수집, 가공하도록 시작되었다.
sematic tag[시멘틱 태그]
시멘틱 웹을 용이하게 하기 위해, 아미를 가진 semantic tag들이 새로 추가되었다.
semantic tag: form, section, header, main, footer, nav, table
non-semantic tag: div span
img 태그의 경우, 해당 컨텐츠가 이미지라는 정보를 알려주는 semantic tag 입니다.
검색엔진에서 웹페이지를 검색시 alt 정보를 바탕으로 명확한 검색을 가능하게 할 수 있습니다.
반면 background-image태그는 정보를 알려주는 기능은 없습니다. 따라서 반복적으로 사용되는 작은 아이콘이나 단순 디자인적 요소들에 사용하는 것이 좋습니다.
03. 생각정리
어떤 자료가 의미있는 것인지 아닌지를 구분하는 일은 중요하다.
내가 만든 자료를 검색엔진이 방대한 인터넷의 바다에서 유의미한 내용을 골라 필요한 사람에게 효과적으로 보여줄 수 있고,
시각장애인들도 보조기기를 사용하여 웹페이지 접근의 불편을 최소화할 수 있게 도와준다.
html과 css의 분명한 차이이기도 하다.
html은 정보를 알려주고, css는 그것을 꾸민다.
html에 필요한 정보가 제대로 담기도록 관련 태그를 잘 익히고 사용해야겠다.
