html상에서 이미지를 나타날 때 쓰는 방법을 두 가지로 나타내보면,
img 태그를 사용하는 것
- 태그를 봤을 때, 개발자가 전하고자 하는 뜻이 분명히 드러난다.
- 웹에서도 이를 인지하여, 검색엔진에서 상위 검색 결과를 나타낼 수 있다. (장점)
- html에서 직접 수정을 해야한다. (단점)
div 태그에 background-image 속성을 추가하는 것
-
이미지의 크기, div구역의 크기 변화값에
대응하기 쉬움. (장점) -
코드를 살펴보기 전까지 태그가 나타내는 콘텐츠의 내용을 알 수 없다. (단점)
예를 들어, div요소의 너비값을 정한 뒤에 이미지 크기를 그 안에 한계지을 수 있다. (화면 전체의 너비 = 이미지의 가로 크기). 또한 부모요소와 자식요소간의 position을 설정함으로써 자식요소의 가로너비를 퍼센트로 표현할 수 있다.
일단 코딩을 시작한 후 어떻게 할지 모를 때, div, span을 사용하게 되는데 이후 수정이 필요할 경우 html을 건드리지 않고 수정할 수 있다는 장점이 있다.
semantic : 1.의미의 2.의미론의
Semantic Tag : 의미가 있는 태그
위에서 예를 들었던 태그들을 나눠보자면,
- semantic tag : div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
- non-semantic tag: form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.
시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
코드를 짤 때, 논시맨틱 태그가 주는 이점-일단 코딩 짜기 돌입이 쉬움-이 분명하다. 그러나 그 중에서도 의미가 있는 내용에는 시맨틱 태그를 분명히 표시함으로써 웹은 데이타의 우선순위에 따라 관리할 수 있고, 유저는 그에 따른 결과물을 좀 더 자세하게 제공받을 수 있다.
