구조 관련 요소
구조 관련 요소들에 대해 알아보는 시간을 가지도록 하겠습니다.
피그마의 구조대로 HTML 틀을 잡고, CSS를 입혀줍니다.
01. <header>, <section>, <footer>, <nav>, <article>,<aside>
| 요소 유형 | 태그명 | 태그의 의미 및 특징 |
|---|---|---|
| 블록 레벨 요소 |
<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. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. |
02. Figma로 구조 잡기
03. HTML
코드 보기
{
<body>
<div id="wrap" class="gmarket">
<header>
<h1><a href="#"><span class="h1_span">h1</span><span class="header_span">header</span>반응형웹</a></h1>
<div class="navB">
<ul>
<span class="nav_span">nav</span>
<li><a href="#">MENU01</a></li>
<li><a href="#">MENU02</a></li>
<li><a href="#">MENU03</a></li>
<li><a href="#">MENU04</a></li>
<li><a href="#">MENU05</a></li>
</ul>
</div>
</header>
<div id="container" class="section_king">
<section class="section_left">
<em>div</em>
<h2>콘텐츠 그룹01</h2><span class="left_span">section</span>
</section>
<section class="section_right">
<h2>콘텐츠 그룹02</h2><span class="right_span">section</span>
</section>
<div class="right_container">
<article class="article">
<h2>주요 기사</h2><span class="article_span">article</span>
</article>
<aside class="aside">광고</aside><span class="aside_span">aside</span>
</div>
</div>
<footer>
<address class="addresss"><span class="footer_address">address</span>경기도 안산시 031)123-4567 eodnjs9605@gmail.com</address>
<p class="footer_p">COPYRIGHT ⓒ All rights reserved. <span class="footer_sp">p</span></p>
</footer>
</div>
</body>
}
04. CSS
코드 보기
{
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
}
.gmarket {
font-family: 'GmarketSans';
font-size: 14px;
font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
a {
text-decoration: none;
color: #000;
font-size: 14px
}
#wrap {
width: 1160px;
margin: 0 auto;
}
header {
background-color: #3083FF;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
margin-top: 20px;
position: relative;
}
h1 {
width: 100px;
height: 100px;
background-color: #DEE0FD;
margin: 20px;
line-height: 100px;
text-align: center;
position: relative;
}
.navB {
background-color: #DEE0FD;
width: 942px;
height: 50px;
margin-top: 70px;
margin-bottom: 20px;
line-height: 50px;
text-align: center;
position: relative;
}
li {
display: inline;
}
li>a {
padding-right: 50px;
}
#container {
width: 1160px;
margin: 0 auto;
display: flex;
}
.section_king {
background-color: #3083FF;
position: relative;
}
.section_left {
width: 973px;
height: 430px;
background-color: #DEE0FD;
margin: 20px;
line-height: 430px;
text-align: center;
position: relative;
}
.section_right {
width: 973px;
height: 430px;
background-color: #DEE0FD;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
line-height: 430px;
text-align: center;
position: relative;
}
.right_container {
display: flex;
flex-wrap: wrap;
margin-right: 20px;
}
.article {
width: 353px;
height: 205px;
background-color: #DEE0FD;
margin-top: 20px;
line-height: 250px;
text-align: center;
position: relative;
}
.aside {
width: 353px;
height: 205px;
background-color: #DEE0FD;
line-height: 205px;
text-align: center;
position: relative;
}
footer {
background-color: #3083FF;
margin-top: 20px;
height: 106px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
flex-direction: column
}
.addresss {
width: 528px;
height: 38px;
background-color: #DEE0FD;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 150px;
line-height: 38px;
text-align: center;
position: relative;
}
.footer_p {
width: 528px;
height: 38px;
background-color: #DEE0FD;
margin-left: 150px;
line-height: 38px;
text-align: center;
position: relative;
}
.h1_span {
color: #fff;
background-color: #666;
position: absolute;
width: 60px;
height: 23px;
line-height: 23px;
left: 20px;
margin-top: 10px;
}
.nav_span {
width: 78px;
height: 23px;
background-color: #666;
position: absolute;
color: #fff;
line-height: 23px;
left: 20px;
margin-top: 10px;
}
.header_span {
background-color: #101010;
color: #fff;
width: 78px;
height: 23px;
position: absolute;
left: 546px;
line-height: 23px;
margin-top: 5px;
}
em {
background-color: #101010;
color: #fff;
width: 78px;
height: 23px;
position: absolute;
line-height: 23px;
left: -20px;
top: -20px;
}
.left_span {
background-color: #666;
color: #fff;
width: 60px;
height: 23px;
position: absolute;
left: 40px;
top: 30px;
line-height: 23px;
}
.right_span {
background-color: #666;
color: #fff;
width: 60px;
height: 23px;
position: absolute;
left: 20px;
top: 10px;
line-height: 23px;
}
.article_span {
background-color: #666;
color: #fff;
width: 60px;
height: 23px;
position: absolute;
line-height: 23px;
top: 0;
left: 0;
}
.aside_span {
background-color: #666;
color: #fff;
width: 60px;
height: 23px;
position: absolute;
line-height: 23px;
top: 245px;
text-align: center;
}
.footer_address {
background-color: #666;
color: #fff;
width: 60px;
height: 23px;
position: absolute;
line-height: 23px;
left: 0;
}
.footer_sp {
background-color: #666;
color: #fff;
width: 60px;
height: 23px;
position: absolute;
line-height: 23px;
left: 0;
}
}
최종 결과
'HTML' 카테고리의 다른 글
| 블록 구조(Block) / 인라인(Inline) 구조 (7) | 2022.08.20 |
|---|---|
| 웹 표준/웹 접근성/웹 호환성 (7) | 2022.08.09 |
댓글