시맨틱 태그

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

1) 시맨틱 태그를 사용한 문서 구조
2) 시맨틱 태그를 지원하지 않는(IE8이하) 버전에서 사용하는 방법
2-1. HTML5 Shiv 사용법
2-2. 폴리필(pollyfill)

시맨틱 태그

시맨틱이란 '의미론적인', '의미가 통하는' 이라는 뜻이다.

웹 문서 레이아웃을 만들 때 시맨틱 코드를 사용하면, 소스만으로도 문서 내용을 알 수 있어서 사이트를 검색할 떄 필요한 내용을 정확히 찾을 수 있어 편리하다.

또한 태그에 대한 역할이 정확히 정해졌기 때문에 어떤 장치에서든 문서를 똑같이 해석할 수 있다.

1) 시맨틱 태그를 사용한 문서 구조

태그	설명	위치	사용
<header>	특정 부분의 머리말	사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽	검색 창, 사이트 메뉴
<nav>	동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음		<nav>마다 ID를 따로 지정해 주면 각 네비게이션마다 스타일 지정할 수 있음
<article>	콘텐츠 영역
<section>	콘텐츠를 주제별로 묶을 떄 사용됨
<aside>	본문 내용 외에 주변에 표시되는 기타 내용들을 나타냄	사이트의 왼쪽이나 오른쪽 또는 하단	사이드바
<iframe>	인라인 프레임(다른 웹 문서를 가져와 표시하는 것) 삽입
<footer>	제작 정보와 저작권 정보 표시	웹 문서 끝자락	사이트 제작자의 연락처 정보와 저작권 정보 표시
<address>	사이트 제작자 정보, 연락처 정보 표시	footer태그 안

2) 시맨틱 태그를 지원하지 않는(IE8이하) 버전에서 사용하는 방법

가장 일반적인 방법으로 HTML5 Shiv를 사용해 시맨틱 태그를 사용할 수 있다.

2-1. HTML5 Shiv 사용법

github.com/aFarkas/html5shiv

위의 페이지에서 설명 내용 중에 있는 [latest zip package]링크 클릭 > 다운로드된 파일의 압축을 푼 후 [src > html5shiv.js]파일을 원하는 폴더로 복사해 사용하면 된다.

/*html5shiv.js파일을 'js'폴더에 저장했다면 
<head></head>내에 다음과 같은 소스를 추가하면
IE8이하 버전에서도 시맨틱 태글를 인식할 수 있다.*/

<!-- [if it IE9]
    <script src="js/html5shiv.js"></script>
<![endif] -->

2-2. Pollyfill

- 브라우저 파편화(browser fragmentation) : HTML5 표준 기능들이 어떤 브라우저에서는 되고 어떤 브라우저에서는 안되는 현상

- 심(shim)또는 폴백(fallback) : 브라우저 파편화를 줄이고 비슷하게라도 같은 결과를 만들기 위한 방법

- 폴리필(pollyfill) : 파편화가 생기는 브라우저에 삽입하는 자바스크립트로 브라우저를 스스로 진단해 필요한 shim을 자동으로 끼워 넣어 준다.

- 참고하면 좋은 사이트 : github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

저작자표시 비영리 변경금지

'💻WEB FrontEnd > HTML5' 카테고리의 다른 글

다양한 폼 요소들 (0)	2020.07.07
폼, 드롭다운 목록 (0)	2020.07.07
하이퍼링크 태그 (0)	2020.07.06
이미지 태그 (0)	2020.07.06
텍스트, 목록, 표 관련 태그 (0)	2020.07.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

winnih_B

LINKS

CATEGORY

시맨틱 태그