웹 문서의 레이아웃

웹프로그래밍 HTML/HTML 구조와 규칙

웹 문서의 레이아웃

별초롱언니 2025. 3. 4. 21:10

▣ 레이아웃

· 화면을 분할하거나 배열하여 구성하는 것
· HTML5 웹 표준에서는 각 영역을 구분하는 구조적 태그 요소를 정의하여 사용

<header>

HTML5 문서의 머리말 영역으로 중요한 정보를 표시

(예 : 사이트의 제목, 로고 등)

<nav>

내비게이션(navigation)영역으로 웹 사이트 내에 분류된 다른 영역으로 이동할 때 사용

<section>

문서의 영역을 구성할 때 사용. <header>, <article> 태그 등을 포함할 수 있음

<article>

독립된 주요 콘텐츠 영역을 정의. 하나의 <section> 태그 내에 여러 개의 <article> 태그를 구성할 수 있음

<aside>

주요 콘텐츠 이외에 남은 콘텐츠를 표시

(예 : 사이드 바 (sidebar) 등)

<footer>

사이트의 자세한 정보를 표시

(예 : 저작권 정보, 관리자 정보, 회사 정보 등)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 기본 구조 태그1</title>
</head>

<body>
  <!-- 헤더 부분 -->
  <header>
    <center>
      <h1>문서의 주제목</h1>
    </center>
    <nav>메뉴1</nav>
    <nav>메뉴2</nav>
  </header>
  <hr/>

  <!-- 본문 부분 -->
  <section>
    <article>
      <header>
        <h2>부제목1</h2>
      </header>
      <p>이곳은 부 세션 영역입니다.</p>
    </article>
    <article>
      <header>
        <h2>부제목2</h2>
      </header>
      <p>이곳은 부 세션 영역입니다.</p>
    </article>
    <article>
      <hgroup>
        <h2>대그룹</h2>
        <h3>중그룹</h3>
        <h4>소그룹</h4>
      </hgroup>
    </article>
  </section>

  <!-- 부가 정보 부분 -->
  <aside>
    <h2>부가적 제목</h2>
    <p>이곳은 부가적 정보를 제공하는 공간입니다.</p>
  </aside>
  <hr/>

  <!-- 사이트 정보 부분 -->
  <footer>
    <small>사이트 정보 표시</small>
  </footer>
</body>

</html>

▣ <hr>요소

· 구분선(horizontal line)을 그을 때 사용

속성	값	설명
align	left, center, right	수평선의 정렬을 지정한다.
noshade	noshade	수평선의 입체감을 제거한다.
size	pixels	수평선의 두께를 지정한다.
width	pixels, %	수평선의 상대적 넓이를 지정한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- <br>, <hr>, <img>, <input>, <meta>, <link> : 종료 태그가 없는 요소들 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 기본 구조 요소2</title>
</head>
<body>

  <!-- 헤더 부분 -->
  <hr>
    <center>
      <h1>문서의 주제목</h1>
    </center>
    <hr align="center" width="50%"></hr>
  </header>
  
  <!--  본문 부분 -->
  <section>
    <article>
      <h2>문서 내용1</h2>
      <h3>문서 내용2</h3>
      <h4>문서 내용3</h4>
      <h5>문서 내용4</h5>
      <h6>문서 내용5</h6>
    </article>
  </section>
  <hr size="10" align="left" width="90%" noshade="noshade"></hr>

  <!-- 사이트 정보 부분 -->
  <footer>
    <small>사이트 정보 표시</small>
  </footer>

</body>
</html>