본문 바로가기
HTML

구조관련요소

by SyuMay 2022. 8. 15.
728x90

구조 관련 요소

<header>, <section>, <footer>, <nav>, <article>, <aside>

요소 유형 태그명 태그의 의미 및 특징
블록 레벨
요소		 <header>
</header>		 1. HTML문서의 헤더 영역을 의미하는 태그로 제목이나 네비게이션, 검색 등의 내용들을 포함할 수 있습니다.
2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>, <footer>태그는 포함할 수 없습니다.
<section>
</section>		 1. HTML문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소(<h1r>~ <h6>)를 포함하는 것이 좋습니다.
2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
<footer>
</footer>		 1. HTML문서의 푸터 영역을 의미하는 태그로 섹션 자성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있습니다.
2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>, <footer>태그는 포함할 수 없습니다.
<nav>
</nav>		 1. HTML문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다.
2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
<article>
</article>		 1. HTML문서 내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목 요소(<h1r>~ <h6>)를 포함하는 것이 좋습니다.
2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
<aside>
</aside>		 1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며 HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 광고 등의 영역으로 사용됩니다.
2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.

피그마

* {
  box-sizing: border-box;
  margin : 0;
  padding: 0;
  font-size: 14px;
  font-weight: normal;
}
a {
  text-decoration: none;
  color: #000;
}
ul,li{
  list-style: none;
}
li{
  float: left;
}
h1, h2, h3, h4 ,h5 h6 {
  font-weight: normal;
}
.logo1 {
  display: inline-block;
  padding: 3px 32px;
  background-color: #446dff;
  color: #fff;
}
.logo2 {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 1px 26px;   
}
/* container */
#container {
  width: 1160px;
  padding: 20px;
}
.hearder {
  display: flex;
  justify-content: space-between;
  background-color: #97ffec;
  padding: 20px;
  margin-bottom: 30px;
}
.hearder__logobox {
  background-color: #fff;
  font-size: 14px;
  text-align: center;
}
.hearder__logobox p {
  margin: 10px 0;
}
.hearder__logobox h1 {
  margin: 32px 52px 67px 52px;
}
.hearder__menu {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hearder__menu .hearder__logo2 {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 1px 26px;
  margin-bottom: 20px;
  margin-top: 30px;   
}

.hearder__menu nav {
  display: flex;
  background-color: #fff;
  padding: 10px;
  
}
.hearder__menu nav p{
  margin-bottom: 50px;
}
.hearder__menu nav ul li {
  margin: 30px 40px;
}
.contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #97ffec;
  margin-bottom: 20px;
}

.contents__container {
  display: flex;
  background-color: #97ffec;
  padding: 0 20px 20px 20px;
  width: 100%;
}
.contents__main {
  display: flex;
  width: 80%;
  height: 420px;
}
.section {
  width: 50%;
  margin-right: 20px;
  background-color: #fff;
}
.section .logo1 {
  margin: 20px 0 0 36px;
}
.section p {
  text-align: center;
  line-height: 300px;
}

.contents__news {
  width: 20%;
}
.article {
  height: 200px;
  background-color: #fff;
  margin-bottom: 20px;
}
.article p{
  text-align: center;
  line-height: 180px;
}

.aside {
  height: 200px;
  background-color: #fff;
}
.aside p{
  text-align: center;
  line-height: 180px;
}
.footer {
  background-color: #97ffec;
  height: 150px;
}
.footer__box {
  display: flex;
  margin-left: 150px;
  margin-bottom: 20px;
  background-color: #fff;
  width: 60%;
}
.footer__box .logo1 {
  margin-bottom: 20px;
}
.footer__box .side {
  margin-top: 20px;
  margin-bottom: 11px;
  margin-left: 15px;
}

<body>
  <div id="container">
  <header class="hearder">
      <div class="hearder__logobox">
          <p class="logo1">h1</p>
          <h1><a href="#">반응형웹</a></h1>
      </div>
      <div class="hearder__menu">
          <p class="hearder__logo2">header</p>
          <nav>
              <p class="logo1">nav</p>
              <ul>
                  <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>
          </nav>
      </div>
      
  </header>
  
  <div class="contents">
      <p class="logo2">div</p>
      <div class="contents__container">
          <div class="contents__main">
              <section class="section">
                  <h2 class="logo1">section</h2>
                  <p>콘텐츠 그룹01</p>
              </section>
              <section class="section">
                  <h2 class="logo1">section</h2>
                  <p>콘텐츠 그룹02</p>
              </section>
          </div>
          <div class="contents__news">
              <article class="article">
                  <h2 class="logo1">article</h2>
                  <p>주요 기사</p>
              </article>
              <aside class="aside">
                  <h2 class="logo1">aside</h2>
                  <p>광고</p>
              </aside>
          </div>
      </div>    
  </div>
  <footer class="footer">
      <h2 class="logo2">footer</h2>
      <div class="footer__box">
          <p class="logo1">address</p>
          <address class="side">경기도 부천시 오정구 삼정동    032)674-5685    icoxpub@naver.com</address>
      </div>
      <div class="footer__box">
          <p class="logo1">p</p>
          <p class="side">COPYRIGHT @ All right reserved.</p>
      </div>
  </footer>
  </div>
</body>

완성본

원본 사이트 보기 원본 소스 보기
728x90
반응형

'HTML' 카테고리의 다른 글

인라인 | 블록구조  (4) 2022.08.22
W3C | 웹 접근성 | 웹 호환성  (4) 2022.08.08

관련글

댓글

자바스크립트 사진

JavaScript

자세히보기
HTML 사진

HTML

자세히보기
CSS 사진

CSS

자세히보기

티스토리툴바