▶d3.js 튜토리얼 :: ④ HTML의 속성과 DOM 이해하기
이번 글에서는 저번 글에서 말한대로, 속성(attribute)에 대한 내용을 정리해보고자 한다. 이번 내용은 《D3.js :: 쉽고 빠른 인터랙티브 데이터 시각화》의 내용을 참고했다.
속성은. 프로퍼티명과 프로퍼티 값으로 되어있다.
복잡해보이는 문서요소도 자세히 살펴보면 아주 단순한 "기준"같은 것이존재한다. 이번에 살펴보고자하는 "속성"역시 마찬가지이다.
<tagname property="value"></tagname>
프로퍼티 명 뒤에는 등호(=)가 오고 값은 큰 따옴표로 감싼다.
문서요소에는 각기 다른 속성이 적용된다.
예를들어 a 태그에는 링크를 위해 URL을 지정하는 href속성을 쓸 수 있다.
*href는 'HTTP reference'의 약자이다.
<a href="http://d3js.org/">The D3 website</a>
물론 id와 class처럼 모든 문서요소에서 쓸 수 있는 공통 속성도 있다.
Class와 ID는 정말 유용한 속성이다.
콘텐츠에서 구체적으로 한 부분을 찾을 때 활용할 수 있다. 특히 CSS와 자바스크립트코드는 문서요소를 알아낼 때 class와 id에 많이 의지한다.
<p> Brilliant paragraph </p>
<p> Insightful paragraph </p>
<p class = "awesome">Awe-inspiring paragraph</p>
세 번째 단락은 awesome이라는 class가 붙은 문서요소중 하나가 되었다. 이를 바탕으로 다른 문서요소들과 함께 선택하여 수정이 가능해진다.
또한 문서요소는 단순히 공백으로 구분해서 여러 개의 class를 지정할 수 있다.
<p class = "uplifting"> Brilliant paragraph </p>
<p class = "uplifting"> Insightful paragraph </p>
<p class = "uplifting awesome">Awe-inspiring paragraph</p>
이렇게되면 세 단락 모두 uplifting class의 구성원이 되었으며, 세 번째 단락만 uplifting class와 awesome class가 함께 지정되었다.
class와 같은 듯 다른 id의 사용방법
id는 class와 사용방법이 비슷하지만, class와 달리 값을 하나만 지정할 수 있고, 그값도 문서에서 중복 없이 한번만 사용해야 한다.
<div id="content">
<div id="visualization"></div>
<div id="button"></div>
</div>
id는 idv같은 문서요소가 동작이 있는 버튼이나 내용을 담은 컨테이너처럼 특별한 역할을 할 때 유용하다. 보통은 문서에서 이런 문서요소가 하나뿐이므로 id를 사용하고,그렇지 않은 경우에는 class를 사용한다.
class와 id값은 숫자로 시작할 수 없고 반드시 알파벳으로 시작해야한다.
id="1"은 동작하지 않지만, id="item1"은 동작한다.
숫자로 시작하는 값을 사용하면 코드가 동작하지 않는데다가 브라우저에서 에러가 나지도 않는다.
*이때문에 오동작의원인을 밝히기가 어려운 경우가 많다.
주석
<!-- HTML의 주석은 이렇게 작성한다. -->
이렇게 작성하면 주석안의 내용은 웹브라우저가 모두 무시하게 된다. 이같은 주석은 '메모'로 활용하면된다. 혼자작업을 하든, 협업을 하든 주석은 매우 유용하게 활용된다.
위 사진은 프로세싱 홈페이지의 html문서의 모습이다. 이 경우, 주석처리를 활용해 각 구성요소를 보기쉽게 구분하는데 사용했다. 이처럼 주석은 코드가 복잡해질수록 간절(?)해지는 기능이라고할 수 있겠다.
DOM
DOM(Document Object Model)이란 단어는 HTML의 계층적 구조를 나타내며, 한 쌍의 각 태그(어떤 경우는 단일 태그)들은 계층구조상의 구성 요소가 된다. 구조가 계층적이다 보니 DOM에서는 문서요소의 상대적인 관계를 인간 관계를 나타내는 단어인 부모, 자식, 형제, 조상, 자손을 사용해서 나타낸다.1
이에 대한 예제코드는 다음과 같다
<html>
<body>
<h1> Breaking News </h1>
<p></p>
</body>
</html>
이러한 코드의 구조에 대해 살펴보기위해 이미지하나를 더 첨부했다.
위 사진의 내용처럼 h1과 p는 형제 문서요소이며, 이 둘은 body의 자식문서요소이다. 마지막으로 이 문서의 모든 문서요소는html의 자손이라고 할 수 있다.
meta태그
meta 태그는 utf-8같이 브라우저가 d3의 함수와 데이터를 제대로 파싱할 수 있도록 보장하는 데 필요한 인코딩 타입을 확인한다.
참고자료
스캇 머레이 지음, 변치훈 옮김, "D3.js : 쉽고 빠른 인터랙티브 데이터 시각화", 인사이트, 2014.3, 32쪽
- 스캇 머레이 지음, 변치훈 옮김, "D3.js : 쉽고 빠른 인터랙티브 데이터 시각화", 인사이트, 2014.3, 32쪽 [본문으로]
'시각화 > D3.js' 카테고리의 다른 글
| ▶ d3.js 튜토리얼 :: ⑥ CSS의 구성과 선택자 (0) | 2015.03.09 |
|---|---|
| ▶ d3.js 튜토리얼 :: ⑤ 웹브라우저의 개발자도구 & 렌더링 (0) | 2015.03.09 |
| ▶d3.js 튜토리얼 :: ③ HTML의 마크업형태와 문서요소 살펴보기 (0) | 2015.03.07 |
| ▶d3.js 튜토리얼 :: ② d3.js 를 배운다는 것이란? (1) | 2015.03.07 |
| ▶d3.js 튜토리얼 :: ① d3.js 이해 및 설치 (0) | 2015.03.06 |