크롬, 사파리, 파이어폭스 등과 같은 웹브라우저에서 제공하는 [소스보기]기능으로 HTML의 원시코드를 보여준다. 하지만 D3나 자바스크립트 코드가 실행 된 상태에서는 형재 DOM 상태가 동적으로 완전히 달라지기도 한다. 이런 경우 [소스보기]는 유용하지 않다. 34쪽.
브라우저의 [개발자 도구]를 사용하면 DOM의 현재 상태 보기가 가능.
▶크롬 : [보기] - [개발자 정보] - [개발자 도구]
▶파이어폭스 : [도구] - [웹 개발자 도구] - [개발자 도구]
▶사파리 : 먼저 개발자 도구를 사용하도록 설정하고, [Safari] - [환경설정] - [고급]
위와 같이 각 웹브라우저 별 [개발자 도구]탭을 클릭하여 [웹 속성보기]를 클릭한다.
* 모든 브라우저는 키보드 단축키를 제공한다.
* 마우스 우클릭 메뉴에서 [요소검사]를 실행해도 된다.
웹브라우저의 개발자도구로 DOM의 현재상태 확인하기 - 크롬기준
3.4 렌더링과 박스모델
렌더링은 브라우저가 HTML을 파싱하고 DOM을 생성한 후에 밟는 과정으로, DOM콘텐츠에 시각적 규칙을 적용하고 화면에 이를 픽셀로 그린다.중요한 건 브라우저가 콘텐츠를 렌더링할 때 모든 요소를 사각형으로 인식한다는 사실이다. 그래서 이를 박스모델이라고 한다.
문단을 나타내는 p, div, span 등 모든 요소는 width, height, 화면상의 좌푯값같은 프로퍼티를 가진 2차원 사각형이다. 브라우저에서 어떤 요소가 굽어있거나 울퉁불퉁한 모양으로 보여도 실제로는 그저 사각형일 뿐이다.
블록레벨의 문서요소와 인라인레벨의 문서요소
블록레벨(block-level) 문서요소
레고 블록처럼 각 요소가 차곡차곡 쌓이는 형태
*기본적으로 블록 레벨 문서요소는 자신을 담고 있는 컨테이너를 꽉 채우고 형제 문서요소를 강제로 문서 아래쪽으로 밀어버린다.
인라인(inline)문서요소
문단의 라인 안에 위치하며, 스타일 프로퍼티를 바꾸지 않았다면 일반적으로 strong, em, a, span은 인라인 문서요소이다.
*인라인 문서요소는 남은 공간을 채우지 않고 같은 종류의 이웃으로 옆에서 옆으로 넘어간다.
참고문헌
스캇 머레이 지음, 변치훈 옮김, 『D3.js : 쉽고 빠른 인터랙티브 데이터 시각화』, 인사이트, 2014.3
'시각화 > D3.js' 카테고리의 다른 글
| ▶ d3.js 튜토리얼 :: ⑦ CSS규칙을 적용하는 일반적인 방법 세 가지 (0) | 2015.03.09 |
|---|---|
| ▶ d3.js 튜토리얼 :: ⑥ CSS의 구성과 선택자 (0) | 2015.03.09 |
| ▶d3.js 튜토리얼 :: ④ HTML의 속성과 DOM 이해하기 (0) | 2015.03.07 |
| ▶d3.js 튜토리얼 :: ③ HTML의 마크업형태와 문서요소 살펴보기 (0) | 2015.03.07 |
| ▶d3.js 튜토리얼 :: ② d3.js 를 배운다는 것이란? (1) | 2015.03.07 |