0032 CSS 소개

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을 보충할 다양한 플러그 인(plug-in)들이 난립하여 웹에 효율성, 보안 등 각종 문제를 일으켰다.

    

당연히 HTML에서 스타일링을 하는 방식의 실험도 있었다. 가령, HTML 3.2에서 <font> 같은 태그가 표준명세에 첨가되었는데, 이런 방식은 거대한 웹 사이트에 속한 수많은 개별 웹페이지의 글꼴(font)과 색깔(color)을 일일이 설정해야 했기 때문에 개발과정은 길어지고 그에 따른 비용은 늘어났으며 해당 작업을 하는 웹 개발자들에겐 지루하고 힘든 악몽같은 경험을 선사하는 최악의 상황이 만들어졌다.

   

이런 문제들을 해결하기 위해서 W3C에서 CSS를 만들어 HTML 페이지에서 스타일 설정을 대체하도록 했고 덕분에  이제는 하나의 스타일 시트 파일(.css)을 수정하면 전체 웹 사이트의 비주얼을 세련되고 효과적으로 수정할 수 있게 되었다. 

   

결국, 웹페이지에서 보이는 부분은 거의 무조건 CSS로 설정한다고 보면 된다. 

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0032 CSS 소개.apkg