7. 표현을 기준으로 이름 지어진 태그들은 더 이상 사용하지 않습니다
<b> 굵은 글씨
<i> 이탤릭체
<big> 큰 글씨
<small> 작은 글씨
<blink> 깜빡임
<s> 가로줄
<tt> 타이프체
<u> 밑줄
<center> 중앙 정렬
<nobr> 줄바꿈 안함
<font> 글씨 모양
<marquee> 흐르는 글씨
8. 컨텐츠가 가진 의미를 나타내는 태그들을 가능한 지켜 사용합니다
<strong> 강한 강조
<em> 강조
<p> 문단
<q> 짧은 인용
<cite> 작품 제목
<del> 삭제된 내용
<samp> 시스템 출력
<code> 개발 코드
<ins> 추가된 내용
<address> 주소
<blockquote> 인용문
<abbr> 약자표기
10. 책의 목차는 책의 ‘정보구조’를 담고 있습니다
목차를 보면, 전체 내용이 어떻게 구성 되어있는지를 한 눈에 알 수 있습니다
11. 웹 페이지에서는 헤딩이 목차와 같은 역할을 합니다.
헤딩들을 모아보면 웹 페이지의 내용이 어떤 흐름을 가지고 있는지 한 눈에
알 수 있습니다.
<h1>네이버</h1>
<h2>뉴스스탠드</h2>
<h3>구독목록</h3>
<h3>전체언론사</h3>
<h2>로그인</h2>
<h2>타임스퀘어</h2>
<h2>주제형캐스트</h2>
<h2>홈 유형 선택</h2>
<h2>네이버 설정</h2>
<h2>패밀리 사이트</h2>
12. 헤딩이 잘못 제공되면
사용자에게 잘못된 정보구조를
전달하게 됩니다.
그렇기 때문에, 헤딩은 정보구조를 반영하여 올바른 순서로 작성되어야 합니다.
<h1>네이버</h1>
<h4>로그인</h4>
<h2>안내 팝업</h2>
<h4>확인</h4>
<h3>네이버 설정</h3>
<h2>패밀리 사이트</h2>
<h3>다음 페이지</h3>
…
만약 헤딩이 잘못 되었다면?
29. HTML4 웹 페이지에서는 헤딩이 목차와 같은 역할을 합니다.
하지만, HTML5에서는
섹션이 만드는 구역과 헤딩이 조합하여 아웃라인을 만들고,
이 아웃라인이 목차의 역할을 합니다.
<h1>네이버</h1>
<h2>뉴스스탠드</h2>
<h3>구독목록</h3>
<h3>전체언론사</h3>
<h2>로그인</h2>
<h2>타임스퀘어</h2>
<h2>주제형캐스트</h2>
<h2>홈 유형 선택</h2>
<h2>네이버 설정</h2>
<h2>패밀리 사이트</h2>
41. <h1>예제</h1>
<section>
<h2>멋진 섹션</h2>
</section>
<article>
<h2>아주 좋은 글</h2>
</article>
<section>
여긴 헤딩이 없어요
</section>
HTML 마크업
문서의 아웃라인
1. 예제 1. 멋진 섹션 2. 아주 좋은 글
3. Untitled Section
각 섹션요소는 헤딩에 의해 이름이 지어집니다.
이름이 없을 경우 Untitled Section(무제) 섹션이 됩니다.
43. <h1>책 팝니다</h1>
<section>
<h1>중고 책</h1>
<h2>HTML 공부하기</h2>
<h2>CSS 공부하기</h2>
<h2>연애, 할 수 있다!</h2>
</section>
HTML 마크업
문서의 아웃라인
1. 책 팝니다 1. 중고 책 1. HTML 공부하기
2. CSS 공부하기
3. 연애, 할 수 있다!
한 섹션 안에 헤딩이 여러 개일 때는, 헤딩이 섹션을 만듭니다.
첫번째 헤딩은 섹션의 헤딩이 되고…
나머지는 섹션을 만들어요.
44. <h1>책 팝니다</h1>
<section>
<h1>중고 책</h1>
<h2>HTML 공부하기</h2>
<h2>CSS 공부하기</h2>
<h2>연애, 할 수 있다!</h2>
</section>
HTML 마크업
문서의 아웃라인
1. 책 팝니다 1. 중고 책 1. HTML 공부하기
2. CSS 공부하기
3. 연애, 할 수 있다!
HTML5 문서에서는 새로운 섹션에서 h1 부터 다시 카운팅을 시작해도 됩니다
46. HTML 마크업
문서의 아웃라인
<section>
<h1>중고 책</h1>
<h2>HTML 공부하기</h2>
<h2>CSS 공부하기</h2>
<h2>연애, 할 수 있다!</h2>
</section>
47. <!-- <h1>헤딩이 없네?</h1> -->
<section>
<h1>중고 책</h1>
<h2>HTML 공부하기</h2>
<h2>CSS 공부하기</h2>
<h2>연애, 할 수 있다!</h2>
</section>
HTML 마크업
문서의 아웃라인
1. Untitled Section 1. 중고 책 1. HTML 공부하기
2. CSS 공부하기
3. 연애, 할 수 있다!
body는 섹셔닝 루츠이기 때문에 헤딩이 없으면 문서의 제목이 없는 무제 문서가 됩니다.
49. <h1>물건 팝니다</h1>
<h2>쓰던 물건</h2>
<article>
<h3>볼 펜</h3>
<p>아주 잘 나와요</p>
</article>
<article>
<h3>지갑</h3>
<p>중후한 멋이 있어요</p>
</article>
<article>
<h3>신발</h3>
<p>냄새 안나고 깨끗합니다</p>
</article>
HTML 마크업
문서의 아웃라인
50. <h1>물건 팝니다</h1>
<h2>쓰던 물건</h2>
<article>
<h3>볼 펜</h3>
<p>아주 잘 나와요</p>
</article>
<article>
<h3>지갑</h3>
<p>중후한 멋이 있어요</p>
</article>
<article>
<h3>신발</h3>
<p>냄새 안나고 깨끗합니다</p>
</article>
HTML 마크업
문서의 아웃라인
1. 물건 팝니다 1. 쓰던 물건 1. 볼 펜
2. 지갑
3. 신발
이런 아웃라인이 만들어 질까요?
51. <h1>물건 팝니다</h1>
<h2>쓰던 물건</h2>
<article>
<h3>볼 펜</h3>
<p>아주 잘 나와요</p>
</article>
<article>
<h3>지갑</h3>
<p>중후한 멋이 있어요</p>
</article>
<article>
<h3>신발</h3>
<p>냄새 안나고 깨끗합니다</p>
</article>
HTML 마크업
문서의 아웃라인
1. 물건 팝니다 1. 쓰던 물건 2. 볼 펜
3. 지갑
4. 신발
h2와 article이 형제가 되면서 같은 단계에 위치하는 아웃라인이 만들어집니다
h1은 body 섹션의 첫번째 헤딩이라서…
53. <h1>책 팝니다</h1>
<blockquote>
<h1>중고 책</h1>
<h2>HTML 공부하기</h2>
<h2>CSS 공부하기</h2>
<h2>연애, 할 수 있다!</h2>
</blockquote>
HTML 마크업
문서의 아웃라인
body, blockquote
details, fieldset, figure, td
섹셔닝 루츠
54. <h1>책 팝니다</h1>
<blockquote>
<h1>중고 책</h1>
<h2>HTML 공부하기</h2>
<h2>CSS 공부하기</h2>
<h2>연애, 할 수 있다!</h2>
</blockquote>
HTML 마크업
문서의 아웃라인
1. 책 팝니다
섹셔닝 루츠(body)안에 또 다른 섹셔닝 루츠가 있으면 그 안의 내용은 아웃라인에 포함시키지 않습니다.
없는셈 치자구요…
안녕하세요. ‘시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?’ 라는 주제로 발표를 맡게된 윤원진입니다.
발표를 시작하기 전에 먼저 살짝 말씀드리면,
이 발표는 HTML5 Outline을 설명하는 발표입니다.
아마 이렇게만 말씀드리면 이제 제가 설명할 내용이 뭔지 다 아시는 분들도 계실겁니다.
발표 제목은 여러분의 흥미를 끌기 위해 뭔가 있어보이는 말로 지었지만,
사실 ‘HTML5 Outline’이라고 제목을 붙였으면 딱 적당했을거에요.
하지만 제가 거짓말을 한건 아닙니다.
HTML5 Outline은 시맨틱, 마크업 구조설계와 관계가 있으니까요.
그리고 제가 발표중에 태그, 요소, 엘리먼트라는 말을 자주 쓸건데요.
다 같은 뜻이라고 생각하시면 됩니다.
엄밀히 따지면 뜻이 다를 수도 있는데, 저는 뭐가 다른지 모르겠어요.
그래도 맥락에 따라서 태그라고 하면 이해가 더 잘 될 때가 있고,
어떤 때는 요소라고 하는게 자연스러울 때도 있어서 막 섞어서 씁니다.
제가 이런 단어를 쓰면, 아 html 태그 말하는거구나 라고 생각하시면 되겠습니다.
그럼 발표를 시작하도록 하겠습니다.
먼저 시맨틱이 뭔지 살짝 짚고 넘어가보도록 할께요.
영어단어니까. 사전을 찾아보죠.
저는 영어를 잘 못해서 영어사전 서비스를 자주 이용하는데요.
시맨틱을 검색하면 화면처럼 ‘의미론적인’ 이라는 결과가 나옵니다.
사실 시맨틱은… 웹표준이에요.
의미에 맞는 태그를 사용하자. 이게 웹표준 아닌가요?
웹접근성, SEO도 마찬가지지요.
의미에 맞게 마크업하면 접근성이 향상되고, 검색결과 최적화가 자연스럽게 되니까요.
예를 들면, 이전에 많이 사용했던 b 태그 같은 경우를 들 수 있겠지요.
b는 bold라는 의미를 담고 있지만, 웹표준이 강조되면서 이제는 strong 태그로 바꿔서 사용합니다.
표현보다는 의미에 집중한 마크업을 하는 것이지요.
이러한 표현과 의미의 분리가 웹표준의 핵심입니다.
그래서 화면에 보이는 것 처럼…
굵은 글씨를 위해 쓰는 b 태그, 이탤릭체를 쓰는 i 태그,
큰 글씨를 쓰는 big 태그,
작은 글씨를 쓰는 small 태그,
중앙 정렬을 하는 center 태그…
이런 태그들은 사용하지 않습니다.
이 태그들은 의미가 아닌 표현에 집중해서 만들어진 태그들이니까요.
대신 이런 태그들을 더 사용하지요.
b 태그 대신 strong 태그,
i 태그 대신 em 태그,
예전엔 s, strike 태그를 사용해서 가로줄을 쳤지만, 대신 삭제되었다는 의미를 담은 del 태그를 쓰고…
그리고 주소를 쓸 때는 이게 주소다. 라는 의미를 담은 address 태그…
이렇게 마크업에 의미를 담아가면서 더 시맨틱하게 만들려는 노력들이 있었기 때문에, 시각장애인들이 테이블로 얽힌 웹에서 벗어나서 스크린리더로 웹을 사용할 수 있는 세상이 오게 되었습니다.
웹표준이 지금까지도 정착되지 못했다면 스크린리더를 사용할 때 스크린리더가 계속 테이블만 읽어주겠지요?
여러분이 웹을 시맨틱하게 만들기 위해 노력하는 것은 확실히 그럴만한 가치가 있는 일입니다.
자, 다음으로 넘어가보겠습니다.
어떤 책이든 첫 장을 넘기면, 다음에 이러한 목차가 나옵니다.
책의 목차는, 책의 전체 내용이 어떻게 구성 되어있는지를 한 눈에 알 수 있게 해줍니다.
다시 말하면, 책의 목차는 책에 대한 ‘정보구조’를 담고 있다고 할 수 있습니다.
웹 페이지에도 이런 정보구조를 담고 있는 요소가 있습니다.
바로 헤딩인데요. 여러분이 헤딩을 잘 지켜서 사용하면, 웹 페이지도 잘 정리된 정보구조를 갖게 됩니다.
웹 페이지에서는 헤딩이 목차와 같은 역할을 합니다.
어떤 웹페이지를 보고 목차를 작성하려면, 헤딩을 보면 되겠지요.
헤딩들을 보면 내용과 구조를 알 수 있으니까요.
그런데 헤딩이 잘못되었다면 어떨까요?
그러면 결국 사용자에게 잘못된 정보구조를 전달하는 셈이 됩니다.
그렇기 때문에, 헤딩은 정보구조를 반영하여 올바른 순서로 작성되어야 합니다.
그런데 안타깝게도 웹표준이 정착된 지금까지도 이렇게 헤딩을 잘 지켜서 사용한 사이트를 찾기가 쉽지 않습니다.
많은 사이트가 헤딩이 엉망이에요.
헤딩이 정보구조를 담고 있다면, 잘못된 헤딩을 사용하는 웹 페이지는 잘못된 정보구조를 전달하는 것이지요.
여러분이 시맨틱을 생각 할 때 가장 주의하셔야 할 것이 이 부분입니다.
정확한 의미를 전달하기 위해 시맨틱 마크업을 하는 것인데, 의미를 잘못 전달하면 전달하지 않느니만 못하게 되기 때문입니다.
제가 화면에 호랑이 이미지를 띄워놓았는데요.
만약에 이 이미지에 대체텍스트를 ‘코끼리’라고 붙이면 어떻게 될까요?
여러분은 호랑이를 보겠지만, 시각장애인분들은 스크린리더가 ‘코끼리’라고 읽어주겠지요.
많은 의미를 담는 것도 중요하지만, 그 보다 더 중요한 것은 정확한 의미를 담는 것입니다.
자, 지금까지 제가 얘기한 내용들은 HTML4까지의 내용입니다.
HTML4에서는 헤딩이 목차의 역할을 합니다.
하지만 HTML5에서는 바뀌었어요.
뭐가 바뀌었는지 같이 살펴보도록 하겠습니다.
HTML5가 나오면서 새로운 의미를 담은 시맨틱 태그들이 많이 추가가 되었습니다.
새로 추가된 header, footer, section, article, aside... 여러분들은 이런 태그들 잘 사용하고 계신가요?
HTML5의 시맨틱 태그들은 각각 다른 의미와 다른 용도를 가지고 있기 때문에, 잘 따져 가면서 사용을 해야 합니다.
근데 새로 써보는 것이다 보니 내가 맞게 사용하는 것인지 많이 어려워들 하세요.
제가 화면에 띄워놓은건 HTML5 Doctor 라는 사이트에서 배포한 HTML5 마크업 플로우차트인데요.
국내에선 윤석찬님께서 번역을 해주셔서 한글판으로 볼 수 있습니다.
이 플로우차트를 따라서 마크업을 한다면요.
내가 지금 마크업하려는 내용이 메뉴영역인가? 그렇다면 nav를 쓰고,
아니면 플로우 차트를 따라 다음으로 넘어갑니다.
독립적인 콘텐츠인가? 그러면 article을 쓰고,
아니면 또 넘어갑니다.
주요 컨텐츠가 아니고 부수적인 건가? 그렇다면 aside를 쓰고,
아니면 또 넘어가고… 이렇게 반복하는거지요.
그래서 작업을 제대로 하고 싶어하시는 분들은 이런 도움말 플로우차트 를 펴놓고, ‘이 가이드를 잘 따라서 했으니 잘 맞게 했을거야’라고 생각을 하십니다.
그러면 다 된걸까요? 충분할까요?
굉장히 안타깝지만… 아니요. 이걸로는 충분하지 않아요.
여전히 여러분은 잘못된 HTML5 마크업을 만들고 있을 수 있습니다. 그럼, 뭐가 문제일까요?
네. HTML5를 사용하려면 새로 바뀐 내용들을 잘 알고 있어야 합니다.
HTML5 명세에서는 섹셔닝 엘리먼트가 Outline을 만든다고 적혀있습니다.
영어로 되어있으니까 당황스럽죠? 괜찮습니다. 저도 볼 때 마다 당황스러워요.
근데. 이걸 얘기하려면 먼저 섹셔닝 요소가 뭔지부터 알아야 할 것 같아요.
그래서 섹셔닝 요소란게 무슨 말인지 설명을 하고 넘어가도록 하겠습니다.
이걸 알려면 HTML5 컨텐츠 모델이라는 개념을 이해해야하는데요.
HTML5에는 4에 없던 컨텐츠 모델이란 개념이 생겼습니다.
상식을 넓힌다 생각하고 알아두시면 좋을 것 같습니다.
여러가지 HTML 요소들(태그들)을 각각 성격에 따라 카테고리 분류를 만든거에요.
Metadata, Flow, Sectioning, Heading, Phrasing, Embedded, Interactive로 나누어 구분합니다.
하나씩 자세히 살펴보면요.
메타데이터는 문서에 대한 다양한 정보들을 설정하는 요소들입니다.
base, link, meta, noscript, script, style, title 같은 태그들이 이에 해당하구요.
플로우는 body 내에 있는 대부분의 요소를 통칭해서 flow라고 합니다.
메타 데이터 일부를 제외하고 거의 대부분의 요소가 flow에 포함됩니다.
헤딩은 각 섹션의 제목을 정의합니다.
H1~H6 태그가 이에 해당하구요.
hgroup은 최근에 명세에서 빠졌습니다.
섹션 요소 안에 헤딩이 여러 개인 경우 Heading이 섹션을 만든다. 이 부분은 뒤에 또 설명을 하겠습니다.
섹셔닝은 문서의 내용을 분류하는 구역을 생성하는 태그들입니다.
우리가 알아보려고 했던 ‘섹셔닝 요소’라는게 바로 요놈들입니다.
Article, aside, nav, section 딱 이렇게 4개 태그만 해당이 됩니다.
프레이징은 문단을 구성하는 요소들을 모아놓은 거구요.
임베디드는 문서에 그래픽이나 영상, 음성 등 다른 요소들을 삽입할 때 사용하는 요소들을 말합니다.
인터랙티브는 사용자와 웹사이트가 상호작용을 할 수 있게 만들어주는 a나 button, select 같은 태그들을 말합니다.
그럼 다시 돌아와서…
명세에 나와있는 것처럼 섹셔닝 요소는 Outline을 만듭니다.
이 Outline이 무슨 뜻인가 하고 살펴보면, 간단히 말해서 문서의 목차와 같은 겁니다.
HTML5에서는 4와 달라진 목차를 만드는 기준을 명세에 명확하게 정해놓았습니다.
HTML4에서는 헤딩이 목차의 역할을 하지만, HTML5에서는 아웃라인이 목차의 역할을 하는거죠.
HTML5 아웃라인은 명세에 나온대로 섹션과 헤딩의 영향을 받아 만들어집니다.
좀 더 명확히 이야기 하면 아웃라인을 만드는 요소는 3가지로 나눌 수 있습니다.
첫번째, 섹션,
두번째, 헤딩,
세번째, 섹셔닝 루츠입니다.
여러분 이거 잘 모르셨죠? 괜찮습니다. 지금부터라도 알고 제대로 하면 되니까요.
그럼 Outline이 어떻게 만들어지는지 설명을 해볼께요.
아까 봤던 섹셔닝 요소들입니다.
여기에 header, footer는 포함이 안되니 잘 기억을 해두세요.
웹사이트가 이런 구조를 가지고 있다고 해봅시다.
상하단에 헤더,푸터가 있고.
중앙에 nav, section, aside가 있네요.
Section 안에는 header, article, footer가 들어있구요.
섹션은 구역을 만든다고 했으니까. 섹션 요소들만 따로 표시를 하면 이렇게 윤곽선을 그릴 수 있습니다.
근데 아까 설명 안하고 넘어갔던 3번째 요소.
섹셔닝 루츠라는 놈들이 있지요.
이 태그들이 섹셔닝 루츠입니다.
body, blockquote, details, fieldset, figure, td
섹셔닝 루츠는 별개의 새로운 문서로 취급하기 때문에 그 하위에 있는 내용은 아웃라인에 포함시키지 않습니다
이 목록에 보면 제일 처음에 body가 있지요.
그래서 기본적으로 모든 웹페이지는 body라는 섹셔닝루츠를 가지고 시작합니다.
그래서 body에도 윤곽선을 그려주면 이렇게 되겠네요.
여러분이 보시기 편하게 가장 상위의 body 윤곽선에는 노란색,
그 안에 들어있는 섹션들에는 파란색,
또 그 안에 들어있는 요소에는 빨간색으로 표시를 해서 깊이를 색깔로 표시를 했습니다.
자 이 화면이 가지는 HTML5 아웃라인은 이렇습니다.
1번 섹션 안에, 섹션이 있고.
또 그 안에 섹션이 세개 있고, 2번 섹션안에 섹션이 있네요.
HTML5 에서는 이렇게 구조를 가지는 것만으로도 목차가 만들어집니다.
근데 섹션들이 이름이 없네요. 그죠?
그래서 각 섹션에 헤딩으로 이름을 붙여줍니다.
body 안에 우리집이라는 헤딩을 넣고,
각 섹션안에 안방,거실,창고라는 헤딩을 넣고,
거실 섹션안에 들어잇는 아티클 섹션에는 주방이라는 헤딩을 넣어주었습니다.
이렇게 헤딩 태그를 넣어놓으면 그게 섹션의 이름이 되는거지요.
이제 본격적으로 코드를 살펴보도록 하겠습니다.
제가 화면에 HTML 코드를 보여드리는데요.
예제 라는 h1 헤딩이 있고,
그 안에 섹션이 3개 있습니다.
첫번째 섹션은 멋진 섹션이라는 헤딩이 있고,
두번째 섹션은 아주 좋은 글이라는 헤딩이 있어요.
세번째 섹션은 헤딩이 없습니다.
이렇게 이름이 없는 Section 요소들은 무제(Untitled) 섹션이 됩니다.
그래서 Section요소를 사용했을 때는 반드시 그 안에 헤딩요소를 넣어주어야 합니다.
화면의 코드에,
책 팝니다 라는 h1 헤딩이 있고,
그 안에 섹션이 하나 있습니다.
섹션 안에 h1 헤딩이 하나 있고, h2 헤딩이 연달아서 3개가 나오네요.
이렇게 한 섹션 안에 헤딩이 여러 개일 때는, 헤딩이 섹션을 만듭니다.
그래서 결과적으로 이 섹션은 3개의 하위섹션을 포함한 섹션이 되었습니다.
그리고 보시면 문서상에 h1이 두개 있는걸 볼 수 있는데요.
HTML5 문서에서는 섹션 요소 안에서는 새롭게 h1 부터 헤딩을 시작 할 수 있습니다.
이건 아마 많이 들으셔서 대부분 알고 계실거에요.
화면의 코드에,
섹션이 하나있고,
그 섹션 안에는 h1 헤딩 하나와 연달아서 h2 헤딩이 3개 있습니다.
이 코드는 어떤 아웃라인을 갖게 될까요?
body는 섹셔닝 루츠이기 때문에 그 자체로 하나의 섹션이 됩니다.
그래서 body 안에 Section이 아닌 단독 헤딩이 존재하지 않으면, 문서가 제목이 없는 무제 문서가 됩니다.
근데 이 문서는 섹션 시작전에 헤딩이 없지요?
그래서 아웃라인이 Untitled Section으로 시작하는 제목이 없는 문서가 되었습니다.
이 역시 HTML5 문서를 만들 때 많은 분들이 자주 실수하는 부분 중 하나입니다.
이 예제는 어떨까요?
H1, h2가 있고, article이 3개 있습니다.
각각의 Article마다 헤딩이 있구요.
섹션요소마다 헤딩을 꼼꼼히 잘 달아놨으니 문제 없이 잘 정리된 아웃라인이 만들어 질 것 같네요.
그러면 이런 아웃라인이 만들어 질까요?
아니요. 실제로 만들어지는 아웃라인은 이렇습니다.
H2 다음에 섹션요소인 article이 이어져 나오기 때문에, article 안에 있는 헤딩이 h1 이든, h2 든, h3 이든지 관계없이 헤딩과 아티클이 같은 깊이를 가집니다.
자식으로 내려가지 않고, 형제가 되어버리는 거죠.
첫번째 헤딩인 h1은 섹션 내의 첫번째 헤딩이기 때문에 섹션의 제목이 되지만,
두번째 헤딩은 ‘하나의 섹션안에 헤딩이 여러 개 있을 경우, 헤딩이 섹션을 생성한다’라는 규칙 때문에 자신이 하나의 섹션이 되는겁니다.
이런 함정이 있을 수 있기 때문에, html5를 작업 할 때는 항상 아웃라인을 확인하고 주의해서 작업하셔야 합니다.
자, 이제 마지막 예제를 보겠습니다.
또 다른 섹셔닝 루츠인 blockquote 인데요.
인용이라는 의미를 담고 있어서, 인용문에 사용하는 태그죠.
아까 말씀드렸듯이 body, blockquote, details, fieldset, figure, td 이 태그들은 섹셔닝 루츠입니다.
그럼 blockquote를 사용해서 이렇게 헤딩들을 묶으면 어떻게 될까요?
섹셔닝 루츠(body)안에 또 다른 섹셔닝 루츠가 있으면 그 안의 내용은 아웃라인에 포함시키지 않습니다.
이 예제에서는 h1 책팝니다에 이어서 바로 다음에 나온
blockquote안에 헤딩이 여러 개 들어있지만
Blockquote는 섹셔닝 루츠이기 때문에 그 안의 내용은 이 문서의 아웃라인에선 빠지는거지요.
Body외의 섹셔닝 루츠 안에 섹션이나 헤딩이 들어가는 경우가 많이 생기지는 않지만,
이런 부분도 있다는걸 알아두셔야 outline을 완벽히 이해하셨다고 할 수 있을 것 같습니다.
지금까지 살펴보셨듯이 HTML5 아웃라인 개념이 생각보다 그렇게 쉽진 않습니다.
실수하기도 쉽구요.
하지만 다행스럽게도, 여러분들이 이 공식을 다 완전히 암기하실 필요는 없어요.
왜냐면 도와주는 도구들이 있거든요.
그래서 여러분들은 어떤 기준으로 아웃라인이 만들어지는지만 이해하신뒤에,
그 다음부터는 도구로 아웃라인을 확인하시면 작업을 하시면 됩니다.
HTML5 Outliner라는 툴이 있는데요.
검색해보시면 이런 화면의 사이트를 쉽게 찾으 실 수 있을겁니다.
디자인은 투박하지만 굉장히 유용한 사이트입니다.
HTML Validator로 검사할 때 처럼, 주소를 넣거나 소스를 붙여넣기 해서 검사를 할 수 있습니다.
이 검사 도구를 사용해서 검사를 하면 이런 화면을 볼 수 있습니다.
왼쪽은 서울시 웹사이트를 검사한 결과인데요.
국내 사이트들을 검사하면 대개 검사 결과가 엉망인데, 깔끔하게 정리가 잘 된 사례입니다.
오른쪽은 국내의 한 쇼핑몰 사이트인데요.
검사 결과가 굉장히 처참한 상태임을 볼 수 있습니다. 이런 결과가 나오지 않도록 여러분들은 신경을 잘 써주시면 좋겠네요.
크롬 웹스토어에도 HTML5 Outliner 라는 이름의 확장 프로그램이 등록되어 있는데요.
이 확장 프로그램을 설치하시면 아웃라인을 굉장히 쉽게 확인 하실 수 있습니다.
설치를 하시면 우측 상단에 아웃라인 체크 버튼이 생기는데요.
버튼을 클릭하면 아웃라인 구조를 바로 확인이 가능합니다.
작업하실 때 설치해두시고 수시로 확인하면서 작업하시면 Outline 만드실 때 실수를 하시는 일은 없으실 것 같습니다.
그럼 왜 아웃라인을 신경써야 할까요?
예전에 학창시절에 교과서에서 봤던 이야기 중에, 자기를 버리러 산을 타는 아들을 위해서 나뭇잎을 뿌린 어머니 이야기가 있었어요.
집에 돌아갈 때 길 잃어버리지 말라고 미리 뿌려놓은거지요.
미래에 사용될 가능성을 위해 작업하자라는 말씀을 드리려고 준비한 얘긴데.. 이게 적당한 예시가 될지는 모르겠습니다만. ^^
지금 당장은 HTML5 아웃라인을 잘 지켜서 만들어도 실질적으로 사용자가 이득을 보는 부분은 없을 수 있습니다.
하지만 웹 표준이 정착되어서 시각장애인들이 스크린리더를 사용하게 될 수 있게 된 것처럼,
여러분들이 아웃라인이 잘 정리된 문서를 만들어서 그것이 웹의 문화로 정착된다면,
브라우저 개발사들이나 보조기기 개발사들이, 이 아웃라인을 활용해서 다양한 기능들을 개발 할 수 있게 됩니다.
스킵네비게이션을 일일이 만들어 줄 필요도 없어요.
아웃라인 보고 따라가면 되니까요.
시맨틱을 위한 작업은 그렇게 앞으로의 가능성을 보고 하는 작업이기 때문에,
지금은 당장 소득이 없어도 내가 마크업개발자니까.
이 세상에 도움이 되기 위해서 소명의식을 가지고 하는 작업이라고 생각합니다.
발표 마치겠습니다. 감사합니다.
