시멘틱웹? 시멘틱태그?
과제
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
시멘틱태그
시멘틱태그란 html코드에 정확한 의미를 부여하는 태그이다.
웹사이트에서 검색엔진이 정확한 검색결과를 찾을 때, 개발자가 개발을 할 때 등
데이터를 분류하고 설명하기 위해 코드에 의미를 부여해주는 것이다.
화면에 출력된 글자를 음성으로 읽어주는 시각장애인 용 도구인 스크린 리더, 그리고 웹 사이트를 읽어 기록하는 프로그램인 웹 크롤러는 시맨틱 태그를 읽어 처리한다.
시멘틱 웹
시맨틱 웹이란 수많은 웹페이지들 사이 약속과 같다.
다르게 생긴 웹페이지들이지만 웹페이지들을 이루는 html코드를 들여다보면
<head>,<footer>,<title>,<body> ...그 역할과 의미를 알 수 있는 코드들로 이루어져있고, 이렇게 많은 웹페이지들이 같은 약속을 공유해 커다란 데이터베이스로 활용하고자 하는 것이 시멘틱웹이다.
non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,
과제풀이
**웹사이트에 이미지를 넣을때**
<img> 태그를 사용하는 것과
<div> 태그에 background-image 를 사용하는 것의 차이는
<img>태그는 시멘틱요소로
웹크롤러에 '이미지'콘텐츠라는 의미를 정확하게 전달 할 수 있지만
"시멘틱 태그"임을 인지하고 사용해야 한다는 단점이 있다.
<div>의 경우에는 class를 부여해 편하게 사용할 수 있지만
웹 크롤러 등은 이것을 '의미 없음'으로 판별하는 단점이 있다.
iOS Developer