구조를 나타내는 요소들

컨테이너(div, span)

div 태그는 특정 구역이나 구획을 분할하는데 쓰는 태그임, css가 없으면 아무 내용이 없으면 안 보임
순수 컨테이너로 아무것도 표현하지 않음, 의미를 가지고 있지 않은 것이 특징임(즉, 해당 태그에는 별다른 의미가 없다는 것)
아이템을 묶어서 그룹화하려는 목적임(대부분 스타일링의 목적이 큼 혹은 구역별로 다른 언어임을 표현하기 위해)
전역 특성만 포함함, 의미가 없을때만 써야함
span 태그도 컨테이너 역할이지만 구문 콘텐츠를 담고 인라인 컨테이너임. 대부분 텍스트를 꾸밀 때 묶어서 씀
본질적으로 의미가 없는것은 마찬가지임
아래 예시를 보면 div는 블록 요소의 특징을 가지고 있으므로 한 줄을 채움(이때 여백이 생기는 경우는 body 태그의 기본 여백으로 인한 것임)
나중에 스타일링을 해도 오른쪽에 다른 요소를 둘 수 없음
span의 경우는 인라인 요소의 특징을 가지고 있음, 브라우저 크기 조정시 알아서 크기를 조절함
예시

    <h2>div</h2>
    <div>Lorem ipsum</div>

    <h2>span</h2>
    <span>Lorem ipsum</span>

시멘틱 웹이란

div를 활용한 경우(non-semantic)

  <body>
    <div><!-- Header --></div>

    <div><!-- 메뉴 --></div>

    <div>
      <div><!-- 본문 --></div>
      <div><!-- 사이드바 --></div>
    </div>

    <div><!-- Footer --></div>
  </body>

시멘틱 웹 사용시(semantic)

  <body>
    <header><!-- Header --></header>

    <nav><!-- 메뉴 --></nav>

    <main>
      <article><!-- 본문 --></article>
      <aside><!-- 사이드바 --></aside>
    </main>

    <footer><!-- Footer --></footer>
  </body>

div와 동일하게 동작하지만 시멘틱 태그들의 경우 의미가 있음
이를 통해 요소의 의미를 고려하여 구조를 설계하고 코드를 작성할 수 있는 것
이렇게 쓰는 이유는 검색 엔진이 검색 랭킹에 영향을 줄 수 있는 중요한 키워드임
웹 접근성 측면에서도 페이지 탐색시 의미론적 마크업을 푯말로 사용가능함
그리고 의미있는 코드 블록을 찾고 인지하는데도 유리함 또한 구역을 나눌 경우 태그 안에 채워질 데이터 유형을 인지하기도 편함
딱 맞는 의미가 없더라도 최대한 의미 있는 적절한 네이밍을 반영해서 하는게 좋음

header, footer

header 태그의 경우 소개 및 탐색에 도움을 주는 콘텐츠를 나타냄, 제목, 로고, 검색 폼, 작성자 이름 등, 하나만 써야함
어느곳에 있어도 동일하게 보여질 것임
예시

<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p>
    <a href="https://janesmith.com/the-planet-earth/">Continue reading....</a>
  </p>
</article>

footer 태그의 경우, 웹 페이지 정보, 연관된 사이트, 제작자의 연락처나 저작권 정보를 주로 나타냄
예시

<footer>
  Some copyright info or perhaps some author info for an &lt;article&gt;?
</footer>

nav

네비게이션 바, 현재 페이지가 어딨는지 다른 곳으로 이동하면 어떻게 해야하는지, 전체 홈페이지에서 어딘지 알려주는 태그
일종의 메뉴, 목차, 색인으로 활용, 목록 태그로 많이 활용함
예시

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

참고자료

aside

사이드바를 만들 때 많이 쓰는 태그, 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냄, 콜아웃 박스라고도 부름
네비와는 다르게 부가적인 정보 없어도 무리가 없는 정보 느낌(없다고 본문을 이해 못하는 것은 아니라)
그렇게 중요한 내용은 아닌
예시

<article>
  <p>디즈니 만화영화 <em>인어 공주</em>는 1989년 처음 개봉했습니다.</p>
  <aside>인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.</aside>
  <p>영화에 대한 정보...</p>
</article>

참고자료

main

주요 콘텐츠가 들어가는 영역, body내에서 주요 콘텐츠를 나타낼 때 쓰는 시멘틱 태그
하나보다 많은 요소가 있으면 안됨, 모든 콘텐츠를 아우르는 태그이므로
참고로 인터넷 익스플로러에서는 호환이 안되므로 그에 맞게 처리해야함
예시

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>...</p>
    <p>...</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>...</p>
    <p>...</p>
  </article>
</main>

<!-- other content -->

참고자료

article

하나의 웹페이지에 여러개 쓰일 수 있음
독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄
블로그 글, 매거진이나 뉴스 기사 등, 내용을 이해하는데 독립적으로 봐도 무방한 것들
단독적으로 콘텐츠가 될 수 있으면서도 각각의 글이 article 요소가 되며, 그 안에는 또 여러 개의 section이 존재할 수 있음
아래 예시와 같이 단독으로 존재할 수 있기에 header와 다른 요소들도 들어가 있음, 이 article에 대해 제목을 통해서 나타내곤 함
예시

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.</p>
      </footer>
    </article>
  </section>
  <footer>
    <p>Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.</p>
  </footer>
</article>

참고자료

section

section의 경우 독립적인 구획 즉 article이 될 경우 article을 쓰지만 그렇게 되지 못한 것에 대해서 section 태그를 활용함
section의 경우도 제목을 가질 수 있음, 이 요소를 일반 스타일링 목적으로 컨테이너르 쓰면 안됨 그럴 땐 div 태그 사용
단, 문서 요약에 해당하는 구획이 논리적으로 나타나야 하면 써도 좋음
예시

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness,
    tartness...
  </p>
</section>

참고자료

gang_shik

측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다

구조를 나타내는 요소들

컨테이너(div, span)

시멘틱 웹이란

header, footer

nav

aside

main

article

section

텍스트 요소들

목록과 표

0개의 댓글

관련 채용 정보