728x90
구조 관련 요소
HTML의 구조를 나타내는 요소입니다.
Semantic Web
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 방식입니다.
| 요소 유형 | 태그명 | 태그의 의미 및 특징 |
|---|---|---|
| 블록 레벨 요소 | <header> </header> |
1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 네비게이션, 검색 등의 내용들을 포함할 수 있습니다. |
| 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>, <footer> 태그는 포함할 수 없습니다. | ||
| <section> </section> |
1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션주제에 대한 제목 요소(<h2>~<h6>)를 포함하는 것이 좋습니다. | |
| 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. | ||
| <footer> </footer> |
1. HTML 문서의 푸터영역을 의미하는 태그로섹션 작성자나 저작권에 대한 정보, 관련된 무서의 링크를 포함할 수 있습니다. | |
| 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>, <footer> 태그는 포함할 수 없습니다. | ||
| <nav> </nav> |
1. HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다. | |
| 2. 텍스트, 인라인 요소 블록 레벨 요소를 포함할 수 있습니다. | ||
| <article> </article> |
1. HTML 문서 내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목 요소 (<h2>~<h6>)를 포함하는 것이 좋습니다. | |
| 2. 텍스트, 인라인 요소 블록 레벨 요소를 포함할 수 있습니다. | ||
| <aside> </aside> |
1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며, HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 광고 등의 영역으로 사용됩니다. | |
| 2. 텍스트, 인라인 요소 블록 레벨 요소를 포함할 수 있습니다. |
[예시]
<body>
<style>
/* reset */
* {
padding: 0;
margin: 0;
font-size: 20px;
font-style: normal;
}
h1, h2 ,h3 ,h4, h5, h6 {
font-weight: normal;
}
/* header */
#header {
margin: 30px;
height: 200px;
background-color: #2fa32f;
display: flex;
flex-wrap: wrap;
}
.h_side {
width: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.h_side > div {
background-color: #eee;
width: 70%;
height: 70%;
background-color: rgba( 255, 255, 255, 0.5 );
text-align: center;
}
.h_side > div > span {
margin: 20px 0;
display: inline-block;
background-color: gray;
color: #fff;
padding: 3px 30px;
}
.h_main {
width: 90%;
}
.h_header {
height: 50%;
text-align: center;
line-height: 100px;
}
.h_header >span {
background-color: black;
color: #fff;
padding: 3px 30px;
}
.h_nav {
height: 50%;
position: relative;
}
.h_nav > nav {
background-color: #eee;
background-color: rgba( 255, 255, 255, 0.5 );
width: 90%;
height: 70%;
line-height: 70px;
text-align: center;
}
.h_nav > nav > span {
margin: 0 60px;
}
.n_nav {
position: absolute;
top: 10px;
left: 20px;
background-color: gray;
color: #fff;
padding: 3px 30px;
}
/* div */
#div {
margin: 0 30px 30px 30px;
height: 700px;
background-color: #2fa32f;
position: relative;
}
#div > h1 {
position: absolute;
left: 0;
top: 0;
background-color: black;
color: #fff;
padding: 3px 30px;
}
.d_contaioner {
height: 700px;
display: flex;
}
.content1 {
width: 40%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content1 > .c1_box {
background-color: #eee;
background-color: rgba( 255, 255, 255, 0.5 );
width: 90%;
height: 90%;
}
.content1 > .c1_box > span {
margin: 20px 20px;
display: inline-block;
background-color: gray;
color: #fff;
padding: 3px 30px;
}
.content1 > .c1_box > h2 {
text-align: center;
line-height: 500px;
}
.content2 {
width: 40%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content2 > .c2_box {
background-color: #eee;
background-color: rgba( 255, 255, 255, 0.5 );
width: 90%;
height: 90%;
}
.content2 > .c2_box > span {
margin: 20px 20px;
display: inline-block;
background-color: gray;
color: #fff;
padding: 3px 30px;
}
.content2 > .c2_box > h2 {
text-align: center;
line-height: 500px;
}
.d_aside {
width: 30%;
height: 100%;
}
.article {
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.article > .art_box {
background-color: #eee;
background-color: rgba( 255, 255, 255, 0.5 );
width: 86%;
height: 277px;
}
.article > .art_box > span {
display: inline-block;
background-color: gray;
color: #fff;
padding: 3px 30px;
}
.article > .art_box > h2 {
text-align: center;
line-height: 240px;
}
.ad {
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.ad > .ad_box {
background-color: #eee;
background-color: rgba( 255, 255, 255, 0.5 );
width: 86%;
height: 277px;
}
.ad > .ad_box > span {
display: inline-block;
background-color: gray;
color: #fff;
padding: 3px 30px;
}
.ad > .ad_box > h2 {
text-align: center;
line-height: 240px;
}
/* footer */
#footer {
margin: 0 30px;
height: 150px;
background-color: #2fa32f;
position: relative;
}
#footer > h1 {
position: absolute;
left: 0;
top: 0;
background-color: black;
color: #fff;
padding: 3px 30px;
}
.f_container {
width: 40%;
height: 100%;
margin-left: 10%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.f_container .adr_box {
background-color: #eee;
background-color: rgba( 255, 255, 255, 0.5 );
width: 100%;
height: 40%;
text-align: right;
position: relative;
}
.f_container .adr_box > h2{
position: absolute;
left: 0;
top: 0;
background-color: gray;
color: #fff;
padding: 3px 30px;
}
.f_container .adr_box > address {
display: inline;
margin-right: 30px;
line-height: 60px;
}
.f_container .p_box {
background-color: #eee;
background-color: rgba( 255, 255, 255, 0.5 );
width: 100%;
height: 40%;
text-align: right;
position: relative;
}
.f_container .p_box > h2 {
position: absolute;
left: 0;
top: 0;
background-color: gray;
color: #fff;
padding: 3px 30px;
}
.f_container .p_box > p {
display: inline;
margin-right: 30px;
line-height: 60px;
}
</style>
<header id="header">
<div class="h_side">
<div>
<span>h1</span>
<h1>반응형웹</h1>
</div>
</div>
<div class="h_main">
<div class="h_header">
<span>header</span>
</div>
<div class="h_nav">
<nav>
<span>MENU01</span>
<span>MENU02</span>
<span>MENU03</span>
<span>MENU04</span>
<span>MENU05</span>
</nav>
<span class="n_nav">nav</span>
</div>
</div>
</header>
<div id="div">
<h1>div</h1>
<div class="d_contaioner">
<div class="content1">
<div class="c1_box">
<span>section</span>
<h2>콘텐츠 그룹1</h2>
</div>
</div>
<div class="content2">
<div class="c2_box">
<span>section</span>
<h2>콘텐츠 그룹2</h2>
</div>
</div>
<div class="d_aside">
<div class="article">
<div class="art_box">
<span>article</span>
<h2>주요 기사</h2>
</div>
</div>
<div class="ad">
<div class="ad_box">
<span>aside</span>
<h2>광고</h2>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<h1>footer</h1>
<div class="f_container">
<div class="adr_box">
<h2>address</h2>
<address>경기도 부천시 오정구 삼정도 032)674-5685 1coxpib@naver.com</address>
</div>
<div class="p_box">
<h2>p</h2>
<p>COPYRIGHT ⓒ ALL right reserved.</p>
</div>
</div>
</footer>
</body>
댓글