시멘틱 태그란?
-의미가 통하는 태그
-태그 이름만 봐도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있다
-종류 : 헤더, 콘텐츠, 사이드바, 푸터
-사이트 검색할 때 필요한 내용을 정확히 찾을 수 있다 (검색할 태그 부분을 알 수 있다)
-어떤 장치에서든 문서를 똑같이 해석할 수 있다
<header>태그 : 머릿말 지정
~맨 위쪽이나 왼쪽
~<form>태그로 검색창, <nav>태그로 메뉴
~본문 중에 사용해 해당 부분의 머리말로 사용 가능
<nav>태그 : 문서를 연결하는 네비게이션
~동일한 사이트 안의 문서, 다른 사이트의 문서로 연결하는 링크 모음
~사용하는 위치 영향 없다 <header>, <footer>, <aside>에 포함 가능, 독립 사용 가능
~여러 <nav>가 있을 경우 id를 따로 지정한다
<section>태그 : 주제별로 콘텐츠 영역
~콘텐츠 영역을 나타낸다
~<h1>등 제목태그 함께 사용
~스타일 적용, 스크립트 사용, 단순 영역 나누기 할 때는 <div>태그 사용
<article>태그 : 콘텐츠 내용 넣기
~부분을 떼어 내 독립적으로 배포하거나 재사용해도 완전히 하나의 콘텐츠가 된다
~종류 : 블로그의 포스트, 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목 등
~<article>태그 안에 <section>태그 넣을 수 있다
<aside>태그 : 본문 이외의 내용
~왼쪽, 오른쪽, 하단에 사이드바
~종류 : 광고, 링크 모음, 문서의 메인 내용에 영향을 미치지 않는 내용들 넣을 때 사용
<iframe>태그 : 외부 문서 삽입
~웹 문서 안에 다른 웹 문서를 가져와 표시하는 것= 인라인 프레임
<iframe src="주소"></iframe>
~width 속성 : 인라인 프레임의 너비
~height 속성 : 인라인 프레임의 높이
~name 속성 : 인라인 프레임의
~seamless 속성 : 프레임의 테두리를 없앤다. 속성값 없다.
~src 속성 : 프레임에 표시할 문서의 주소
<footer>태그 : 제작 정보와 저작권 정보 표시
~제작자의 연락처 정보, 저작권 정보
~<footer>태그 안에 <header>, <section>, <article>태그 모두 사용 가능
<address>태그 : 사이트 제작자 정보, 연락처 정보
~<footer>태그 안에 사용
~단순히 우편 주소를 표기 하려면 <p>태그 이용
IE8 이하 버전에서 시멘틱 태그 사용
http://caniuse.com > [index of feature] > 태그 클릭하면 모던 브라우저에 얼마나 지원하는지 알 수 있음
Can I use... Support tables for HTML5, CSS3, etc
If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself!
caniuse.com
CSS에서 블록 레벨로 정의
-브라우저는 자신이 인식못하는 태그를 만나면 인라인 태그로 취급하기 때문에
-<style>태그 사이에 아래 소스 넣는다
header, section, nav, article, footer {
display: block;
}
자바스크립트 이용해서 태그 직접 정의
<script>
document.createElement('header');
document.createElement('section');
document.createElement('nav');
document.createElement('article');
</script>
HTML Shiv 사용
-<script> 태그 사이에 태그를 직접 정의하는 과정을 자바스크립트 파일로 만들어 사용할 수 있도록 만든 것
https://github.com/aFarkas/html5shiv > [lastest zip package] >파일을 원하는 폴더로 복사 > <head>태그 사이에 소스 추가
aFarkas/html5shiv
This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. - aFarkas/html5shiv
github.com
브라우저 차이 메꾸어 주는 pollyfill
-브라우저 파편화를 줄인다, 비슷하게라도 같은 결과를 만들기 위한 방법 =심(shim)=폴백(fallback)
-파편화 생기는 브라우저에 삽입하는 자바스크립트로 진단해서 필요한 심을 자동으로 끼워 넣어준다
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills 참고
Modernizr/Modernizr
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. - Modernizr/Modernizr
github.com
'HTML' 카테고리의 다른 글
| Do it : HTML,CSS - 14.반응형 웹 (0) | 2020.09.18 |
|---|---|
| Do it : HTML - 11.멀티미디어 (0) | 2020.09.18 |
| Do it : HTML -4. 폼 관련 태그들 (0) | 2020.09.07 |
| Do it : HTML -2.텍스트 관련 태그 (0) | 2020.09.03 |
| Do it : HTML -1. 기본 다지기 (0) | 2020.09.02 |