HTML 구조요소

개요

이 강좌는 <div> 와 같은 기존 요소에서부터 HTML5에 새로 추가된 <article><aside> 요소까지 내용의 구조와 그룹에 사용되는 요소들을 다룬다.

소개

지금까지 문서 <head> 내부에 포함되는 HTML의 매우 기초적인 내용과, <body> 내부의 내용 중 다른 항목을 구성하는 가장 일반적인 블록요소를 알아보았다. 이제 HTML 내용의 전체 구조를 살펴보면 페이지가 어떤 섹션으로 구분되는지 알게 된다.

전형적인 페이지 구조

진도를 더 나가기 전에, 당신이 즐겨 찾는 5~10개의 웹 사이트를 방문하여 살펴보자. 그것들은 상당히 다른 내용, 기능, 디자인 및 느낌을 가지고 있지만, 모두 공통되는 요소들을 가지고 있을 것이다. 적어도 다음의 패턴을 따르지 않는 사이트는 거의 없을 것이다:

  • Header (or Masthead): 보통 페이지에서 최고 수준의 제목과 회사 로고를 포함한다. 이것은 페이지 상단에 크고 굵게 표시되며, 어떤 웹 사이트 이고, 누구에게 귀속되어 있는지를 나타낸다.
  • Main content: 사용할 기능의 주 내용을 수록한다.
  • Sidebar: 페이지의 지엽적인 내용을 수록한다. 이것은 주 내용과 관련이 있다. 새 페이지가 로드 될 때 변경되는 내용(예: 관련 링크)이거나 또는 전체사이트와 관련이 있고 변경되지 않는 내용(예: 전자상거래 사이트의 “너의 바구니” 정보)이다.
  • Navigation menu: 전체 페이지 또는 한 열 내의 페이지를 검색한다. 이것은 종종 사이드 바나 헤더의 일부로 구성되기도 한다.
  • Footer: 사이트 아래쪽에 위치한다. 저작권 정보와 연락처 등의 보조 정보가 포함된다.

특정 예를 가지고 이것을 시각화해 보자. Conquest of Steel (Chris Mills’ band!)의 웹 사이트 아래와 같다:

htmlstructure1.jpg

그림 1: 전형적인 웹 사이트 예.

이것을 논의했던 섹션으로 구분할 수 있다, 다음과 같다:

htmlstructure2.jpg

그림 2: 사이트 예, 다른 섹션들이 겹쳐있다.

이 섹션들은 더 많은 수의 다른 중첩 요소들을 포함할 수 있다. 예를 들면, footer는 전체 링크 목록, 몇 개의 단락 및 이미지 등을 포함할 수 있다. 하지만 이런 다른 섹션들을 어떻게 마크업해서, 나중에 CSS를 사용하여 배치하기 위해 단일 엔티티로 그룹화할 수 있을까요? 다음 섹션에서 살펴보자.

HTML 4를 사용한 페이지 구성

HTML4 는 일반적인 2개의 콘테이너 요소가 포함되어 있다.:

  • <div>는 블록 레벨 내용의 섹션들을 그룹화 하는데 사용하는 블록 레벨 컨테이너이다.
  • <span>은 인라인 내용의 섹션들을 그룹화 하는데 사용하는 인라인 컨테이너이다.

<div><span> 요소들은 고유한 내용이나 크기가 정해져 있지 않다. CSS로 스타일을 정의하거나,
자바스크립트로 조작할 때까지 자신들의 내용 만을 가지고 있다. 또한 의미를 가지고 있지도 않다. 이것들을 식별하기 위한 유일한 방법은 class 또는 id 속성을 부여하는 것이다.

내용을 마크업하기 위해 사용할 수 있는 더 적절하고 의미를 부여하는 요소가 없는 경우에만, 이 요소들을 사용해야 한다.
단락과 제목을 모두 <div>들로 마크업하는 것은 끔찍한 일이다. 외관상 문제가 없어 보일지라도,
스크린리더를 사용하는 사람들은 페이지에 접근할 수 없다(스크린리더가 검색하기 위해서는 제대로 된 제목 구조가 필요하다). 더불어 코드가 더 부풀려지고, 읽기 어렵고, CSS로 스타일을 정의하는데 비효율적이다.
가능하면 <div><span>의 사용 횟수를 줄여라. 이 요소들을 남용하면, 이것을 “divits(의미가 있는 HTML 요소 대신 많은 <div>로 웹 페이지를 생성하는 방법)”이라 한다.

그래서, 예제 사이트를 마크업하기 위해 다음 요소들을 사용할 수 있다:

htmlstructure3.jpg

그림 3: 예제 사이트, HTML4의 적절한 요소들을 가지고 구조적으로 다른 주요 섹션들을 나타냈다.

마크업은 다음과 같을 것이다:

정말 간단하다. 물론, HTML에 CSS를 적용할 때까지 적절하게 배치되지 않을 것이다: 다음에 이 과정에서 더 학습할 것이다. 그러나 당신이 원하는 대로 사이트를 배치하는데 필요한 구조적 무결성을 제공하지 않는다.

HTML5의 구조적 요소 입력

The HTML4로 작성하는 것도 모두 괜찮지만 의미론적으로는 다음이 더 좋을 수 있다:

  • 사람은 다른 내용을 구분할 수 있지만 기계는 구분할 수 없다 — 브라우저는 다른 div들을 머리글, 바닥글 등으로 인식하지 못하고, 다른 div들로만 인식한다.
    브라우저와 스크린리더가 이를 분명히 구분할 수 있다면 더 유용하지 않겠는가? 즉, 시각장애인이 탐색 메뉴 또는 블로그에 있는 다른 뉴스 항목들을 더 쉽게 찾을 수 있다면, 별도 프램그래밍 없이 RSS 피드로 쉽게 배포할 수 있을 것이다.
  • 당신은 이런 문제들을 해결하고자 추가 코드를 사용할 경우에도, 여전히 귀하의 웹 사이트가 안정적으로 작동하도록 사용한다.
    왜냐하며 웹 개발자마다 다른 class와 ID 이름을 사용하기 때문이다.특히 전세계 잠재고객을 고려할 때 – 다른 국가의 다른 웹 개발자들은 class와 ID 이름에 다른 언어를 사용할 것이다.

따라서 많은 웹 사이트에서 볼 수 있는 일반적인 구조 블록 요소들을 모든 사람들이 같은 요소들로 정의하도록 한다면 매우 의미가 있을 것이다. 이것이 HTML5 에 정확히 정의되어 있다.

이 문서에서 다룰 새로운 HTML 요소는 다음과 같다:

  • <header>: 사이트의 머리글 내용을 포함하는데 사용한다.
  • <footer>: 사이트의 바닥글을 포함한다.
  • <nav>: 탐색 메뉴 또는 페이지에 대한 다른 탐색 기능을 포함한다.
  • <article>: RSS 항목으로 배포될 때 의미가 있는 독립적인 내용을 포함한다. (예; 뉴스 항목)
  • <section>: 다른 기사들을 목적이나 주제에 따라 그룹화하거나, 또는 한 기사로 구성된 별도의 섹션을 정의하는데 사용한다.
  • <aside>: 본문 중앙이 아닌 주변에 배치되고 본문 내용과 관련이 있는 블록이 설정된 내용이다.

자세한 내용은 다음에 더 자세히 논의하고, 지금은 HTML5의 구조를 살펴보자:

htmlstructure4.jpg

그림 4: 예제 사이트,해당 HTML 요소로 표시된 주요 구조 섹션.

코드는 다음과 같다:

일부 HTML5 요소를 더 자세히 알아보자.

<section>

<section> 요소는 기능 또는 주제별로 다른 구역을 설정하거나, 기사나 이야기를 다른 섹션으로 분리한다. 위 그림에서:

  • “sidebar1″은 사이트의 모든 페이지에 적용되는 다양한 링크를 포함한다 (예: “RSS 구독” 및 “스토어에서 음악 구매”.
  • “main”은 페이지의 본문이 포함된다. 이것은 블로그의 글이다. 다른 페이지에서는 본문 내용이 변경된다.

매우 일반적인 요소이지만, 평범한 구식 <div>보다 더 의미가 내포된 요소이다.

<article>

<article><section>과 관련이 있지만 분명하게 다르다. <section>은 내용 및 기능에 따라 섹션을 분명하게 그룹핑한다.
반면 <article>은 개별적인 독립된 내용이다 (예: 개별 블로그 게시물, 비디오. 이미지 , 뉴스 항목). 이렇게 생각해라 – 많은 항목의 내용이 있고,
각각은 개별적으로 읽을 수 있고, RSS 피드에 별도의 항목으로 배포된다는 의미이다. 그러면, <article>은 마크업하기에 적절해진다.

이 예에서, <section id="main">은 블로그 항목을 포함한다.
각 블로그 항목은 RSS 피드 항목으로 배포하기에 적절하다. 문법적으로 이 자체를 읽을 때 의미가 있다. 그러므로<article>는 본문에 완벽하게 사용할 수 있다:

간단하지요? 하지만 기사들 안에 섹션이 중첩될 수 있다는 사실을 인식해라. 그렇게 하는 것이 합리적이다. 예를 들어, 이 블로그 게시물 각각이 별도의 섹션을 가지는 일관된 구조를 가진다면,
마찬가지로 기사 안에 섹션을 배치할 수 있다. 그것은 다음과 같을 수 있다:

<header> and <footer>

우리가 이미 위에서 언급 한 바와 같이, <header><footer> 요소의 목적은 각각 머리글과 바닥글 내용을 감싸는 것이다.
예제에서 <header> 요소는 로고 이미지를 포함하고 <footer> 요소는 저작권 고지사항을 포함하고 있다. 당신이 원하면 더 정교한 내용을 추가할 수 있다.
또한 하나 이상의 머리글과 바닥글을 각 페이지에 배치할 수 있다 – 뿐만 아니라 우리가 논의한 최상위 머리글 및 바닥글과 같이, 각 <article> 내부에 중첩 <header><footer> 요소를 가질 수 있다.
이 경우는 특정 기사에 적용된다. 위의 예에 추가하면:

<nav>

<nav> 요소는 탐색 링크 또는 다른 구성체 (예 : 검색 양식) 마크 업입니다.현재 사이트의 다른 페이지, 현재 페이지의 다른 영역으로 이동한다.
스폰서 링크와 같은 다른 링크는 포함되지 않는다. 물론 <nav>내부에 제목과 다른 구조 요소를 포함할 수 있지만 필수사항은 아니다.

<aside>

<aside> 요소는 두 번째 sidebar를 마크업한다: 최신 공연과 연락처 정보를 포함한다: 매우 적절한 정보이다.<aside>는 주요 흐름과 관련된 정보를 마크업한다.
직접 관련이 되지는 않는다. 이 사례에서 주 내용은 밴드에 관한 모든 사항이다.
<aside>에 적절한 다른 정보로는 블로그 게시물 저자, 밴드 약력 및 밴드 구매와 링크된 밴드 음악 목록 등이 있다.

<div>는 어디에 사용하나?

새로운 요소들이 우리 페이지에 사용됨에 따라 겸손한 <div>의 시대는 확실히 사라진 것인가? 아니다. 사실, <div>는 아직 완벽하게 사용된다.
내용의 영역을 그룹핑하기에 적절한 요소가 없을 때 사용한다. 순전히 스타일/시각적 목적으로 내용을 함께 그룹핑하기 위해 요소를 사용할 때가 있다. 일반적인 예는 <div>를 사용하여 모든 내용을 깜싸고,
CSS를 사용하여 브라우저 창에서 모든 내용을 중앙에 배치하거나 또는 전체 내용에 특정 배경 이미지를 적용한다.

HTML5 요소 지원

좋다, 그럼 이 시점에서 무엇인가를 인정해야 한다. 웹 브라우저에서 HTML5 구조 요소에 대한 지원이 현재 많지 않다.
그러나 “그는 왜 이와같은 쓰레기를 가지고 시간을 낭비했을까?” 라는 비명의 언덕에 뛰어들기 전에 그냥 앉아서 무슨 말을 해야 하는지를 듣는다.
그렇다, 브라우저들에서 이 기능들에 대한 지원이 없다는 사실은 이상적이지는 않지만, 정말로 목적 달성을 위해서는 중요한 사항이 아니다.

일반적으로 HTML4와 HTML5에서 요소가 작동하는 방법은 정확히 동일하다 – 다른 요소의 이름일 뿐이다. 위에서 보았듯이, HTML5 구조를 HTML4로 변환하는 것은 쉽다:
HTML 요소들을 스타일링을 위해 쉽게 식별할 수 있도록 적절한 ID를 가진 <div>들로 교체만 하면 된다.

그리고 오늘날 최소한의 노력으로 모든 브라우저에서 HTML5를 작동시킬 수 있다:

우선, 브라우저가 인식할 수 없는 웹 페이지에 요소를 삽입한다면, 기본으로 브라우저는 이 요소를 <span>과 같이 취급한다. 즉, 익명의 인라인 요소이다.
이 문서에서 살펴보았듯이 대부분의 HTML 요소들은 블록 요소 처럼 행동해야 한다. 그러므로 구 버전의 브라우저에서 작동하게 하는 가장 쉬운 방법은 그것들이 보여질 수 있게 CSS에 display:block;을 셋팅하는 것이다:
CSS 최상단에 다음 규칙을 삽입한다. HTML 파일 head 또는 외부 CSS 파일에 이것이 포함되었는지의 여부이다.

이 방법으로 하나를 제외한 모든 브라우저에서 문제가 해결된다. Internet Explorer 구 버전은 알 수 없는 요소의 스타일을 하지 않는다.
하지만 이것은 다음과 같이 각 요소를 위해 문서의 head에 자바스크립트 라인을 삽입하면 해결이 된다:

이제 IE는 이 요소들에 마법 같이 스타일이 적용한다. CSS가 작동하도록 자바스크립트를 사용하는 것은 고통스러운 일이다. 그러나, 적어도 앞으로 나갈 방법은 있는 것이다.
왜 이것이 정확하게 작동할 수 있나? 또한 IE에서 HTML 문서를 인쇄할 때 프린터가 실행되지 않는 CSS 스타일의 문제가 여전히 있다.
이 프린터 문제는 HTML5 Shiv 자바스크립트 라이브러리를 사용하면 해결할 수 있다.
이것은 document.createElement 라인을 추가하여 처리한다. IE9 이하 버전을 위해 Conditional comments로 감싸야 한다,
그러면 현대적인 브라우저에서는 자바스크립트를 실행할 필요가 없다.

이 내용을 지금 이해하지 못한다고 걱정하지 말라 – 웹 표준 교과 과정이 진행됨에 따라 점점 명확해질 것이다.

그러면, 어떤 것을 선택해야 하나?

이제 어떤 구조 요소를 선택해야 할 지 궁금할 것이다. 두 가지 옵션을 공부했다. 두 가지를 공부하고, 당신이 할 수 있는 곳에서 HTML5를 사용하라고 충고한다. 자바스크립트 지원이 되는 사이트 잠재고객이 걱정된다면 프로젝트를 위해 HTML4를 사용한다.
(예: 왜냐하면 지침이 HTML4를 지정하거나, 또는 HTML5에서 작동하지 않는 컨텐츠 관리 시스템을 사용하고 있다).

이 방법으로, 당신은 어떤 다른 프로젝트를 가지고도 일을 할 수 있다. 또한 브라우저가 HTBL5 구조 요소를 지원하기 시작할 때, 당신의 HTML5 사이트는 더 나은 미래를 보장받게 될 것이다.

참고 사항

연습 문제

  1. 내 템플릿을 기준으로, 다음 사이트 중 하나의 HTML 구조의 개요를 만들어라. 그 페이지들이 header, footer, navigation, main content, sidebars 등을 기준으로 어떤 것들을 가질 수 있는 지 생각해봐라. 필요하다면, 기존 예제들을 보아라.
  • 전자 상거래 사이트의 제품 정보 페이지 (예: 이용 가능한 다른 제품 요약 목록)
  • 레스토랑 메뉴 페이지
  • 뉴스 사이트의 전체 페이지 (예: 전체에 표시된 하나의 뉴스 스토리)
  1. 한 기사 안에 있는 블로그 게시물의 header와 footer에 어떤 내용을 배치하는 것이 적절한가?
  2. 자바스크립트가 꺼져 있다면, 본문 내용 열에 어떤 요소를 사용해야 하는가?

답글 남기기