210708 시멘틱태그

8639 단어 html웹퍼블리셔html

사용하는 이유

HTML5 시멘틱 태그(=의미론적 태그)로 레이아웃을 만드는 이유

HTML5 시멘틱 태그로 만든 소스를 보면 제목, 메뉴 및 실제 내용이 어느 부분인지 쉽게 알 수 인지 쉽게 알 수 있다.

  1. 가장 상위의 컨테이너 :.container 또는 .wrapper

  2. 문서의 주요 내용 지정 : <main>

  3. 주제별 콘텐츠 영역 : <section>

  4. 헤더영역 (로고, 메뉴, 로그, 검색 등) : <header>

  5. 제작 정보 및 저작권 정보 표시 : <footer>

  6. 콘텐츠 내용 넣기 : <article>

  7. 문서 링크하는 메뉴바 : <nav>

  8. 세부 사항 요소 : <summary>

  9. 추가 세부 정보 정의 : <details>

사용예시

<html>
  <head>
    <title>시멘틱 태그 레이아웃</title>
  </head>
  <body>
    <header>
      <!-- 로고/상단 메인 이미지 -->
      <img src="logo.png" alt="로고이미지">
      <!-- 네비게이션 -->
      <nav>
        <a href="index.html">홈으로</a>
        <a href="services.html">주요사업</a>
        <a href="content.html">연락처</a>
        <a href="about.html">회사소개</a>
      </nav>
    </header>
    <main>
        <!-- 메인 컨텐츠 내용 -->
        <section><h1>회사연혁</h1></section>
        <section>
          <h2>2017년 11월 29일</h2>
          <p>통합 'XX시스템 주식회사' 출범</p>
        </section>
    </main>
    <footer>
      <!-- 회사정보
      SNS
      카피라이트(저작권) -->
      <div><p>회사정보, SNS, 카피라이트</p></div>
    </footer>
  </body>
</html>

시멘틱 개념 추가

Brick Breaker-1
씨름 선수(그리디)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage