Orchemi

Orchemi

I start where others stop.

[HTML] 레이아웃에 관한 태그와 속성

작성:    

업데이트:

카테고리:

태그: , ,

웹 사이트 공간을 정의하는 태그

가. <header> 태그

  • 웹 사이트의 머리글에 해당
  • <h1>~<h6> 태그를 사용하여 회사 이름이나 슬로건 입력
    <img> 태그를 사용하여 회사 로고를 삽입하거나 페이지 전환을 위한 메뉴 버튼 배치


나. <nav> 태그

  • 메뉴 버튼을 담는 공간
  • <nav> 태그 안에는 버튼을 만들 때 사용하는 <ul>, <il>, <a> 태그 사용


다.<section> 태그

  • 웹 사이트 영역을 설정할 때 사용
  • 각 장(chapter)에 해당
  • 웹 표준에 맞게 사용하려면 반드시 <h2>~<h6> 태그 중 하나는 있어야 함


라. <article> 태그

  • 웹 사이트의 주요 내용이 담기는 공간
  • 신문의 본문 내용과 같은 개념
  • 웹 표준에 맞게 사용하려면 반드시 <h2>~<h6> 태그 중 하나는 있어야 함


마. <aside> 태그

  • 본문 내용과 연관성이 적은 애용이 담기는 공간
  • 웹 사이트의 왼쪽 또는 오른쪽 가장자리에 정보를 담는 공간
  • 흔히 ‘사이드 바’ 라고 부름
  • 배너나 관련 상품처럼 본문 내용과 직접적으로 관련이 적은 내용을 담음


바. <main> 태그

  • 웹 사이트의 본문 내용 전체를 감쌀 때 사용
  • HTML 문서 한 개당 한 번밖에 사용할 수 없음
  • 인터넷 익스플로러(IE)에서는 지원하지 않음
    IE를 지원하려면 role 속성을 추가하여 main 속성값을 따로 지정
<!--IE에서 지원할 수 있도록 <main> 태그 사용 시 role 속성 꼭 입력하자.-->
<main role="main">
  <section>
    <h2>Portfolio</h2>
    <article>
      <h3>Project One</h3>
    </article>
  </section>
</main>


  • <footer> 태그는 웹 사이트 하단에 들어가는 정보를 담는 공간
  • 보통 사업자등록번호, 주소, 연락처, 이메일 주소, 저작권 표시 등
    해당 웹 사이트를 관리하는 회사 정보를 입력할 때 사용


아. <div> 태그

  • 큰 공간 안에서 작은 구역을 만들 때 사용하는 태그
  • <div> 태그 안에 여러 컨텐츠가 있어도 한 번에 수정할 수 있어 유지 보수가 용이
    (DAY 12에서 자세히 다룰 예정)


Block 요소와 Inline 요소

  • Block 요소와 Inline 요소는 웹 사이트 레이아웃 작업에 영향을 미치는 요소
  • 다음과 같은 특징이 있음

    줄 바꿈 현상 유무
    width와 height 속성 적용 유무
    margin-top/bottom, padding-top/bottom 속성 적용 유무


CSS를 배우지 않았기 때문에 줄 바꿈 현상으로만 특징을 살펴본다.

<!--Block 요소-->
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>

<!--Inline 요소-->
<span> Nice to neet you</span>
<span> Nice to neet you</span>
<span> Nice to neet you</span>

실행결과

Hello World

Hello World

Hello World

Nice to neet you > Nice to neet you > Nice to neet you

  • <p> 태그처럼 세로로 정렬되는 태그는 Block 요소
  • <span> 태그처럼 가로로 정렬되는 태그는 Inline 요소


Block 요소(줄 바꿈 O)

<h1>
  ~
  <h6>
    ,
    <p>,</p>
    <header>
      ,
      <section>
        <main>
          ,
          <aside>
            ,
            <footer>
              ,
              <div></div>
            </footer>
          </aside>
        </main>
      </section>
    </header>
  </h6>
</h1>


Inline 요소(줄 바꿈 X)

<span
  >, <a>, <input /></a
></span>


+) display 속성

  • 콘텐츠의 정렬 방식을 바꾸려고 할 때 사용
    ex) <li> 태그는 Block 요소이므로 세로로 정렬되는데 이를 가로 정렬로 바꾸고 싶을 때
<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>display 속성의 사용</title>
    <!--display 속성으로 HTML 태그의 성격을 변경하자-->
    <style>
      li {
        display: inline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>메뉴 1</li>
      <li>메뉴 2</li>
      <li>메뉴 3</li>
    </ul>
  </body>
</html>

댓글남기기

참고