HTML 5
브라우저는 자신이 인식하지 못하는 태그를 만나면 인라인 태그로 취급 (자신만의 영역을 갖지 않는 태그)
하지만 <header>나 <article> 같은 태그들은 자신만의 영역이 있어야 하는 block level 태그로, 영역이 있어야 위치 등을 옮길 수 있다.
* 블록 레벨 요소 : 적용했을 때 새로운 블록이 만들어지는 태그, 해당 태그가 적용된 부분의 앞뒤로 줄바꿈이 생긴다. <p><div>, <ul> 등...
* 인라인 요소 : 적용하더라도 줄 바꿈이 생기지 않는다. <a>, <img>, <br> 등...
웹 문서에서 사용한 시맨틱 태그들은 <style> </style> 사이에 다음과 같은 소스를 추가하여 강제로 블록 레벨 태그로 설정해주어야 한다.
1 2 3 | header, section, nav, article, footer { display:block; } | cs |
시맨틱 태그를 지원하지 않는 브라우저는 다음과 같이 자바 스크립트를 이용해, 웹 문서에서 사용할 시맨틱 태그들을 새로 정의해야 한다.
<head> </head> 태그 사이에 다음 스크립트를 넣어준다.
1 2 3 4 5 6 7 8 | <script type="text/javascript"> document.createElement('article'); document.createElement('section'); document.createElement('aside'); document.createElement('nav'); document.createElement('header'); document.createElement('footer'); </script> | cs |
HTML5 Shiv
자바스크립트를 이용해 HTML5 태그를 직접 정의해 사용하는 것은 번거롭기 때문에, 이런 과정을 자바스크립트 파일로 제공한다.
https://github.com/aFarkas/html5shiv
위의 페이지로 이동후 src 폴더안의 html5shiv.js 파일을 저장,
<script> 또는 </head> 태그 앞이나 </body> 태그 앞에 다음과 같이 지정한다.
<!--[if lt IE 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]-->
Modernizr
HTML 5를 지원하는지 확인 가능한 라이브러리이다.
https://modernizr.com/
위의 사이트에서 최신 버전의 라이브러리를 다운로드 가능하고, 다운로드한 파일을 다음과 같이 페이지에 링크해 사용한다.
1 2 3 | <head> <script src="medernizr.min.js"></script> </head> | cs |
'Web Develop > Web Programming' 카테고리의 다른 글
| WebRTC 및 Node 등 스터디 (0) | 2022.02.25 |
|---|---|
| Spring Boot시작하기 (0) | 2021.08.10 |
| html 기초 (0) | 2021.01.07 |
| 반응형 웹 만들기 (0) | 2017.03.23 |
| 윈도우 웹서버 설치 및 HTML 실습기초 (0) | 2017.03.09 |