Jeongchul Kim
HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할 본문
HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할
HTML5 시맨틱 태그(입력 양식)
1. 시맨틱 태그란?
HTML5 시맨틱 태그의 입력양식
HTML5에서 시용하는 주요 시맨틱 태그로는 <header>, <nav>, <section>, <article>, <aside>, <footer>가 있습니다. 먼저 <header>는 주로 로고 영역과 같이 웹 페이지의 헤더를 만들 때 사용합니다.
<nav>은 웹 페이지의 메뉴를 만들 때 사용하는 태그로, 일반적으로 내부에 순서가 없는 목록을 나타내는 <ul>태그와 목록요소를 나타내는 <li>태그를 많이 사용합니다.
<section>태그는 여러 중심 내용을 감싸는 공간을 의미하는 태그를 의미합니다.
<article>태그는 문서, 어플리케이션, 사이트 안에서 독립되어 있는 구성요소로 글자가 많이 들어가는 부분을 의미합니다.
<aside>태그는 웹 페이지 왼쪽이나 오른쪽에 부가적인 내용을 나타내는 영역으로서 퀵메뉴나 광고영역으로 많이 사용됩니다.
마지막으로 <footer>태그는 웹 페이지의 하단을 만들 때 사용하는 태그로, 주로 카피라이트 영역을 표현할 때 사용됩니다.
2. HTML4 문서와 HTML5 문서의 구조 비교
실습 영상은 잘 보셨나요? 우리는 영상을 통해 실행 결과는 동일한 형식으로 제시되지만, 하나는 HTML4 문서로, 다른 하나는 HTML5로 작성된 것을 확인할 수 있었습니다.그럼 이번에는 각 문서들이 어떤 태그를 사용하여 작성되었는지 소스를 분석해 보도록 하겠습니다.
먼저 HTML4의 문서 구조부터 살펴보도록 하겠습니다.
첫 번째 문단은 <div> 태그를 이용하여 id를 header라고 정의하였고, 그 안에는 <h1> 태그를 사용하여 “HTML4 공부!!”라는 텍스트가 가장 크게 출력되도록 프로그래밍하였습니다.
다음 두 번째 문단은 id를 sidebar라 정의한 후 <h2>태그를 사용하여 두 번째로 큰 크기로 출력되도록 하는 인코딩으로, 순서 없는 목록을 나타내는 <ul>태그와 줄 바꿈을 나타내는 <li>태그, 그리고 링크를 걸 때 사용하는 <a href>태그를 사용하였습니다. 인코딩 결과는 다음과 같이 “지난 주”라는 텍스트나 “오래된 글＂이라는 텍스트를 클릭하면 원래는 해당 링크로 이동을 해야 하나,
예제에서는 #을 링크하도록 되어 있기 때문에, 페이지 전환이 이루어지지 않고 실행한 자신의 페이지를 링크합니다.
세 번째 문단은 class를 각각 post라고 정의한 후 Yesterday와 Today를 제목으로 제시한 인코딩입니다. 이들의 프로그래밍은 각각 div태그를 사용하여 문장의 구조를 나누었으며, <p>태그를 사용하여 단락을 나눈 인코딩이라 할 수 있습니다.
마지막 문단은 id를 footer라고 정의한 후 “HTML4 문서 구조 알아보기!!”라는 텍스트를 작은 텍스트로 제시되도록 하는 인코딩입니다.
이번에는 HTML5의 문서 구조를 살펴보도록 하겠습니다.
첫 번째 문단은 <header>태그와 <h1>태그를 이용하여 “HTML5 공부”라는 프로그래밍의 타이틀을 제시하였고, 이어 <nav> 태그를 사용하여 메뉴를 만들었습니다. <nav>태그 안에 들어가는 소스는 HTML4의 코딩과 동일합니다.
HTML4에서는 <div>태그를 사용하여 문장구조를 나누었다면, HTML5에서는 <article> 태그를 사용하여 문장구조를 나눈 것이 특징입니다.
마지막으로 HTML4에서는 일부러 <div>태그를 사용하여 ID를 정의하는 불편함이 있었지만, HTML5에서는 이처럼 <footer> 태그를 사용하여 간단하게 웹 페이지의 하단을 만들 수 있습니다
3. HTML4의 문서 구조 확인 실습
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/DTD/xhtml-trnasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<title>
HTML4 코딩 예!!!
</title>
</head>
<body>
<div id="header">
<h1>html4공부!!</h1>
</div>
<div id="sidebar">
<h2>Menu</h2>
<ul>
<li><a href="#">지난 주</a></li>
<li><a href="#">오래 된 글</a></li>
</ul>
</div>
<div class="post">
<h2>Yesterday</h2>
<p>오늘은 문서구조(outline) 관련 부분을
2시간 동안 봤다.</p>
</div>
<div class="post">
<h2>Today</h2>
<p>HTML4에서는 문서구조를 나툴 때 div태그를 사용한다.</p>
</div>
<div id="footer">
<p><small>HTML4 문서 구조 알아보기!!</small></p>
</div>
</body>
</html>
4. HTML5의 문서 구조 확인 실습
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/DTD/xhtml-trnasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<title>
HTML5 코딩 예!!!
</title>
</head>
<body>
<header>
<h1>HTML5 공부!!!</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="#">지난 주</a></li>
<li><a href="#">오래 된 글</a></li>
</ul>
</nav>
<article>
<h2>Yesterday</h2>
<p>오늘은 문서구조(outline) 관련 부분을
2시간 동안 봤다.</p>
</article>
<article>
<h2>Today</h2>
<p>HTML5에서는 문서구조를 나툴 때 시맨틱 태그를 사용한다.</p>
</article>
<footer>
<p><small>HTML5 문서 구조 알아보기!!</small></p>
<footer>
</body>
</html>
HTML5 시맨틱 태그(공간 분할)
1. HTML5의 효율적인 마크업
HTML5 시맨틱 태그의 공간분할
HTML4 마크업과 HTML5 마크업 태그에 대해 살펴보겠습니다. HTML4는 아무런 의미 없는 <div>태그를 사용하여 개발자들이 붙이는 id에 따라 문서의 내용을 구분합니다. 따라서 문서의 구조를 파악하는 것의 쉽지 않습니다. 하지만 HTML5는 새로운 <header>, <nav>, <section> 등의 시맨틱 태그를 사용하기 때문에 태그만 보고도 제목, 메뉴, 실제내용을 쉽게 구분할 수 있어, 문서 구조를 파악하는데 용이합니다.
좀 더 자세히 알아보기 위해 그림을 보면서 설명 드리겠습니다. HTML4문서는 보시는 바와 같이 문단을 구분할 때, 의미 없는 <div> 태그와 그에 따른 id를 일일이 정해주어야 하는 구조였습니다. 그러나 HTML5에서는 문서의 제목을 나타날 때는 <header>태그, 문단을 구분할 때는 <nav>태그와<section>태그, 그리고, 문서의 마지막을 나타내는 <footer>태그를 사용하기 때문에, 한눈에 봐도 어떤 구조인지 쉽게 파악할 수 있습니다.
자 그림을 보시면, 왼쪽이 HTML4 오른쪽이 HTML5의 실제 소스 코드입니다. HTML4는 <div>태그를 사용하였고, HTML5는 시맨틱 태그를 사용하였습니다.
2. 시맨틱 태그를 활용한 홈페이지 만들기
먼저, 홈페이지의 상단부분인 제목과 메뉴부분부터 분석해 보겠습니다.
해당 홈페이지의 제목은 <header>태그를 통해 제시하였고, 그에 따른 메뉴는 <nav> 태그를 사용하여 제시하였습니다.
다음으로 홈페이지의 본문은 각각 <section> 태그와 <article> 태그로 구성됨을 알 수 있습니다. 본문 전체를 <section> 태그로 감싸고 있으며, 그 내부는 다시 <section>과 <article>로 나눠지는 구조입니다.
본문 왼쪽에 위치한 부분은 <article> 영역은 <aside> 태그를 활용하여 제시하고 있습니다. <aside>태그는 웹 페이지 왼쪽이나 오른쪽에
부가적인 내용을 나타내는 영역으로서 퀵메뉴나 광고영역으로 많이 사용됩니다.
본문 중앙에 위치한 <section>영역은 다음과 같이 2개의 <article>로 구성되었습니다. 각각 <h2>태그를 를 통해 단락별 제목을 제시하였고, <img>태그를 활용하여, 이미지를 제시한 것이 특징입니다.
본문 우측에 보이는 <acticle>영역은 다음과 같이 중간 크기의 제목을 나타내는 <h3>태그와 순서 없는 목록을 나타내는 <ul>태그,
줄바꿈을 나타내는 <li>태그, 그리고 클릭시 링크를 할 수 있는<a heref>태그 등을 사용하였습니다.
마지막으로 홈페이지 하단에 위치한 부분은 다음과 같이 <footer> 태그를 활용하여 만들 수 있습니다.
sample.html
<!doctype html>
<head>
<meta charset="UTF-8">
<title>GrungeSet- subpage</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<!--[if lt IE 7]>
<style type="text/css">
.gallery span { behavior: url(iepngfix.htc); cursor: pointer; }
.gallery li { background: url(images/drop-shadow.gif) no-repeat center bottom; }
</style>
<![endif]-->
</head>
<body>
<!--start header-->
<header>
<div class="container1">
<!--start title-->
<h1 class="fontface" id="title"><span class="orange">Gr</span><span class="pink">un</span><span class="purple">ge</span><span class="blue ">Se</span><span class="green ">t</span></h1>
<!--end title-->
<!--start menu-->
<nav>
<ul>
<li><a href="index.html" class="grn">Home</a></li>
<li><a href="about.html" class="pnk">About</a></li>
<li><a href="#" class="orng">Gallery</a></li>
<li><a href="#" class="blu">Tour Dates</a></li>
<li><a href="#" class="prpl">Contact</a></li>
</ul>
</nav>
</div>
<div class="bottom"> </div>
<!--end menu-->
<!--end header-->
</header>
<div id="container">
<section id="main"><!-- #main content and sidebar area -->
<aside id="sidebar1"><!-- sidebar1 -->
<h2 class="fontface">Subpage</h2> <!-- Title of Page -->
<br><br><br>
<img src="images/ad125.jpg" alt="" /><br /><img src="images/ad125.jpg" alt="" /><br /><br />
</aside><!-- end of sidebar1 -->
<section id="content"><!-- #content -->
<article>
<h2><a href="#">Welcome...</a></h2>
<img src="images/11.jpg" alt="" class="alignleft" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. <a href="#">Duis sagittis ipsum</a>. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duo partem graeco repudiare ne, vix cu graeci nostrud blandit. Agam graecis omnesque usu ut, veniam commune ne sit, vide lucilius complectitur at ius.</p>
<p>Eu eirmod interesset temporibus eum, sea cu amet reque quaestio. Qui erroribus assentior disputando an, quo quot accumsan menandri te, accumsan aliquando dissentias mei ea. Autem verear molestiae an mel, nominavi expetenda similique sit ei. Commodo utroque scribentur id nam, an ferri eruditi perpetua his, et has esse facer nominavi. Mei et essent dictas aliquip. Saepe eligendi phaedrum ne vix, sit putant eruditi eloquentiam at.</p>
</article>
<article>
<h2><a href="#">Title Belongs Here..</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Usu pericula argumentum repudiandae ea, ut vis deserunt oportere, assum nominavi percipitur ei ius. Nam timeam atomorum philosophia te, ut eum amet laoreet pertinax, an duo error aperiri reformidans. Et alii quas partiendo mei, wisi quaestio convenire et vix.</p>
</article>
</section><!-- end of #content -->
<aside id="sidebar2"><!-- sidebar2 -->
<h3 class="fontface">Member Profiles</h3><br>
<ul>
<li><a href="#">Lead Guitarist</a></li>
<li><a href="#">Bass Guitarist</a></li>
<li><a href="#">Drummer</a></li>
<li><a href="#">Vocals</a></li>
</ul>
<h3 class="fontface">Fan Stuff</h3><br>
<ul>
<li><a href="#">Online Store</a></li>
<li><a href="#">Forums</a></li>
</ul>
<h3 class="fontface">Upcoming Tour Dates</h3><br>
<ul>
<li><a href="#">10.25.11- Dayton, OH <span class="pink"> Sold Out!</span></a></li>
<li><a href="#">10.26.11- Dayton, OH </a></li>
<li><a href="#">10.31.11- Dayton, OH </a></li>
<li><a href="#">11.5.11- Tampa, FL </a> <span class="pink"> Sold Out!</span></li>
<li><a href="#">11.6.11- St. Petersburg, FL </a></li>
<li><a href="#">11.11.11- Springfield, IL </a></li>
<li><a href="#">11.12.11- Chicago, IL </a></li>
<li><a href="#">11.12.13 - TBD <span class="blue">Stay Tuned!</a></li>
</ul>
</aside><!-- end of sidebar -->
</section><!-- end of #main content and sidebar-->
</div>
<!--start footer-->
<footer>
<div class="container1">
<p> Copyright © 2016</p>
</div>
</footer>
<!--end footer-->
<!-- Free template distributed by http://freehtml5templates.com -->
</body>
</html>
style.css
'Web프로그래밍' 카테고리의 다른 글
| HTML5 08 변화된 태그 (0) | 2016.04.21 |
|---|---|
| HTML5 07 추가 태그 (0) | 2016.04.21 |
| HTML5 05 시맨틱 태그 - 이미지, 비디오, 오디오 (0) | 2016.04.20 |
| HTML5 04 HTML5 기본 구조 및 문법의 기초 (0) | 2016.04.20 |
| HTML5 - 03 HTML5와 HTML4.01의 차이 (0) | 2016.04.20 |