첫번째 Check point 과제인
시맨틱 웹과 시맨틱 태그에 대해서 알아보도록 하겠습니다.
Semantic Web
'의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.
즉 잡다한 데이터 집합이 아닌 ‘의미’ 와 ‘관련성’을 가지는 거대한 데이터베이스를 구축이다.
Sematic Tags
시맨틱 태그는 시맨틱 웹의 성질을 가지는 태그를 의미한다.
-
header : 헤더, 머릿글을 의미한다.
-
nav : 네비게이션, 목차를 의미한다.
-
section : 여러내용을 감싸는 큰 그룹.
-
main : section과 동일한 기능을 하나 단 한번만 선언 가능하다.
-
aricle : 글자가 많이 들어가는 작은 내용들.
-
aside : 왼쪽, 또는 오른쪽에 존재하는 사이드 공간을 의미한다.
-
footer : 푸터, 꼬리말을 의미한다.
-
img : 사진이라는는 의미를 가진 시맨틱태그로 볼수있다.
non-sematic 요소
<div><span>등- 아무 뜻도 가지고 있지않다.
질문
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
img태그는 alt속성 값을 통해 이미지에 대한 부가적인 설명을 담을수있다.
그래서 에러 발생시에도 이미지가 보이지않아도 어떠한 이미지인지 알수 있다.
<div class="bg-img">배경이미지</div>
.bg-img {
background-color: yellow;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}background-image는 보는거와 같이 non-semantic 태그인 div를 사용하였기 때문에 컴퓨터는 이태그를 어떤 이미지이 인지 알수없으며 에러가 발생시에는 이미지를 볼수조차 없다.
결론 이미지에 대한 정보를 함께 담고싶다면 <img>
단순히 장식용이라면 background-imgage를 사용하여도 좋다!
