▶ d3.js 튜토리얼 :: ⑥ CSS의 구성과 선택자

▶ d3.js 튜토리얼 :: ⑥ CSS의 구성과 선택자

CSS(Cascading Style Sheets)

---

CSS는 DOM의 시각적 표현을 꾸미는 데 사용한다.

CSS의 구성

CSS는 선택자(Selector)와 프로퍼티(property)로 구성된다. 선택자 뒤에는 중괄호로 감싼 프로퍼티 목록이 따 온다.

프로퍼티 목록 내 각 프로퍼티 명과 그 값은 콜론(:), 각 라인은 세미콜론(;)으로 구분한다.이처럼 중괄호로 감싼 프로퍼티 코드 덩어리를 CSS 규칙(CSS rule)이라고 말한다.

CSS의 선택자(Selector)

---

스캇머레이(2014)는 D3가 필요한 문서를 찾을때 CSS의 선택자를 사용하기때문에, 이에대한 사용법을 이해해 두는 것이 중요하다고 말했다. 선택자는 어떻게 활용할 수 있을까?

선택자는 스타일을 적용할 문서를 골라낼 수 있다. 

수 많은 선택자 종류가 있지만, 그중에서 간단한 것들만 먼저 살펴본다.

타입 선택자

자손 선택자

클래스 선택자

ID 선택자

자손선택자는 특정 문소요소로 감싸여있는 문서요소들을 찾는다. 스캇머레이(2012)는 이것이 D3 프로젝트에서 스타일적용시에 가장많이 사용된다고 하였다.

CSS선택자의 유형 중 '클래스 선택자'는 구두점(.)으로 시작한다.

HTML의 문서요소는 클래스 값을 여러개 가질 수 있으므로, 선택자(Selector)에서도 클래스를 나열한 문자열을 사용해서 여러 클래스를 가진 문서요소를 지정할 수 있다.

주어진 ID가 있는 문서요소 하나를 선택한다. (DOM에서 ID는 각 문서요소당 한번만 사용할 수 있다는 사실을 기억하자.) 

*ID를 선택자(Selector)로 사용할 때에는 반드시 앞에 해시마크(#)를 붙여준다.

좀 더 유용한 다른 방식의 선택자 결합법도 있다. 

좀더 세밀하게 선택하기 위해서 선택자들을 한 문자열로 서로 이을 수 있다. 

DOM은 동적으로 변하기 때문에 ID와 클래스가 추가되거나 제거될 수 있다는 사실을 기억하자. 그래서 특정 시나이로에서만 적용할 CSS 규칙도 만들 수 있다. 

[모질라 개발자 네트워크문서 :https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors]

참고문헌

---

스캇 머레이 지음, 변치훈 옮김, 『D3.js : 쉽고 빠른 인터랙티브 데이터 시각화』, 인사이트, 2014.3