728x90
구조와 관련된 요소?
구조와 관련된 요소로 주로 사용되는 시멘틱 태그인, header/section/footer/nav/article/aside에 관한 설명입니다.
| 요소 유형 | 태그명 | 태그의 의미 및 특징 |
|---|---|---|
| 블록 레벨 요소 |
<header> </header> |
HTML 문서의 헤더 영역을 의미하는 태그로 제목, 내비게이션(메뉴), 검색 등의 내용을 포함할 수 있습니다. |
| 텍스트, 인라인 요소, 블록 레벨 요소를 포함 가능하며 <heder>, <footer> 태그는 포함할 수 없습니다. | ||
| <section> </section> |
HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며, 섹션 주세에 대한 제목 요소 (<h2> ~ <h6>) 를 포함하는것이 좋습니다. | |
| 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있습니다. | ||
| <footer> </footer> |
HTML 문서의 가장 하단 부분(푸터)을 의미하는 태그로 섹션 작성자, 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있습니다. | |
| <header>와 같이 텍스트, 인라인 요소, 블록 레벨 요소는 포함할 수 있지만, <header>, <footer> 태그는 포함할 수 없습니다. | ||
| <nav> </nav> |
HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다. | |
| 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있습니다. | ||
| <article> </article> |
독립적으로 배포 또는 재사용일 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며, 제목 요소 (<h2> ~ <h6>) 를 포함하는 게 좋다. | |
| 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있습니다. | ||
| <aside> </aside> |
메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며, HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴 혹은 광고 등의 영역으로 사용이 가능합니다. | |
| 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있습니다. |
HTML 코드
웹 표준을 준수하기 위해 태그는 시멘틱 태그를 사용해 작성하며 효율적인 코드 작성을 위해 div태그를 여러개 만드는것이 아닌 한 태그안에 클래스를 다중으로 삽입해 코드를 정리합니다.
코드보기
<body>
<section class="container section score">
<header class="header_container">
<div class="active_container">
<p>h1</p>
<h1>반응형 웹</h1>
</div>
<div class="nav_container">
<p>header</p>
<div class="nav_mainBox">
<p>nav</p>
<nav>
<ul style="list-style:none">
<li>MENU 01</li>
<li>MENU 02</li>
<li>MENU 03</li>
<li>MENU 04</li>
<li>MENU 05</li>
</ul>
</nav>
</div>
</div>
</header>
<main class="main_container">
<p>div</p>
<section class="container_1">
<p>section</p>
<h1>콘텐츠 그룹 01</h1>
</section>
<section class="container_2">
<p>section</p>
<h1>콘텐츠 그룹 02</h1>
</section>
<div class="container_3">
<section class="news_cont">
<p>aritcle</p>
<h1>주요 기사</h1>
</section>
<section class="commercial_cont">
<p>aside</p>
<h1>광고</h1>
</section>
</div>
</main>
<footer class="footer_container">
<p>footer</p>
<div class="address_box">
<p>address</p>
<h1>경기도 부천시 졸립다 참..</h1>
</div>
<div class="p_box">
<p>p</p>
<h1>COPYRIGHT going to sleep</h1>
</div>
</footer>
</section>
</body>
CSS 코드
폰트는 'SCoreDream'를 이용하고, 클래스를 중첩시켜 스타일을 적용해 효율적인 코드 작성을 합니다.
코드보기
/* fonts */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
:root {
--pink1: #fbe4ec;
--pink_cont: #ea1e63;
}
.score {
font-family: 'SCoreDream';
font-weight: 300;
font-size: 14px !important;
color: #fff;
}
/* Reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
border-radius: 10px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* common(공통) */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 70px 0;
/*위 아래 */
}
.section>h2 {
/* ">" 이걸로 section 안에 있는 h2선택 */
font-size: 50px;
line-height: 1;
/* 1이라고 적으면 auto랑 똑같음 */
text-align: center;
margin-bottom: 20px;
}
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* blind : 제목은 적어야 하나 시각이 불편한 사람들을 위해 숨김처리 */
.blind {
position: absolute;
clip: rect(0 0 0 0);
/* 포토샵의 클리핑 마스크와 같은 효과 */
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden
}
/* header */
.header_container {
background-color: var(--pink1);
width: 100%;
height: 120px;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.header_container ul li {
float: left;
width: 20%;
}
.active_container {
width: 10%;
margin: 20px;
text-align: center;
background-color: var(--pink_cont);
}
.active_container h1{
font-size: 14px;
margin-top: 10px;
}
.active_container p{
margin: 10px auto 0px auto;
}
.nav_container {
width: 90%;
text-align: center;
margin: 20px 70px 20px 0px;
background-color: var(--pink1);
}
.nav_container>p {
margin: 0px 20px 13px 425px;
background-color: #000;
color: #fff;
width: 100px;
}
.nav_mainBox {
display: flex;
justify-content: space-between;
background-color: var(--pink_cont);
margin: 0px;
}
.nav_mainBox nav {
width: 90%;
margin: 20px 60px 10px 60px;
/* background-color: red; */
}
.nav_mainBox ul li {
margin-left: auto;
margin-right: auto;
}
/* main */
.main_container {
background-color: var(--pink1);
width: 100%;
height: 550px;
margin-bottom: 20px;
/* padding: 10px; */
}
.main_container .container_1 {
background-color: var(--pink_cont);
margin: 1px 10px 20px 20px;
float: left;
height: 93%;
/* margin-right: 10px; */
width: 35%;
}
.main_container .container_2 {
background-color: var(--pink_cont);
margin: 1px 10px 20px 10px;
float: left;
height: 93%;
margin-right: 10px;
width: 33%;
}
.main_container .container_3 {
margin: 1px 10px 20px 10px;
float: left;
height: 93%;
width: 25%;
}
.container_1 p,
.container_2 p {
margin: 10px 0px 0px 10px;
}
.container_1 h1,
.container_2 h1 {
text-align: center;
padding: 200px 0px 200px 0px;
}
.news_cont {
background-color: var(--pink_cont);
height: 48%;
margin-bottom: 20px;
}
.news_cont h1 {
text-align: center;
padding: 95px 0px 95px 0px;
}
.commercial_cont {
background-color: var(--pink_cont);
height: 48%;
}
.commercial_cont h1 {
text-align: center;
padding: 95px 0px 95px 0px;
}
.main_container>p,
.active_container p,
.nav_mainBox p,
.news_cont p,
.commercial_cont p,
.container_1 p,
.container_2 p,
.footer_container>p,
.address_box p,
.p_box p {
height: 20px;
background-color: #888;
background: #000;
width: 80px;
text-align: center;
color: #fff;
}
.footer_container {
background-color: var(--pink1);
width: 100%;
height: 128px;
}
.footer_container>p {
/* display: inline; */
}
.address_box p,
.p_box p {
float: left;
}
.address_box h1,
.p_box h1 {
padding-top: 10px;
font-size: 14px;
margin-left: 110px;
}
.address_box,
.p_box {
margin: 0px 20px 0px 200px;
height: 40px;
width: 40%;
background-color: var(--pink_cont);
margin-bottom: 10px;
}
결과
728x90
반응형
'HTML' 카테고리의 다른 글
| 블록/인라인 구조에 대해 알아보자! (5) | 2022.08.21 |
|---|---|
| 벡터/비트맵 (5) | 2022.08.09 |
| W3C 웹 표준에 대하여 알아보자~~~!!! (7) | 2022.08.08 |
| 블록/인라인 요소가 뭘까? (3) | 2022.07.27 |
| 시멘틱 마크업에 대하여 (3) | 2022.07.27 |
댓글