(HTML&DOM) 공간, 시맨틱 태그

강좌5 - HTML&DOM - 8년 전 등록 / 7년 전 수정

공간, 시맨틱 태그

안녕하세요. 이번 시간에는 공간 담당 태그에 대해서 알아보겠습니다.

HTML에서 공간에는 세 가지 종류가 있습니다. Block과 Inline 그리고 Inline-block입니다. Block 태그는 한 줄을 통째로 차지하고, Inline 태그와 Inline-block 태그는 내용물의 길이만큼 공간을 차지합니다. Inline 태그는 높이와 너비를 정할 수 없고, 상하 padding과 margin을 줄 수 없습니다. padding과 margin에 대해서는 CSS 첫 번째 시간에 다루겠습니다. 일단 높이와 너비를 정할 수 없다는 게 중요합니다.

Block 형식의 태그 중 대표적인 것으로 div가 있습니다. Inline은 span이 있고요. Inline-block은 따로 CSS를 설정해주어야 해서 나중에 다루겠습니다.

<span>span1</span><span>span2</span><span>span3</span><div>div</div><span>span4</span>

밑에 실제 예시를 보면 span은 다른 span 태그 옆에 붙는데 div만 한 줄을 통째로 차지하고 있는 것을 볼 수 있습니다.

셋 중에 제일 많이 쓰는 형식은 무엇일까요? 제 홈페이지를 보세요. 여러 구획을 나누고 있는 태그 중에 한 줄을 통째로 차지하는 태그(Block)는 거의 없죠? 그렇다고 Inline도 아닙니다. 다들 저마다 높이와 너비를 가지고 있으니까요. 네, 바로 Inline-block입니다. 주로 div를 많이 사용하는데요. 잠깐, 아까 div는 Block 형식이라고 그랬잖아요! 네, 하지만 CSS를 설정해주면 가능합니다. 뒤에서 배우겠지만 오늘은 필요하니까 잠깐 먼저 알아보도록 하겠습니다.

<div style="display:inline-block;width:30%;height:50px;background:yellow"></div>
<div style="display:inline-block;width:40%;height:20px;background:green"></div>
<div style="display:inline-block;width:30%;height:70px;background:blue"></div>

div의 설정이 Inline-block으로 바뀌었습니다. 거의 이렇게 디자인을 합니다. 그래서 대부분 div가 쓰이는데 문제는 div가 너무 많아지다 보니까 이 div가 무슨 역할을 하는지 알기 힘들어집니다. 그래서 HTML5에서는 그 점을 보완하여 div와 비슷하지만 명확한 역할을 하는 태그들을 추가했습니다. 일명 시맨틱 태그입니다.

header, footer, main, nav

header 태그는 페이지 소개나 제목을 담당합니다. 제 홈페이지 제일 위의 ZeroCho 부분과 포스트의 제목이 바로 header 태그 부분입니다. footer 태그는 저작권 정보나 사이트 제공자 정보를 넣는 공간입니다. 제 홈페이지 아래에 Copyright 부분입니다. main은 몸통 부분입니다. 한 페이지 당 하나만 써야 하고 다른 페이지와 겹치면 안 됩니다. 제 홈페이지에서는 옆의 내비게이션 바, footer, 공지사항을 제외한 부분이 main입니다. nav는 내비게이션 바를 의미합니다. 제 홈페이지에서는 딱 봐도 어딘지 알겠죠?

section, article, aside

section은 구획입니다. 제 포스트에서는 공지사항 부분, 포스트 부분, 댓글 부분이 각각 section으로 이루어져 있습니다. article은 포스트 부분인데 그 자체로도 완전해야 합니다. 이게 무슨 소리냐면, 제 포스트 부분만 떼어서 다른 페이지나 다른 사이트에 놓아도 내용이 말이 되야 한다는 소리입니다. aside는 메인 내용과는 관련이 있지만 직접적인 연관성이 없는 부분을 따로 분리하는 태그입니다. 제 홈페이지에서는 이전글, 다음글 부분입니다.

제 홈페이지가 어떻게 위의 태그들로 구성되어 있는지 예시를 보여드리겠습니다.

<html style="padding: 0; margin: 0">
<head>
<title>시맨틱 예시</title>
</head>
<body style="padding: 0; margin: 0">
  <header style="background: red">ZeroCho Blog</header>
  <nav style="width: 20%; display: inline-block; background: yellow; vertical-align: top; height: 100%">
    <ul>
      <li>Home</li><li>프로필</li><li>HTML&CSS</li>
    </ul>
  </nav>
  <main style="width: 79%; display: inline-block; background: skyblue; height: 100%">
    <section>
      <h1>공지사항</h1>
      <div><b>ZeroCho</b> <em>바보</em></div>
    </section>
    <section>
      <article>
        <h2>HTML 강좌</h2>
        <p>HTML 참 쉽죠?</p>
        <p>CSS는 어려워요</p>
        <p>자바스크립트는 더 어려워요</p>
      </article>
      <aside>
        <ul>
          <li>이전글</li><li>다음글</li>
        </ul>
      </aside>
    </section>
    <footer>Copyright ZeroCho</footer>
  </main>
<body>
</html>

이렇게 틀을 먼저 만들어놓고 나중에 디자인하면 됩니다. 지금은 위의 코드 중 CSS 부분을 크게 신경쓰지 마세요.