▶ d3.js 튜토리얼 :: ⑦ CSS규칙을 적용하는 일반적인 방법 세 가지

▶ d3.js 튜토리얼 :: ⑦ CSS규칙을 적용하는 일반적인 방법 세 가지

---

이 글에서는, HTML문서에 CSS 스타일 규칙을 적용하는 일반적인 방법 세 가지^[각주:1]에 대하여 살펴보려고한다.이 역시 D3를 활용하기위해 알아야할 기본적인 개념이기 때문에, 확실히 알고있는 사람이 아니라면 한번 쭉 읽어보는 것이 좋을 것 같다.

HTML문서에 CSS스타일 규칙을 적용하는 방법 3가지

---

스캇머레이(2014)는 CSS스타일규칙을 적용하는 방법을 3가지로 나누어 설명하고있으며, 그내용은 다음과 같다.

CSS스타일 규칙을 적용하는 방법 3가지

① CSS를 HTML에 넣기

② 스타일시트 파일을 HTML에서 참조하기

③ HTML에 인라인 스타일 추가하기

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

① CSS를 HTML에 넣기

---

이것은 HTML과 CSS를 활용하는 가장 단순한 방법으로, 말그대로 HTML안에 CSS규칙들을 적는것이다.

이 방법이 가장 간단하다. 그러나 특정코드별로 다양한 CSS규칙을 적용하거나, 전체 코드가 길어지다보면 굉장히 복잡해지기때문에 이러한 방식은 일반적으로 많이 쓰이지는 않는다.

② 스타일시트 파일을 HTML에서 참조하기

---

이번에 살펴볼 방법은 위에서처럼 CSS규칙을 HTML내에 직접 적는 방식이 아니라, HTML문서와 따로 구분하여 저장한뒤, HTML내에서 이를 참조하여 규칙을 적용시키는 방법이다. 뭔가 말로적으려니 설명이 어렵게 되었지만, 조금만 더 읽어보면 그리 어려운내용이 아니라는 것을 알 수 있다.

이 방법의 특징이라면, HTML파일과는 별도로 CSS파일을 나누어 저장한다는 것이다.

우리가 에디터 또는 메모장에서 HTML예제코드를 작성한 뒤 HTML의 확장자인(.html)으로 저장했듯이, CSS규칙을 작성한 파일도 같은 방법으로 작성한다. 단, CSS파일은 확장자를 (.css)로 저장한다.

스타일시트파일을 HTML에서 참조하는 방법

CSS규칙을 HTML내에 직접 작성했을 때와는 다르게, HTML의 head 내부에는 link로시작되는 한줄의 코드만 존재하고, CSS규칙은 사진오른쪽에보이는 형태로 작성되어(동일한 코드이다.)별개의 파일에 저장되었다. 

'link'문서요소는 이름그대로 CSS파일을 html과 연결해주고있다. 이렇게 해준 결과는 ①번방법과 동일하게 나타나게된다.

③HTML에 인라인스타일 추가하기

---

세 가지 방법중 마지막으로 살펴볼 것은 HTML내부에 직접 인라인스타일을 추가하는 것이다. 직접 작성한다는 점에서는 ①번 방법과 동일하지만, 이 방법은 HTML의 해당 문서요소에 직접 규칙을 작성하는 방법이다.

위 사진과 같이 p태그안에 직접 style규칙을 작성한 후 결과를 출력해보면 다음과 같은 화면을 볼 수 있다.(차이를 쉽게 알아보기위해 이전예제에 인라인규칙한줄과 기본적인p태그 한줄을 추가했다.)

위 사진을 보면, 가운데 파란색 글씨 부분이 인라인스타일을 적용한부분이다. css문서의 스타일규칙을 따르는 첫 번째, 세 번째 줄과 달리 인라인스타일을 적용한 부분(두 번째 줄)은 방금작성한 코드의규칙을 따르고있다. 

이 경우, 다시 CSS문서내의 규칙을 선언할 필요없이, 인라인스타일을 선언한 부분이 끝나면 다음부분분터 우원래의 CSS규칙이 적용되고 있다.

인라인스타일 적용으로 인한 단점

해당문서요소에 직접 규칙을 작성하는 "인라인 스타일"은, 이전 글에서 살펴보았던 선택자(Selector)를 사용하지 않아 전체적인 콘트롤이 어려우며, 코드가 길어지는 경우에는 각 CSS요소를 읽기 어려우며, 전체적으로 짖저분해진다는 점이 단점이라고 할 수 있다. 사실 전체 프로젝트를 혼자 다 도맡아하는 경우가 많지 않기때문에(혹은 다른프로젝트에서 이전 코드를 활용할 경우도 있다.) 읽기 쉽게 코드를 구성하는 것도 중요한일이라는 점에서 모든 부분에 인라인스타일을 적용하는 것은 피하는 것이 좋다.

그럼에도불구하고, 인라인스타일을 적용해야할 때가 있다.

저러한 단점에도 인라인스타일이 사용되는 이유는 "특정부분만 CSS문서로 적용한 규칙을 따르지 않게 해야할 경우"에 활용할 수 있다. 스캇머레이(2014)는 이러한 용도에 대해서는 인라인스타일로 추가하는 것이 "유용"하다고 이야기한 바 있다.

참고문헌

---

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

1. 스캇 머레이 지음, 변치훈 옮김, "D3.js : 쉽고 빠른 인터랙티브 데이터 시각화", 인사이트, 2014.3, 42쪽 [본문으로]