HTML5 웹 페이지 구조 관련 태그 사용
먼저 <section> 태그를 이용해 제목을 표시하는 방법을 실습해보겠습니다.
1. 새 프로젝트 pro16을 만들고, test01 폴더를 만든 다음 section1.html, section2.html, section3.html, section4.html을 추가합니다.
2. 다음과 같이 session1.html을 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 기본 구조</title>
</head>
<body>
<section>
<h1>기사 제목1</h1>
<p>첫 번째 기사 내용입니다.</p>
</section>
<section>
<h2>기사 제목1</h2>
<p>첫 번째 기사 내용입니다.</p>
</section>
</body>
</html>
3. http://localhost:8080/pro16/session1.html로 요청하여 결과를 확인합니다.
4. session2.html을 다음과 같이 작성합니다. <section> 그 안에 <article> 태그를 사용해 본문을 표시합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 기본 구조</title>
</head>
<body>
<section>
<article>
<h1>기사 제목1</h1>
<p>첫 번째 기사의 내용 </p>
</article>
<article>
<h1>기사 제목2</h1>
<p>두 번째 기사의 내용</p>
</article>
</section>
</body>
</html>
5. http://localhost:8080/pro16/test01/session2.html로 요청하여 결과를 확인합니다.
6. 이번에는 session3.html을 다음과 같이 작성합니다. 여러 가지 시멘틱 웹의 태그를 이용해 화면의 레이아웃을 구성하는 내용입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로그래밍 강좌</title>
</head>
<body>
<header>
<h1>HTML5 강좌를 시작합니다.</h1>
</header>
<nav>
<ul>
<li>1.개념익히기</li>
<li>2.문법익히기</li>
<li>3.실전응용하기</li>
</ul>
</nav>
<aside>
사이드 메뉴
</aside>
<section>
<article>
<h1> 첫 번째 강좌 제목 </h1>
<p> 첫 번째 강좌 내용 </p>
</article>
<article>
<h1> 두 번째 강좌 제목 </h1>
<p> 두 번째 강좌 내용 </p>
</article>
<article>
<h1> 세번째 강좌 제목 </h1>
<p> 세번째 강좌 내용 </p>
</article>
</section>
<aside>
퀵메뉴
</aside>
<footer>
프로그래밍 강의 Copyright All right reserved.
</footer>
</body>
</html>
7. http://localhost:8080/pro16/session3.html로 요청하여 결과를 확인합니다.
그런데 실행 결과를 보니 레이아웃이 제대로 적용되지 않았습니다. 레이아웃을 표시하려면 각 태그에 CSS를 적용해야 합니다.
session4.html은 HTML 태그에 CSS를 적용한 코드 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>도서쇼핑몰</title>
<style type="text/css">
html,body{width:100%;height:70%}
html{overflow-y:scroll}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
body,h1,h2,h3,h4,input,button{font-family:NanumGothicWeb,verdana,dotum,
sans-serif;font-size:13px;color:#383d41}
body{background-color:#fff}
li{list-style:none}
#container{width:760px;margin:0 auto}
header{margin-top:20px;padding:20px;border:1px solid #000;background:#6600cc }
hgroup{overflow:hidden;padding-bottom:20px}
hgroup h1{float:left;font-size:18px;color:#fff}
hgroup h2{float:right;font-weight:normal;color:#fff;opacity:0.8}
nav{clear:both;overflow:hidden}
nav li{float:left;padding-right:5px;font-family:verdana}
nav li span{display:inline-block;padding:3px 10px;
border-radius:5px;background-color:#fff}
section{float:left;width:518px;margin-top:15px;
margin-bottom:20px;padding:20px;border:1px
solid #330000;line-height:20px;background:#99ccff }
article{margin-bottom:10px}
article h3{font-size:16px}
aside{float:right;width:163px;padding:10px;margin-top:15px;border:
1px solid #330000;line-height:20px ;background:#99ccff }
aside .ad{height:100px;margin-bottom:20px;background-color:#ebebeb}
footer{clear:both;padding:20px;border:1px solid #330000 ;background:#99ccff;
text-align:center }
</style>
</head>
<body>
<div id="container">
<header>
<hgroup>
<h1>책읽는 사람이 세상을 바꾼다!!</h1>
<h2>by 홍길동</h2>
</hgroup>
</header>
<nav>
<ul>
<li><span>국내도서</span></li>
<li><span>서양도서</span></li>
<li><span>베스트셀러</span></li>
<li><span>e-book</span></li>
<li><span>아동전집</span></li>
<li><span>이벤트</span></li>
<li><span>문화행사</span></li>
</ul>
</nav>
<section>
<article>
<h1> 첫 번째 도서 제목 </h1>
<p> 첫 번째 도서의 내용 </p>
</article>
<article>
<h1> 두 번째 도서 제목 </h1>
<p> 두 번째 도서의 내용 </p>
</article>
<article>
<h1> 세번째 도서 제목 </h1>
<p> 세번째 도서의 내용 </p>
</article>
</section>
<aside>
<p class="ad">문화 강좌 광고</p>
<ul>
<li><b>html5강좌</b></li>
<li><b>컴퓨터강좌</b></li>
<li><b>독서강좌</b></li>
</ul>
</aside>
<footer>
이메일:admin@test.com<br>
회사주소:서울시 강동구<br>
찾아오는 길:<a href="#">약도</a>
</footer>
</div>
</body>
</html>
http://localhost:8080/pro16/test06/session4.html로 요청하여 실행 결과를 확인합니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| 제이쿼리의 여러 가지 기능 (0) | 2026.05.06 |
|---|---|
| 제이쿼리 주요 개념 (0) | 2026.05.03 |
| HTML5에 추가된 웹 페이지 구조 관련 태그 (0) | 2026.04.25 |
| HTML5 주요 개념 (0) | 2026.04.22 |
| JSP에서 파일 다운로드 (0) | 2026.04.19 |