chapter 6-1
HTML은 문서의 내용을, CSS는 문서의 디자인을 담당한다고 하였습니다. 그렇다면, 디자인도 그냥 HTML 선에서 해결할 수 있을까요?
정답은 "그렇다" 입니다. 예를 들어, body태그에 bgcolor속성을 지정하면 배경색을 바꿀 수 있습니다. 이런 식으로 태그에 디자인 관련 속성을 추가하면 굳이 번거롭게 CSS라는 새로운 개념을 배우지 않고도 HTML만으로 죄다 해결할 수 있을 것 같은데, 뭐하러 CSS를 써야 하나요?
내용과 디자인의 독립
CSS를 쓰는 가장 주요한 이유는, 바로 내용과 디자인을 따로 다룰 수 있다는 점입니다.
아니, 만약 위에서 말한 것 처럼 HTML 태그의 속성값으로 디자인까지 다룰 수 있다면 그냥 디자인 관련 속성값만 바꿔주면 되는 거니까 이렇게 써도 디자인과 내용을 따로 다룰 수 있는 게 아닌가요?
CSS를 쓰면, 디자인과 관련된 내용들을 태그 밖으로 빼서 따로 다룰 수 있고, 더 나아가 HTML과 아예 독립적인 파일로 다룰 수도 있습니다. 태그 안에서 속성값으로 퉁쳐서 사용하는 것과는 편의성의 차이가 큽니다.
저렇게만 보면 무슨 소리인지 여전히 감이 오지 않기 떄문에, 예시를 들어보겠습니다.
두 개의 문서가 있는데, h1, 즉 제목 문단에 "20pt 크기에 빨간색 볼드체" 라는 디자인을 둘 다 적용하고 싶습니다. HTML 속성을 이용하려면, h1 태그를 일일히 다 찾아서 해당 디자인을 적용해야 합니다. 심지어, 이걸 두 개의 문서에 별개로 해 주어야 합니다. 하지만, CSS를 이용한다면, 그냥 h1 태그에 해당 디자인을 적용하라는 내용 (CSS를 이용하면 이렇게 모든 태그에 대해 일괄적으로 디자인을 적용할 수 있습니다) 이 담긴 하나의 CSS파일을 각 HTML문서에 연결만 해주면 됩니다.
하나의 HTML문서에 대해서, 모바일에서 나타나는 디자인과 PC에서 나타나는 디자인을 다르게 적용하고 싶습니다. CSS가 없으면, 내용은 같지만 디자인 관련 속성만 다른 두개의 HTML 문서를 만들어야 합니다. 내용 부분이 필연적으로 중복됩니다. 하지만, CSS를 이용하면 모바일용 CSS파일과 PC용 CSS파일을 따로 만들어서 적용하면 됩니다.
HTML의 태그들 중 디자인의 용도만을 위해 각잡고 만들어지는 것이 많지 않기 때문에, HTML 태그로 디자인을 하면 코드가 중구난방이 되기 쉽습니다. 예를 들어 그저 표를 만드는 용도로 만들어진 table 태그가 페이지의 레이아웃을 위한 용도로 사용되는 등, 코드의 직관성을 해치는 방향으로 진화해 왔습니다.
특히 1, 2의 이유로 CSS의 역할은 모바일 환경에서 더욱 커졌습니다. 다양한 기기들이 등장하는 모바일 환경에서 기기의 특성에 맞춘 서로 다른 디자인을 제공하는 것을 반응형 웹이라고 하는데, 2에서 보이듯 CSS는 반응형 웹 디자인에 최적화 되어있습니다.
또한, 트래픽이 제한되는 종량제 환경에서 (핸드폰을 쓸 때 데이터가 제한되는 것을 생각하면 됩니다. 물론 무제한은 논외) 내용 데이터의 중복을 없애주는 CSS의 존재는 요금 폭탄을 줄여주는데 매우 중요합니다.
Last updated