0032 CSS 소개
HTML과 CSS는 서로 매우 긴밀하게 연계되어 있다. 따라서 HTML에서는 CSS 적용을 염두에 두고 요소(element)와 속성(attribute)을 만들어 두었고 CSS는 HTML의 구조 위에서 디자인을 하도록 설계되어 있어 서로 함께 공부해야만 이해할 수 있는 내용들이 많다. 따라서 앞으로 HTML과 CSS를 함께 다루기 위하여 지금 CSS의 기본 개념과 사용법을 익혀두고자 한다.
CSS는 Cascading Style Sheets의 약자다. CSS를 이용하여 다양한 기기(device)의 서로 다른 크기의 화면에서 웹페이지의 디자인, 레이아웃(layout) 등 보이는 스타일을 설정할 수 있다.
그렇다면 왜 CSS를 쓰는가? 얼핏 생각하기에는 HTML에서 한꺼번에 처리하면 좋을 것 같은데, 갑자기 이질적인 새로운 형식의 언어를 배워서 웹페이지를 꾸며야 한다니 뭔가 이상하다.
우선, CSS의 등장 배경에 관해서는 다음과 같이 요약할 수 있다.
HTML은 웹페이지 디자인 및 요소 스타일링에 적합한 언어가 아니다. 과거에 그런 시도를 한 적은 있지만 업무량이 과도해져 참담한 실패로 끝나고 말았다.
따라서 이런 문제를 극복하기 위하여 W3C에서 CSS를 만들어냈고 덕분에 세련된 디자인을 효율적으로 웹 사이트에 적용할 수 있게 되었다.
HTML은 처음부터 웹페이지의 내용(content)를 구조화하기 위한 언어로 설계되었을 뿐 웹페이지의 디자인을 설정하기 위한 용도로 만들어진 언어가 아니고 그런 의도를 가진 적도 없다.
당연히 HTML에서 스타일링을 하는 방식의 실험도 있었다. 가령, HTML 3.2에서 <font> 같은 태그가 표준명세에 첨가되었는데, 이런 방식은 거대한 웹 사이트에 속한 수많은 개별 웹페이지의 글꼴(font)과 색깔(color)을 일일이 설정해야 했기 때문에 개발과정은 길어지고 그에 따른 비용은 늘어났으며 해당 작업을 하는 웹 개발자들에겐 지루하고 힘든 악몽같은 경험을 선사하는 최악의 상황이 만들어졌다.
이런 문제들을 해결하기 위해서 W3C에서 CSS를 만들어 HTML 페이지에서 스타일 설정을 대체하도록 했고 덕분에 이제는 하나의 스타일 시트 파일(.css)을 수정하면 전체 웹 사이트의 비주얼을 세련되고 효과적으로 수정할 수 있게 되었다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0032 CSS 소개.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0034 CSS 요소 선택자(element selector) (0) | 2018.12.07 |
|---|---|
| 0033 HTML에 CSS 적용하고 기본 문법 알아보기 (0) | 2018.12.06 |
| 0031 약어(character entity)로 특수문자 표시하기 (0) | 2018.12.03 |
| 0030 HTML 주석(comment) 달기 (0) | 2018.12.02 |
| 0029 정의 목록(description list) 요소 다루기 (0) | 2018.12.01 |
