검색결과 리스트
HTML5 Semantic에 해당되는 글 1건
- 2012.02.16 [HTML5] Semantic Element 2 - 요소의 의미 그 두번째.
글
www.sqler.com/384917 을 참고하여 재구성 하였다는 바를 말씀드립니다.
아웃라인을 구성하는 Elements
HTML5에서 추가된 아웃라인을 구성하는 Elements 를 알아보겠습니다.
1. Section Element
Section Element 는 일반적인 Section을 나타내는데 의미 자체로만 보게 되면 기존에 사용하던 Div Elememt와 혼동하기 쉽습니다.
Section Element는 장이나 절 단위라고 생각하시면 되고, 스타일을 적용하기 위해서는 Section Element 를 사용하는 것이 아니고 Div Element를 사용해야 합니다.
Section Element 는 장이나 절을 나타내므로 제목과 본문을 하나로 묶을 때 사용합니다.
예를 들어, 아래 그림과 같이 제목과 본문에 스타일을 적용하고 싶거나 구분을 하려 한다면 Div Element 를 사용하시면 됩니다.
<section class="title">
<h1>제목</h1>
<section class="content">
<p>본문</p>
</section>
</section>
위와 같이 코딩한다면 section으로 나누었기 때문에 다른 장으로 해석하여 본문의 층이 하나 더 생성됩니다.
<section class="title">
<h1>제목</h1>
<div class="content">
<p>본문</p>
</div>
</section>
그러므로 위 그림처럼 코딩하려면 위와 같이 코딩해야 합니다.
그러면 위의 그림처럼도 코딩해 보게 되면,
<body>
<header>제목</header>
<div class="left">
<nav>nav영역</nav>
</div>
<div>
<article>article영역</article>
</div>
<div>
<aside>side menu영역</aside>
</div>
<footer>꼬리말</footer>
</body>
가 될 것입니다. body 안에 <header> 와 <footer> 로 위, 아래를 구성하고 가운데 menu, 본문, side menu 는 div 로 구분하여 구성하면 됩니다.
2. nav Element
Navigation Section을 나타냅니다. 페이지의 Header, 좌측, 우측에 표현하는 link 모음이고, 간혹 Footer에 표현하기도 합니다.
모든 link에 nav Element를 사용하는 것은 옳지 못하고, 스타일을 적용하기 위해서는 div를 사용해야 합니다. 그리고 Site Map 페이지를 nav Element로 표현해서도 안됩니다. Site Map의 link는 nav 특성보다는 Main Contents 이기 때문입니다.
주로 nav Element내에 ul Element를 사용하여 목록으로 Navigation link 를 코딩합니다.
위 그림처럼 코딩해보도록 하겠습니다.
<aside>
<nav>
<h3>카테고리</h3>
<ul>
<li><a href="...">분류전체보기</a></li>
<li><a href="......">VB.NET</a><li>
...
</ul>
</nav>
<nav>
<h3>글보관함</h3>
<ul>
<li><a href=">2011/05(8)</a></li>
<li><a href=">2011/04(4)</a></li>
...
</ul>
</nav>
</aside>
이클립스 실행 모습
'프로그래밍 > ㆍJSP/HTML5' 카테고리의 다른 글
| [Tomcat] 윈도우7에서 톰캣 액세스 문제 - Unable to open the service (1) | 2012.02.25 |
|---|---|
| [jsp] 이클립스와 톰캣 연동 확인하기 - jdk1.7 + tomcat 7.0 (4) | 2012.02.25 |
| [HTML5] HTML5 Semantic Element 1 - HTML5 요소의 의미 (0) | 2012.02.16 |
| [HTML5] HTML5 플러그인 설치, 자동완성 기능 - 기본 개발 환경 만들기 (0) | 2012.02.15 |
RECENT COMMENT