시맨틱 태그
- HTML5, CSS3, 애니메이션, 애니메이션 관련, 미디어 쿼리, 레이아웃 연습
레이아웃 작성
body 부분에 id=wrap으로 해서 작성하고 그 아래에 5가지 요소를 class로 붙인다.
- #wrap
해당 사이트로 접속하게 되면 side, contents 부분이 아래로 내려가 있는데 이는 레이아웃이 정렬되어 있지 않은 것이다. 이를 정렬하기 위해서 레이아웃은 기본적으로 블록구조로 되어 있기 때문에 css를 적는 부분에다가 flaot:left;로 정렬해주면 된다.
하지만, 블록을 정렬해주고 나면 footer 부분이 깨지게 되는데 이는 clear: both;를 입력해주게 되면 height값이 0이 되는 것을 방지할 수 있게 된다. (float:left;를 사용하면 height값이 0이 되는 상황이 발생해서 겹쳐서 보이지 않게 된다.)
시맨틱: '의미'라는 뜻
<body>
<div id="wrap">
<div class="header"></div>
<div class="nav"></div>
<div class="side"></div>
<div class="contents"></div>
<div class="footer"></div>
</div>
</body>html5이전에는 위와 같이 구분해서 사용했지만 html5부터는 시맨틱 태그라는 것을 만들어서 의미있는 태그를 사용하기 시작했다. (단, 익스플로러8에서는 지원이 안된다.)
<body>
<div id="wrap">
<header></header>
<nav></nav>
<aside></aside>
<section></section>
<footer></footer>
</div>
</body>위 사이트를 참고해서 해당 시맨틱 태그를 상세한 사항을 참고하면 좋을 것이다.
- 태그는 웹 문서의 소개 컨텐츠 및 네비게이션 링크를 정의합니다.
정의(Definition)
- 태그는 웹 문서의 소개 컨텐츠 및 네비게이션 링크를 정의합니다.
- 태그는 제목, 로고, 아이콘, 저자 정보등을 포함합니다.
- 태그는 섹션의 제목 태그를 포함하기 위한 것이지만 필수사항은 아닙니다.
- 태그는 웹 문서에 네비게이션 링크를 정의합니다.
정의(Definition)
- 태그는 웹 문서에 네비게이션 링크를 정의합니다.
- 태그는 모든 링크가 태그일 필요는 없지만, 주요 네이게이션 링크는 태그를 사용합니다.
- 태그는 일반적으로 영역에 링크는 태그를 사용하지 않습니다.
- 태그는 웹 문서에 여러개 있을 수 있지만 주로 사이트 탐색용과 페이지 탐색용으로 사용합니다.
- 태그는 웹 문서 내에 사이드 컨텐츠를 정의합니다.
정의(Definition)
- 태그는 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 그룹화 할 때 사용합니다.
- 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다.
정의(Definition)
- 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다.
- 태그는 탭 페이지, 홈페이지의 소개, 연락처, 뉴스항목 등과 같이 주제별로 분할 할 수 있습니다.
- 태그에는 제목을 나타내는
~
태그가 포함되어야 합니다.
- 태그는 문장이나 문서의 스타일링 요소가 아닙니다. 스크립트의 편의나 영역을 위함이라면 div가 좋습니다.
- 태그가 일반적인 영역의 주제가 아니라면 구체적인 요소(, , )를 대신 사용하는 것이 더 적절합니다.
- 태그는 웹 문서의 바닥글 영역을 정의합니다.
정의(Definition)
- 태그는 사이트와 관련된 정보(저작권자, 연락처, 사이트 맵, 관련된 문서 링크)가 포함됩니다.
- 태그는 한 문서에서 여러번 사용할 수 있습니다.
- 태그는 섹션을 구성하는 태그가 아니가 때문에 섹션을 잡기 위해서 사용하는 위한 태그로는 적절하지 않습니다.
- 태그안에는 [](http://webzz.tistory.com/232) 요소가 포함될 수 있습니다.
접근성(Accessibility)
- 태그는 화면 판독기에 의해 바닥글이라고 정의되어 있지 않기 때문에 footer 요소에는 role="콘텐츠 정보"라고 추가합니다.
미디어 쿼리
- 반응형 웹 사이트에서는 미디어 쿼리가 핵심
- 기본적으로 레이아웃을 잘 이해하고 있어야 되기 때문에 기본은 레이아웃이다.
- 미디어 쿼리는 화면의 크기에 따라 CSS를 다르게 쓰도록 만들 수 있는 것이다.
- 문법: @media only all and (조건문) {실행문}
@media: 미디어 쿼리가 시작됨을 표시합니다.
only: 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)
all: 미디어 쿼리를 해석해야할 대상을 나타냅니다.(생략가능)
all : 모든 미디어 유형에서 사용할 CSS를 정의합니다.
print : 인쇄 장치에서 사용할 CSS를 정의합니다.
screen : 컴퓨터 스크린에서 사용할 CSS를 정의합니다.
aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의합니다.
tv : TV에서 사용할 CSS를 정의합니다.
handheld : 손에 들고 다니는 장치를 사용할 CSS를 정의합니다.
projection : 프로젝트를 위한 사용할 CSS를 정의합니다.and: 앞과 뒤의 조건을 나타냅니다.(생략가능)
(조건문): 해당 조건을 설정할 수 있습니다.
{실행문}: 조건에 따른 실행을 설정합니다.
반응형은 width값을 정할 때 전체적인 너비(wrap)를 1200px 정도로 잡고 그 안의 태그들에 대해서는 퍼센트로 값을 정한다.
반응형을 제작할 때는 스크롤바가 나타나서는 절대로 안되기 때문에 미디어쿼리를 지정할 때 max-width값을 20px정도 크게 지정한다.
