스타트업트랙 프론트엔드 개발과정 2 - (8)

HTML 구획과 시맨틱 요소

구획을 나누는 태그

• div : division
  순수 컨테이너 - 스스로는 아무것도 표현하지 않음
  다른 요소들을 묶거나, 문서의 구획을 나누는 데 사용
  전역(공통) 속성만 가짐

  - 유사한 span: (inline 요소)와 달리 블럭 요소

[한계] 코드로는 용도를 추론할 수 없는 단순 컨테이너

의미가 부여된 태그

각 구획의 용도와 내용의 의미를 태그로써 알 수 있도록 함
검색엔진 등이 사이트를 분석하는 데 도움을 줌
div를 대체해서 사용

• header
  페이지의 최상단에 위치
  일반적으로 제목, 로고, 검색창 등의 내용 등 포함
  페이지의 소개 및 탐색에 도움을 줌

• footer
  페이지의 최하단에 위치
  일반적으로 작성자, 저작권 정보, 관련 문서 등 포함

• nav
  링크들(현재 페이지 내 구획 또른 다른 페이지로의)을 포함

• aside
  문서의 주 내용과 간접적으로 연관된 부분
  주로 사이드바 등에 사용

• main
  body의 주요 컨텐츠
  메인 컨텐츠가 이 구획에 들어감

• section
  컨텐츠 내 큰 단위의 독립적인 구획
  다른 시맨틱 태그의 의미에 해당하지 않는 구획

• article
  독립적으로 재사용되거나 반복적으로 나타나는 구획
  게시판이나 뉴스, 갤러리의 목록상 각 항목

실습코드

<header class="header">
    <a class="logo" href="#">FastCampus Portfolio</a>
    <nav class="nav">
      <ul>
        <li><a href="#">사진 올리기</a></li>
        <li><a href="#">내 정보</a></li>
        <li><a href="#">팔로우 보기</a></li>
        <li><a href="#">팔로워 보기</a></li>
      </ul>
    </nav>
    <a class="account" href="#">Logout</a>
  </header>
  <main class="main">
    <aside class="aside">
      <div class="option-title">보기 옵션</div>
      <ul>
        <li>최신순 보기</li>
        <li>좋아요 순 보기</li>
      </ul>
      <ul>
        <li>내 사진 사진</li>
        <li>좋아요 한 사진</li>
        <li>팔로우 회원 사진</li>
      </ul>
    </aside>
    <div class="content">
      <section class="section intro">
        <h1>패스트캠퍼스 포트폴리오입니다.</h1>
        <p>
          수많은 이용자들이 공유하는 멋진 사진들을 구경하고<br>
          내가 직접 찍은 작품들을 공유하세요!
        </p>
      </section>
      <section class="section gallery">
        <article class="article">
          <div id="photo-1" class="photo"></div>
          <div class="info">
            <div class="like">♥︎</div>
            <div class="author">홍길동</div>
            <div class="desc">
              여행중 발견한 풍경을 사진에 담아보았습니다.
            </div>
          </div>
        </article>
      </section>
    </div>
  </main>
  <footer class="footer">
    <ul>
      <li><a href="#">회사소개</a></li>
      <li><a href="#">인재채용</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">개인정보 보호</a></li>
      <li><a href="#">고객센터</a></li>
    </ul>
  </footer>