5. Sections

`<body>`

실제 사용자에게 보여지는 문서의 컨텐츠를 나타내는 요소입니다.

`<article>`

독립적으로 구분하거나 재사용할 수 있는 구획을 나타냅니다.

아래 이미지처럼 어떤 페이지에 붙여도 독립적으로 사용 가능하다면 article 요소를 고려해보세요.

`<section>`

일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용하는 요소입니다.

💡

section vs article * article 요소는 독립적 콘텐츠(다른 서비스에 가져다 놔도 이상하지 않음) * section 요소는 사이트 내 연관 콘텐츠(다른 서비스에 가져다 놓으면 이상함) * article과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)

`<header>`

특정한 컨텐츠의 시작 부분을 나타내는 요소입니다. 일반적으로 구역의 제목을 포함합니다.

`<h1> … <h6>`

heading은 제목을 지정하기 위해 사용됩니다. <h1>내용</h1> ~ <h6>내용</h6>까지 중요도에 따라 사용되며 단순히 글자를 크게하거나 굵게 하기 위해 사용하지는 않습니다.

<h1> 요소는 페이지당 한 번만 사용할것을 권장합니다.

heading 요소를 사용하면 익명 영역(anonymous section)을 생성합니다. living standard에 sections에 해당 태그가 들어가 있으나 이해를 돕기 위해 글자 태그로 그룹핑 했습니다.


<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>

다음과 같이 hgroup으로 대제목과 소제목을 나눌 수 있습니다.


<section>
  <hgroup>
    <h1>제목</h1>
    <h2>소제목</h2>
  </hgroup>
  <p>풀밭에 같지 전인 노년에게서 청춘의 방지하는 수 봄바람을 품고 칼이다. 전인 열락의 풀이 것이 기쁘며, 끝에 그들은 설레는 그리하였는가? 앞이 낙원을 수 얼음이 더운지라 있다. 꽃이 얼마나 붙잡아 열락의 바이며, 청춘이 끝에 말이다. 위하여서 인도하겠다는 싶이 바이며, 못할 심장은 얼마나 피다. 있는 긴지라 그들의 거친 피부가 웅대한 것은 가치를 같지 것이다. 거선의 가치를 천지는 그들은 뜨거운지라, 싸인 끓는 이 것이다. 보배를 만천하의 전인 노래하며 영원히 하는 현저하게 있는가? 굳세게 피에 노년에게서 과실이 약동하다. 청춘을 대중을 거친 것이다.

소리다.이것은 이상의 가는 뼈 천자만홍이 찾아 불어 있으랴? 그들은 싹이 눈이 말이다. 낙원을 가진 만물은 봄바람이다. 발휘하기 되려니와, 얼마나 청춘 인생에 뼈 뜨거운지라, 곳이 인간은 있으랴? 인생을 인간의 공자는 같은 붙잡아 아니한 소금이라 부패뿐이다. 아니한 안고, 청춘의 얼음이 교향악이다. 길을 이것을 없는 공자는 되려니와, 대한 것이다. 일월과 천지는 싶이 지혜는 따뜻한 석가는 위하여 밥을 듣는다. 관현악이며, 착목한는 고동을 품었기 소담스러운 무엇을 튼튼하며, 칼이다. 풀이 붙잡아 인도하겠다는 창공에 위하여 있음으로써 따뜻한 살았으며, 피다. 오직 못하다 대한 끓는 운다.</p>
</section>

p태그 안에 들어간 내용을 입숨이라고 부르고, 자동완성은 영어여서 한글 입숨을 google에서 검색하여 사용했습니다.

또한 heading 요소들은 아래 그림처럼 사용자로 하여금 페이지의 계층구조를 쉽게 파악하도록 만들어줍니다. 때문에 특별한 이유 없이 heading 레벨을 갑자기 몇 단계 뛰어넘도록 작성하는것은 지양해야합니다.

-출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements -

`<nav>`

nav(네비게이션, 탐색) 요소는 보통 메뉴에 사용됩니다.


<nav>
    <a href="https://paullab.co.kr">바울랩</a>
    <a href="https://naver.com">네이버</a>
    <a href="https://google.com">구글</a>
</nav>

`<aside>`

그림에는 오른쪽으로 되어있지만 꼭 오른쪽일 필요는 없습니다. 다른 요소도 마찬가지에요.

해당 콘텐츠와는 별개 콘텐츠

보통 사이드바 혹은 광고 영역으로 활용


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
		<style>
          html,
          body {
            padding: 0;
            margin: 0;
          }
          section,
          aside {
            float: left;
            padding: 10px;
            height: 500px;
          }
          section {
            width: 60%;
            background: goldenrod;
          }
          aside {
            width: 30%;
            background: greenyellow;
          }
     </style>
  </head>
  <body>
        <section>
          <article>
            <h1>바울랩</h1>
            <p>
              바울랩은 제주코딩베이스캠프, 주식회사 위니브, 바울랩(학원, 연구원,
              출판사)로 이뤄져 있으며 기술교육의 보편화에 힘쓰고 있습니다.
            </p>
          </article>
        </section>
        <aside>
          사이트 구경오세요. <br />
          <ul>
            <li>
              <a href="http://paullab.co.kr" target="_blank"> 홈페이지 </a>
            </li>
            <li>
              <a
                href="https://www.inflearn.com/users/@jejucoding"
                target="_blank"
              >
                강의
              </a>
            </li>
            <li>
              <a
                href="https://www.youtube.com/channel/UC4GnvNKtuJ4cqWsYjxNxAEQ"
                target="_blank"
              >
                유튜브
              </a>
            </li>
            <li>
              <a
                href="https://www.instagram.com/weniv_official/?hl=ko"
                target="_blank"
              >
                인스타
              </a>
            </li>
          </ul>
        </aside>
      </body>
    </html>

`<footer>`

`<address>`

가장 가까운 부모 article 이나 body 요소의 연락처 정보를 나타냅니다. 만약 가장 가까운 부모 요소가 body 라면 문서 전체의 연락처 정보를 의미합니다. 연락처 정보에는 전화번호, 메일 주소, 우편 주소 등이 있습니다.


<address>
  <a href="http://www.somedomain.com/contact">
  홈페이지</a>.<br>
	<a href="mailto:webmaster@somedomain.com">
  메일 주소</a>.<br>
  오시는 길:<br>
	제주특별자치도 제주시 동광로 137
</address>