▶d3.js 튜토리얼 :: ③ HTML의 마크업형태와 문서요소 살펴보기
이글에서는 HTML의 마크업형태와, 문서요소에대한 내용을 살펴보고자한다. 내용에 들어가기에 앞서, d3.js로 시각화하는 방법을 배우러왔는데, Markup이나, DOM과 같은 당황스러운 용어먼저 짚고넢어가는 이유에 대해 살펴보는 것이 좋을 것 같다.
마크업(Markup)은 기본적으로 DOM에 문서요소(element)를 생성하기 위해서 태그(tag)를 추가하는 과정이다.그렇다면, DOM은 또 뭘까? d3.js의 저자 스캇머레이는 책에서 DOM에대해 다음과 같이 설명하고 있다.
DOM 이란?
DOM(Document Object Model)이란 단어는 HTML의 계층적 구조를 나타내며, 한 쌍의 각 태그(어떤 경우는 단일 태그)들은 계층구조상의 구성 요소가 된다. 구조가 계층적이다 보니 DOM에서는 문서요소의 상대적인 관계를 인간 관계를 나타내는 단어인 부모, 자식, 형제, 조상, 자손을 사용해서 나타낸다.1
HTML요소는 "꺽쇠 괄호"라고 불리는 '<, >' 태그 이루어지고, 이 HTML요소로 만들어진 문서가 HTML이다. 굳이 여기서 한번 더 곱씹어보자면, HTML은 Hyper Text Markup Language의 약자이다.
HTML요소는 중첩도 가능하다.
p와 em의 중첩의 예.
<p> This is a <em> really</em> interesting paragraph.</p>
이렇게 요소들이 중첩되었을때, "계층구조"가 만들어지게 된다. 쉽게말해서 p태그가 em태그를 감싸고 있는 이 경우에는 p태그가 em태의 부모태그가 되고, em태그는 p태그의 자식태그가된다. 여기에서 주의해야할 점이라면 중첩을 교차로 시키면 안된다는 점이다.
p 와 em태그의 잘못된 중첩의예.
<p> This could cause <em> unexpected </p>
<p> result </em>, and is best avoided.</p>
부모태그 - 자식태그간의 관계가 명확하지않다. 어렵지않으니 한번 보고 이해해두면 좋을 정도인 것 같다.
쌍으로 되어있지 않은 태그들
앞서 html의 태그는 "일반적으로" 쌍으로 존재한다는 내용을 살펴봤었다. 즉, 이말은 일부태그들은 그렇지 않다는 것을 의미한다. 대표적으로 이미지 파일을 참조하는 img태그가 있다.
<img src="photo.jpg" />
한가지 더알아 둘 것은 HTML5에서 스스로 닫는 슬래시는 필수사항이 아니라는 점이다.
<img src="photo.jpg">
이 태그는 위의 태그와 동일한 기능을한다. 이러한 것들은 이쪽분야에 지식이 있는 사람들이라면 간단히 스킵해도 좋을 내용이지만, 이러한 모든 것들을 처음접하는 사람들이라면 간단히 보고 넘어가면 좋을 듯 싶다.
HTML의 문서요소 이해하기
HTML의 문서요소들, 예를들어 head, title, body, p, em, strong… 와 같은 것들의 종류는 무려 수 백개에 달한다고 한다. 갯수에 겁먹을 필요는 없다. 일반적으로 HTML을 이해하는데 필요한 문서요소는 그리 많지않다. 이에관한 지식이 더 많이 필요할 때 아래와 같은 사이트에서 전체목록을 보면서 이해하면 되겠다. 이러한 지식을 갓 접한 사람이라면 아래사이트는 "이렇게 있구나"정도만 생각하고 넘어가자.
HTML은 구글크롬과 파이어폭스와같이 HTML을 처리할 수 있는 웹브라우저에서 처리에 영향을 줄 수 있는 자바스크립트와 CSS등의스크립트를 포함하거나 외부에서 불러올 수있다.
*W3C(HTML과 CSS표준의 공동책임자)는 명확하고 표상적인 마크업을 위해 CSS의 사용을 권장하고있다.
HTML에서 많이 사용되는 문서요소 목록
여기서는 스캇머레이(2014)가《d3.js》에서 정리해놓은 "일반적으로 많이 사용되는 문서요소"내용을 정리해두었다.
<!DOCTYPE html>
표준문서 타입 선언. 문서의최상단에 있어야 한다.
html
문서의 전체 HTML콘텐츠를 감싸는 역할을 한다.
head
문서에 대한 모든 부가정보를 담는다. title, 외부 스타일시트와 자바스크립트 파일 참조가 여기에 해당한다.
title
문서 제목. 브라우저는 일반적으로 브라우저 창 상단에 제목을 추가한다. 그리고 페이지를 북마크할 때도 사용한다.
body
head를 제외한 모든 문서요소는 body안에 있어야한다. 페이지에서 시각적으로 표현디는 주 콘텐츠다.
h1,h2,h3,h4
단계별 제목을 지정할 수 있다. h1은 최상위 단계의 제목이고 h2는 그다음 단계, 이런 식이다.
p
글의 단락이다.
ul, ol, li
ul은 번호가 없는 목록을 정의하며, 대부분 구분 기호가 붙은 목록을 위해 사용한다. 번호가 붙은 목록은 ol로 정의한다. ul과 ol모두 목록의 항목 지정을 위해서 li문서요소를 포함해야 한다.
em
내용 강조를 위해 사용한다. 일반적으로 이탤릭체로 렌더링 된다.
strong
좀 더 강조할 때 사용한다. 일반적으로 볼드체로 렌더링 된다.
a
링크를 별도로 지정하지 않으면 일반적으로 밑줄과 파란색 텍스트로 렌더링 된다.
span
일반적으로 p같은 문서요소 안에서 좀 더 좁은 텍스트 영역을 나타낸다.
div
문서 안에서 임의로 분할한 영역을 나타낸다.관련된 문서요소를 묶고 담는 데 사용한다.
[자료 : 스캇 머레이 지음, 변치훈 옮김, "D3.js : 쉽고 빠른 인터랙티브 데이터 시각화", 인사이트, 2014.3, 28쪽.]
HTML의 요소관련 기본예제
위에서 살펴본 HTML에서 많이 사용되는 문서요소들을 활용하여 간단한 예제를 실행해본다. 에디터가 없다면 메모장을 열어 다음코드를 작성한다.
혹시나해서 메모장에 코드작성 후 html파일로 저장하는 과정을 정리하였으며, 예제 코드는 다음과 같다.
<!DOCTYPE HMTL>
<html>
<head>
<body>
<h1> Amazing visualization Tool Cures All Ills</h1>
<p> A new open-source tool designed for visualization of data turns of to have an unexpected, positive side effect : it heals any ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even the follwing symptoms:</p>
<ul>
<li>fevers</li>
<li>chills</li>
<li>general malaise</li>
</ul>
<p>It achieves this end with a patented, tree-step process.</p>
<ol>
<li>Load in data.</li>
<li>Generate a visual representation.</li>
<li>Activate magic healing function.</li>
</ol>
</body>
</html>
이같은 코드의 결과물은 다음과 같은 구조를 갖게된다.ul과 ol의 차이도 함께 살펴보고 가자.
여기까지 HTML의 기본적이고, 일반적인 문소요소들을 살펴보았다. 이미알고있다면 과감하게 skip해도 좋지만, 이에관한 지식이 듬성등섬있는 경우라면, 눈으로라도 한번씩 읽어보면 좋을 것 같다. 이번 글에서는 HTML의 가장 기본적인 내용을 정리해보았고, 다음 글에서는 HTML에 속성(attribute)을 지정하는 내용을 정리해보고자 한다.
'시각화 > D3.js' 카테고리의 다른 글
| ▶ d3.js 튜토리얼 :: ⑥ CSS의 구성과 선택자 (0) | 2015.03.09 |
|---|---|
| ▶ d3.js 튜토리얼 :: ⑤ 웹브라우저의 개발자도구 & 렌더링 (0) | 2015.03.09 |
| ▶d3.js 튜토리얼 :: ④ HTML의 속성과 DOM 이해하기 (0) | 2015.03.07 |
| ▶d3.js 튜토리얼 :: ② d3.js 를 배운다는 것이란? (1) | 2015.03.07 |
| ▶d3.js 튜토리얼 :: ① d3.js 이해 및 설치 (0) | 2015.03.06 |