티스토리 뷰

책/do it html

HTML5와 시맨틱 태그

안양사람 2020. 8. 28. 14:53
728x90
SMALL

header 태그 - 머리말 지정하기(주로 form 검색, nav 메뉴)

nav 태그 - 문서를 연결하는 네비게이션 링크

section 태그 - 주제별 콘텐츠 영역 나타내기

article 태그 - 콘텐츠 내용 넣기

aside 태그 - 본문 이외의 내용 표시하기

iframe 태그 - 외부 문서 삽입하기(width, height, name, src, seamless(테두리 없애, 크롬, 사파리만 지원)

footer 태그 - 제작 정보와 저작권 정보 표시하기

address 태그 - 사이트 제작자 정보, 연락처 정보 나타내기(주로 footer 안에서)

(transition)

 

IE8이하에서 시맨틱 태그를 사용하기

https://github.com/aFarkas/html5shiv

 

aFarkas/html5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. - aFarkas/html5shiv

github.com

latest zip package 클릭. 다운 압축 푼 후에 src 폴더 안의 html5shiv.js 파일을 원하는 폴더로 복사해 사용

헤더에 아래 코드를 넣으면 IE8이하에서도 사용 가능

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

브라우저 사이의 차이를 매꾸어 주는 폴리필

브라우저 파편화 : 어떤 브라우저에서는 되고 어떤 브라우저에서는 안되는 것

심(shim), 폴백(fallback) : 이런 브라우저 파편화를 줄이고 비슷하게 만드는 방법

폴리필은 파편화가 생기는 브라우저에 삽입하는 자바스크립트로 브라우저를 스스로 진단, 필요한 shim 자동으로 끼움

 

728x90
LIST

' > do it html' 카테고리의 다른 글

다재다능한 CSS3 선택자  (0) 2020.08.30
HTML5와 멀티미디어  (0) 2020.08.29
CSS 레이아웃  (0) 2020.08.27
CSS 박스 모델  (0) 2020.08.26
색상과 배경을 위한 스타일  (0) 2020.08.25
댓글
공지사항