문서 및 웹사이트 구조

Attributions and copyright licensing (opens in a new tab) by Mozilla Contributors (opens in a new tab) is licensed under CC-BY-SA 2.5 (opens in a new tab).

문서의 기본 섹션

웹페이지는 서로 매우 다르게 보일 수 있고 또 그렇게 보일 수 있지만, 페이지가 동영상의 전체 화면이거나 게임을 표시하거나 예술 프로젝트의 일부이거나 구조가 엉망인 경우를 제외하고는 모두 비슷한 표준 구성 요소를 공유하는 경향이 있다.

header	일반적으로 상단에 큰 제목, 로고, 태그 라인이 있는 큰 strip이 있다. 이는 일반적으로 웹페이지마다 동일하게 유지된다.
navigation bar	사이트의 주요 섹션으로 연결되는 링크이며 일반적으로 메뉴 버튼, 링크 또는 탭으로 표시된다.
일반적으로 웹페이지마다 일관되게 유지되며, 웹사이트의 내비게이션이 일관되지 않으면 사용자가 혼란스러워하고 불만을 갖게 된다.
내비게이션 바를 헤더의 일부로 간주하는 경우가 많다. 스크린 리더가 두 기능을 분리하면 더 잘 읽을 수 있으므로 접근성을 위해 두 기능을 분리하는 것이 더 좋다고 주장하는 사람들도 있다.
main content	시청하려는 동영상, 읽고 있는 주요 기사, 보고 싶은 지도, 뉴스 헤드라인 등 특정 웹페이지의 고유한 콘텐츠가 대부분 포함된 중앙의 큰 영역. 페이지마다 확실히 달라지는 부분이다.
sidebar	일부 주변 정보, 링크, 인용문, 광고 등. 일반적으로는 메인 콘텐츠에 포함된 내용과 관련이 있지만(예: 뉴스 기사 페이지에서 사이드바에는 작성자의 약력이나 관련 기사 링크가 포함될 수 있음), 보조 탐색 시스템과 같이 반복되는 요소를 찾을 수 있는 경우도 있다.
footer	일반적으로 작은 글씨, 저작권 고지 또는 연락처 정보가 포함된 페이지 하단의 strip이다. 헤더와 같은 일반적인 정보를 넣는 공간이지만 일반적으로 웹사이트 자체에 중요하거나 부차적인 정보는 아니다. 바닥글은 인기 있는 콘텐츠에 빠르게 액세스할 수 있는 링크를 제공하여 SEO 목적으로도 사용되기도 한다.

🦋 레이아웃, 색상 및 글꼴을 포함하여 페이지의 모양은 HTML에 CSS를 적용하여 이루어진다.

콘텐츠 구조화를 위한 HTML

사용하면 거의 모든 요소를 사용하여 여러 섹션을 감싸고 원하는 모양으로 만들 수 있지만, 앞서 설명한 것처럼 의미를 존중하고 작업에 적합한 요소를 사용해야 한다.

시각적 요소만으로는 모든 이야기를 전달할 수 없기 때문이다. 예를 들어 '분홍색'이나 '큰 글꼴'과 같은 개념이 그다지 유용하지 않을 수 있는 시각장애인은 어떻게 해야 할까?

HTML 코드에서 콘텐츠 섹션을 기능에 따라 마크업할 수 있다. 위에서 설명한 콘텐츠 섹션을 명확하게 나타내는 요소를 사용하면 스크린 리더와 같은 보조 기술이 이러한 요소를 인식하여 "기본 탐색 찾기" 또는 "주요 콘텐츠 찾기"와 같은 작업을 지원할 수 있다. 이 과정의 앞부분에서 언급했듯이 작업에 적합한 요소 구조와 의미를 사용하지 않을 경우 여러 가지 결과가 발생할 수 있다.

이러한 Semantic Markup을 구현하기 위해 HTML은 이러한 섹션을 나타내는 데 사용할 수 있는 전용 태그를 제공한다.

header : <header>.
navigation bar : <nav>.
main content : <main>, <article>, <section>, <div> 요소로 표시되는 다양한 콘텐츠 하위 섹션이 있다.
sidebar : <aside>; 종종 <main> 안에 배치한다.
footer : <footer>.

HTML 레이아웃 요소 자세히 알아보기

웹 개발 경험이 쌓이면서 점차적으로 익히게 될 모든 HTML sectioning elements의 전반적인 의미를 자세히 이해하는 것이 좋다.

참고 : HTML element reference (opens in a new tab)

지금부터 이해해야 할 주요 정의는 다음과 같다.

<main>은 이 페이지에 고유한 콘텐츠를 위한 것이다. <main>은 페이지당 한 번만 사용하고 <body> 안에 바로 넣어야 한다. 이상적으로는 다른 요소 안에 중첩되지 않아야 한다.
<article>는 페이지의 나머지 부분 없이 단독으로 의미가 있는 관련 콘텐츠 블록(예: 단일 블로그 게시물)을 둘러싸는 요소.
<section>은 <section>와 비슷하지만 페이지에서 하나의 기능을 구성하는 단일 부분(예: 미니 지도, 글 헤드라인 및 요약 모음) 또는 테마를 함께 그룹화하는 데 더 적합하다. 각 섹션은 제목으로 시작하는 것이 가장 좋으며, 문맥에 따라 <section>를 여러 <section>으로 나누거나 <section>을 다른 <article>로 나눌 수도 있다.
<aside>에는 주요 콘텐츠와 직접 관련이 없지만 간접적으로 관련된 추가 정보(glossary entries, author biography, related links, etc.)를 제공할 수 있는 콘텐츠가 포함된다.
<header>는 소개 콘텐츠 그룹을 나타낸다. <body>의 하위 항목인 경우 웹페이지의 전체 헤더를 정의하지만, <article> 또는 <section>의 하위 항목인 경우 해당 섹션의 특정 헤더를 정의한다(제목 및 제목과 혼동하지 않도록 주의).
<nav>에는 페이지의 기본 탐색 기능이 포함된다. 보조 링크 등은 탐색에 포함되지 않는다.
<footer>는 페이지의 최종 콘텐츠 그룹을 나타낸다.

Non-semantic wrappers

일부 항목을 그룹화하거나 일부 콘텐츠를 래핑할 때 이상적인 semantic element를 찾을 수 없는 상황에 직면할 때가 있다. 때로는 set of elements을 함께 그룹화하여 일부 CSS 또는 JavaScript를 사용하여 모든 요소에 단일 엔티티로 영향을 주고 싶을 수도 있다. 이러한 경우 HTML은 <div> 및 <span> 요소를 제공한다. 이러한 요소는 적절한 class 속성과 함께 사용하여 쉽게 타겟팅할 수 있도록 일종의 label을 제공해야 한다.

<span>은 inline non-semantic element로, 콘텐츠를 감싸는 더 나은 시맨틱 텍스트 요소를 생각할 수 없거나 특정 의미를 추가하고 싶지 않은 경우에만 사용해야 한다. 예를 들어

<p>
  왕은 01:00에 술에 취해 방으로 돌아갔고, 맥주는 아무것도 도움이되지 않았습니다.
  비틀거리며 문을 나섰습니다.
  <span class="editor-note">
    [편집자 주: 극 중 이 시점에서는 조명이 낮게 내려가야 합니다].
  </span>
</p>

이 경우 편집자 노트는 극 연출자에게 추가적인 방향을 제시하는 역할만 할 뿐 의미론적 의미를 부여해서는 안 된다. 시각 장애가 있는 사용자의 경우 CSS를 사용하여 주 텍스트와 약간 거리를 두는 것이 좋습니다.

<div class="shopping-cart">
  <h2>쇼핑카트</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>은 귀걸이</strong></a>: 10000원
      </p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
    </li>
    <li>…</li>
  </ul>
  <p>합계 : 25000원</p>
</div>

<div>는 block-level non-semantic element로, 더 나은 semantic block element를 생각할 수 없거나 특정한 의미를 추가하고 싶지 않은 경우에만 사용해야 한다. 예를 들어 페이지의 주요 콘텐츠와 반드시 관련이 없는 경우(어디서나 볼 수 있도록 하려는 경우)에는 <aside>라고 할 수 없다. 페이지의 주요 콘텐츠의 일부가 아니므로 <section>을 사용할 필요도 없다. 따라서 이 경우에는 <div>로 충분하다. 스크린 리더 사용자가 쉽게 찾을 수 있도록 이정표로 제목을 포함했다.

<aside>가 적합한 경우는?

<aside> 태그는 HTML에서 주로 부차적인 콘텐츠를 나타내기 위해 사용된다. 이 태그는 메인 콘텐츠와 간접적으로 관련된 콘텐츠를 포함한다. 예를 들어, 메인 기사와 관련된 사이드바나, 기타 부차적인 정보 및 링크가 <aside> 태그 안에 위치할 수 있다.

위 예제에서의 쇼핑 카트 위젯은 페이지의 메인 콘텐츠와 직접적으로 관련되어 있지 않다. 쇼핑 카트는 사용자가 e-commerce 사이트를 탐색하는 동안 어느 시점에서나 접근할 수 있는 도구로, 특정 페이지의 메인 콘텐츠와는 독립적이다.

또한, <aside>는 특정 섹션 또는 페이지의 메인 콘텐츠와 밀접하게 관련된 부가적인 정보를 제공하는 경우에 적합하다. 쇼핑 카트는 사이트 전체를 아우르는 기능이며, 특정 섹션 또는 페이지에 국한되지 않기 때문에 <aside>로 표시하는 것이 적절하지 않다.

따라서 위 예제에서 <div> 태그를 사용하는 것이 적절하다. <div>는 다른 의미론적 태그(<article>, <section>, <aside> 등)가 적합하지 않은 경우에 사용된다.

⚠️ div는 사용하기 매우 편리하기 때문에 너무 많이 사용하기 쉽다. 의미적 가치가 없기 때문에 HTML 코드를 복잡하게 만들 뿐이다. 더 나은 의미론적 솔루션이 없는 경우에만 사용하고, 그렇지 않으면 문서를 업데이트하고 유지 관리하는 데 어려움을 겪을 수 있으므로 사용량을 최소한으로 줄이도록 주의하자.

줄 바꿈 및 가로 규칙

가끔씩 사용하며 알고 싶은 두 가지 요소는 <br>와 <hr>이다.

<br>: 줄 바꿈 요소

<는 단락에 줄 바꿈을 생성하며, 우편 주소나 시와 같이 일련의 고정된 짧은 줄이 필요한 상황에서 엄격한 구조를 강제할 수 있는 유일한 방법이다.

요소가 없으면 단락이 한 줄로 길게 렌더링되지만(이 과정의 앞부분에서 설명했듯이 HTML은 대부분의 공백을 무시한다) 코드에 <br> 요소가 있으면 마크업이 다음과 같이 렌더링된다.

<hr>: 주제 나누기 요소

<hr> 요소는 문서에서 텍스트의 주제 변경(예: 주제 또는 장면의 변경)을 나타내는 가로 규칙을 만든다. 시각적으로는 수평선처럼 보인다.

간단한 웹사이트 계획하기

간단한 웹페이지의 구조를 계획했다면 다음 단계는 전체 웹사이트에 어떤 콘텐츠를 넣을지, 어떤 페이지가 필요한지, 최상의 사용자 경험을 위해 이러한 페이지를 어떻게 배열하고 서로 연결해야 하는지 고민해야 한다. 이를 Information architecture (opens in a new tab)라고 한다.

크고 복잡한 웹사이트에서는 이 과정에 많은 계획이 들어갈 수 있지만, 몇 페이지로 구성된 간단한 웹사이트에서는 이 과정이 매우 간단하고 재미있을 수 있다.

탐색 메뉴, 바닥글 콘텐츠 등 대부분의 페이지에 공통적으로 적용되는 몇 가지 요소가 있다는 점을 염두에 둔다. 예를 들어 비즈니스용 사이트인 경우 각 페이지의 바닥글에 연락처 정보를 제공하는 것이 좋다.
그런 다음 각 페이지의 구조를 대략적으로 스케치한다. 각 블록이 어떻게 구성될지 메모한다.
이제 웹사이트에 포함시키고 싶은 다른 모든 콘텐츠(모든 페이지에 공통적으로 포함되지는 않음)를 브레인스토밍하여 큰 목록을 작성한다.
다음으로, 이러한 모든 콘텐츠 항목을 그룹으로 정렬하여 어떤 부분이 다른 페이지에 함께 배치될 수 있는지 파악한다. 이것은 Card Sorting (opens in a new tab)이라는 기법과 매우 유사하다.
이제 대략적인 사이트맵을 스케치하자. 사이트의 각 페이지에 풍선을 넣고 페이지 사이의 일반적인 워크플로우를 표시하는 선을 그린다. 홈페이지는 중앙에 배치하고 다른 모든 페이지는 아니더라도 대부분의 페이지로 연결되는 것이 좋으며, 소규모 사이트의 경우 예외가 있기는 하지만 대부분의 페이지는 기본 탐색에서 액세스할 수 있어야 한다. 또한 콘텐츠가 표시되는 방식에 대한 메모를 포함할 수도 있다.

고급 텍스트 서식 지정 HTML 디버깅