<header> |
|
<aside> |
<main> // 5.1부터 적용 |
<footer> |
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>로고</h1>
<header>
<h2>머릿말</h2>
<section>// 아웃라인에 영향을 주지 않는 동떨어진 영역 <div>는 아웃라인에 영향이 있지만, <section>은 아웃라인에 영향이 없다.
<nav> // 링크만 있는 곳
<h1>메인 메뉴</h1>
<ul>
<li>학습가이드</li>
<li>뉴렉과정</li>
<li>강좌선택</li>
</ul>
</nav>
<section>
<h3>강좌 검색 폼</h3>
<form>
<label>과정검색</label>
<input type = "" value="과정검색"/>
<input type = "submit" value ="검색"/>
</form>
</section>
<nav>
<h1>회원 메뉴</h1>
<ul>
<li>Home</li>
<li>로그인</li>
<li>회원가입</li>
</ul>
</nav>
<nav>
<h1>고객메뉴</h1>
<ul>
<li>마이페이지</li>
<li>고객센터</li>
</ul>
</nav>
</section>
</header>
<aside> // section 보다 좀 더 시멘틱한 별개의 영역
<h1>고객센터</h1>
<nav>
<h1>고객센터 메뉴</h1>
<ul>
<!-- 고객센터 메뉴 -->
<li>공지사항</li>
<li>1:1 고객문의</li>
<li>학습안내</li>
</ul>
</nav>
<nav>
<h2>추천사이트</h2>
<ul>
<!-- 추천사이트 메뉴 -->
<li>앤서이즈</li>
<li>W3C</li>
<li>마이크로소프트</li>
</ul>
</nav>
<nav>
<h2>구글광고</h2>
</nav>
</aside>
<main>
<h2>공지사항</h2>
<br/>
<div>
<ul>
<li>home</li>
<li>고객센터</li>
<li>공지사항</li>
</ul>
</div>
<br/>
<div>
<!-- 공지사항 검색 폼 -->
<form>
<label>제목</label>
<input type="" />
<input type = "submit" value ="검색"/>
</form>
</div>
<br/>
<div>
<table>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>1</td>
<td>당분간 수강신청을 받지 않습니다.</td>
<td>admin</td>
<td>2017-06-26</td>
<td>110</td>
</tr>
</table>
1/1 pages
<ul>
<li>이전</li>
<li>1</li>
<li>다음</li>
</ul>
</div>
</main>
<footer>
</footer>
</body>
</html>
'컴퓨터 > web' 카테고리의 다른 글
| spring jdbc - EmptyResultDataAccessException 발생... (0) | 2017.10.20 |
|---|---|
| 이미지 파일 업로드할 때 미리보기 부분 (0) | 2017.09.19 |
| 서버 시간 임의 변경 (0) | 2012.11.21 |
| xe 새글 표시 (new.gif) 뜨지 않게 하기 (0) | 2012.01.21 |
| xe (1) (0) | 2012.01.20 |
댓글