연휴 다들 잘 보내셨나요? 올해 설 연휴는 동계 올림픽이 낀 덕분에 유독 더 요란법석 했습니다. 이번 올림픽 경기 하나하나 다 주옥같았지만 베스트 경기를 뽑으라고 하면 역시 윤성빈 선수의 스켈레톤 경기입니다. 스켈레톤을 시작한 지 불과 6년만에 금메달을 거머쥔 그. 기본적으로 뛰어난 운동신경도 있었지만 금메달을 향한 그의 열정과 노력이 없었다면 이뤄내지 못했을 성과입니다.

열정과 노력은 비단 운동 뿐만 아니라 우리가 꿈꾸는 많은 것을 이루게 해주는 원동력 입니다. 이 강좌를 보고 계신 분들 중 누군가는 웹 퍼블리셔를 꿈꾸고 있을 수 있습니다. 그리고 또 그들 중 누군가는 저처럼 뒤늦게 웹의 세계에 발을 들인 분일 수도 있습니다. 그분들에게 제가 드리고 싶은 말은 비록 늦은 시작이지만, 비록 지금은 보잘 것 없는 나이지만, 나아질 것을 믿고 꿈에 대한 열망을 잃지 않고 꾸준히 노력하시라는 겁니다. 열정이 있는 한 노력은 절대 배신하지 않습니다.

사설이 길었는데 연휴가 지난 뒤 자칫 나태해질 수 있는 마음을 다시 붙잡기 위해 제 스스로에게 하는 말이기도 했습니다.

자, 그럼 이제 본 강의를 시작해볼까요? 오늘은 구역을 나누는 태그에 대해 알아보겠습니다.

문장을 만드는 태그2에서 아주 짤막하게 한 번 나왔던 개념입니다. 구역을 나누는 태그를 설명하기 전 시맨틱 웹에 대해 간략하게 먼저 설명할까 합니다.

Semantic은 '의미의', '의미론적인' 이라는 사전적 의미를 가지고 있습니다. 그럼 직역하면 시맨틱 웹은 이미론적인 웹, 의미의 웹 정도가 되는데 이게 무슨 말일까요? 시맨틱 웹은 컴퓨터가 웹 페이지를 단순한 HTML의 나열이 아니라 '의미'를 가진 무언가로 해석할 수 있는 것을 의미합니다. 문장을 만드는 태그2에서 <strong> 태그가 있었습니다. 이 태그는 <b> 태그와 똑같이 '굵게' 효과를 텍스트에 부여합니다. 하지만 이 둘은 컴퓨터가 해석할 때 차이점이 생깁니다. 컴퓨터는 <b> 태그를 "글자를 굵게 만들라는 거구나"라고 해석을 합니다. 반면 <strong> 태그는 "이 부분이 '강조'가 되는 부분이구나" 라고 해석을 합니다. 단순히 '굵게'라는 효과를 부여하는 것이 아니라 그 부분이 '강조'라는 의미를 지니고 있다는 걸 컴퓨터가 알 수 있는 것이지요.

HTML5에는 이런 식으로 컴퓨터가 해석할 때 '의미'를 알 수 있도록 하는 태그들이 있습니다.

2. <header> 태그

'머리글'이라고 생각하시면 이용하기 편할 것 같습니다. 웹 페이지든 특정 글 영역이든 해당 부분의 머리글 역할을 한다고 보시면 됩니다. 그리고 <nav> 태그를 담는 용도로도 사용됩니다.

navigator 의 약자에서 따온 <nav> 태그 입니다. <nav> 태그는 주로 '메뉴'들을 담는 역할을 합니다. 다른 페이지로 navigate 해주는 역할을 하는 것이지요. 

사이드 메뉴로 주로 많이 쓰이지만 본래 역할은 본문과 구분되는 별도의 한 구역을 만드는 데 사용합니다. 설명도 딱 사이드 메뉴로 적격이다 싶죠?

기사 영역, 즉 본문이 들어가는 영역입니다.

주로 문서 하단에 위치하며 주로 작성자 / copyright / 관련 문서 링크 등의 정보를 담는 영역입니다. 실제로 문서 하단에 위치할 필요는 없으며 앞서 말한 정보들을 담고 있으면 <footer> 태그로 감쌀 수 있습니다.

section 자체가 부분, 구획 이라는 뜻을 지니고 있기 때문에 이 태그야말로 정말 구역을 나누는 태그라고 할 수 있습니다. 챕터, 메뉴 탭으로 구성된 요소에서 특정 탭이 가리키는 영역 등 유사한 내용을 담고 있는 요소들을 하나로 묶어주는 역할을 하는 태그입니다. 

이 부분은 각 태그들이 어떤 용도로 쓰이는지 개념을 잡고 가면 되는 부분이기 때문에 설명이 굉장히 간단했습니다. 오늘 설명한 태그들은 특별한 스타일이 지정되어 있지 않기 때문에 스타일을 지정하는 대로 원하는 모양을 만들 수 있습니다. <header> 태그에 본문 내용을 넣고 본문처럼 보이게 스타일을 지정할 수도 있는 것이지요. 하지만 그렇게 하지 않는 것이 좋습니다. 시맨틱 웹에서 해당 부분은 '머리글' 부분으로 인식이 되기 때문입니다.

그럼 이제 이 태그들이 어떤식으로 사용되는지 한 번 볼까요?

네이버 메인 페이지 입니다. 빨간 부분이 <header> 영역이라고 볼 수 있습니다. 페이지 명(로고)과 다른 페이지로 이동하기 위한 네비게이션을 담고 있습니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

<nav> 영역입니다. 다른 페이지로 이동하기 위한 네이게이션입니다.

<section> 영역입니다. 사실 <section> 태그와 <article> 태그는 나누기 나름이지만 어떤 부분에 사용되는지 이해를 돕기 위해 임의로 구분을 해보았습니다. 가운데 있는 평창 배너를 두고 위쪽과 아래쪽이 각각 다른 <section> 으로 나뉘어 진다고 볼 수 있겠네요.

<article> 영역입니다. 본 내용이 들어가는 부분이라고 보시면 됩니다. <article> 안에서 또 영역이 나뉘는데 잠시 후에 보도록 하겠습니다.

<aside> 영역입니다. 본문 외에 쇼핑, 회원 정보 등 다른 내용들을 담고 있죠?

<footer> 영역입니다. 저작권 정보, 추가 관련 링크에 관한 내용들을 담고 있습니다.

앞서 보았던 <article> 영역을 다시 나눠본 것입니다. 붉은 부분이 <article> 내의 <nav> 영역, 녹색 부분이 <article> 내의 <section> 영역이라고 볼 수 있습니다.

어땠나요? 이제 구역을 나누는 태그들에 대한 감이 좀 잡히시나요? 이 태그들은 시맨틱 웹을 구성하기 위해 HTML5에서 새롭게 추가된 것들입니다. 과거에는 <div id="header"></div> 와 같은 방식으로 구역을 정의하고 구분했었는데 이제는 <header> 태그만 써주면 되니 보다 간편해졌다고 볼 수 있겠네요. 그리고 의미론적으로도 <div> 태그는 아무 의미가 없는 단순한 '구역' 이지만 오늘 소개한 태그들은 각각의 구역들이 의미를 가지고 있으니 보다 현대적인 형태의 웹페이지를 만드는 데 많은 도움이 될 것 같습니다.

하지만 안타까운 점은 인터넷 익스플로러 8 이하에서는 HTML5를 지원하지 않기 때문에 이런 태그들이 먹히지 않는다는 것입니다. 아직까진 익스플로러를 많이 사용하는 우리나라 웹 환경에서는 어쩌면 아직은 적합하지 않다는 생각도 드네요. 물론 사용할 수 있는 방법이 없는 것은 아닙니다. 이에 대해선 다음에 따로 한 번 소개를 하도록 하겠습니다.

그럼 이만 ..!