[CSS] 웹디자인, 페이지 구성, CSS 처음 배워도 할 수 있다. CSS의 핵심 1편

CSS는 다룰 수 있게 되는 순간 웹 개발의 강력한 툴이다.

  나는 그냥 컴퓨터를 만지는 것을 좋아하는 일개 학부생일 뿐이다. 제대한지 아직 한달도 안됐고, CSS는 물론 그 전까지 만져본 적도 없다. 그런데 이번에 Tistory 블로그를 시작하고, 스킨을 수정하면서 처음 만져본 CSS가 Bootstrap을 만나니 너무나 쉽다는 것을 느끼게 되었다. 완전 초보자의 입장에서 바라본 CSS에 대해 내가 까먹기 전에 한번 이야기를 해보려고 한다.

  설명하는 과정에서 정식 용어가 아닌 것들이 많이 등장할 것이라 생각되고, 내가 바라본 관점이 틀릴 수도 있다. 그렇지만 좀 틀어진 관점이라도 아예 모르는 사람한테는 쉽게 접근하는데 도움이 될 수도 있을 것이라 생각하여 약간 고민한 뒤 글을 올린다.

1. CSS란?

  용어를 일단 정의하고 넘어가자. 구글검색에서 define:CSS를 쳐보면 CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어 라고 나온다. 이 말이 무엇인지 쉽게 이해하려면 1990년대로 돌아가볼 필요가 있다.

흔히 볼 수 있었던 90년대의 홈페이지. 대개가 이렇게 심플했다.

  나도 웹을 처음 접했던게 90년대이고, 이 때에는 CSS와 같은 별다른 장치가 없었다. 그저 <H1>이니 <B>니 <TITLE>이니 태그들만 줄창 알아놓은 다음에 그것을 풀어놓을 뿐이었다. 그러다보면 자연스럽게 어떻게 하면 웹상의 정보를 좀 더 쉽게, 효율적으로 볼 수 있게 만들 것인가? 에 대한 질문이 생각날 것이다.

  처음에는 이런 식이었다. <font size=4 color=red>문장</font> 과 같이 h1, h2 태그만 쓰던 상황에서 좀 자유롭게 글자의 속성을 지정하게 된 것이다. 그러다가 나중에는 이것도 좀 더 세분화 해서 style이라는 속성을 쓰기에 이른다. <font style="font-size:15px; color:red;">와 같이 말이다.  style은 좀 더 많은 속성을 글자에 부여할 수 있게 해주었다.

  왠만한 독자들은 이제 눈치를 챘을 것이다. 저게 한 번이면 봐줄 만도 하지만.. 예를 들면 제목에서 font-size:25px; color:blue;라는 속성값을 사용한다고 가정해보자. 그렇게 하자면 제목이 나올 때마다 이것을 반복해야한다. 충분히 비효율적이다. 반복하는 작업은 줄이려고 하는게 이쪽 업계의 정석이다. 프로그램이라는 것도 반복작업을 피하려고 애초에 나온 것이었으니.

  처음에는 CSS가 반복되는 부분을 조금 도와주는 정도였다면, 점점 시간이 흐를 수록 아예 HTML은 정보만 담고, CSS가 그 정보를 배치하는 방식으로 웹사이트는 진화되어 갔다. 이 때 한참 대두가 되었던게 <table> 태그의 문제였는데, 아예 table에 익숙해져버린 웹디자이너들이 CSS를 쓸 생각은 안하고 사소한 것을 배치하는 모든 문제에 대해 table을 사용하는 현상이 일어난 것이었다. 예를 들면 화면 우측 상단에 무언가를 배치해야 한다면, 웹페이지를 table로 9분할 해서 우측 상단의 셀에다가 배치하는 식이었다. 그러나 이는 바람직하지 못하다. table의 본래 목적은 말그대로 표를 만들기 위함이었지, 웹페이지의 구성요소를 배치하기 위한 것이 아니었기 때문이다.

  이쯤 했으면 이제 이해가 되었을 것이다. 이제 오늘날의 HTML은 최소한의 정보만을 담고 있다. 디자인적인 요소는 거의 들어가 있지 않다. HTML은 그저 나타내고자 하는 내용들이 들어있고, CSS가 그것을 배치한다. 처음으로 돌아가서 정의를 다시 생각해보면  CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어 라고 했었는데, 여기서 말하는 마크업 언어는 HTML이라고 생각하면 쉽다. 말 그대로 HTML을 실제 표시되는 방법을 기술하는 언어라는 거다.

  난 이것을 이해하고 나서 왜 내가 그전까지 웹페이지를 만들지 못했는지 이해가 갔다. 물론 그전까지의 수준은 초등학교 때 네띠앙에서 메모장으로 홈페이지 끄적여서 만들거나, 나모웹에디터로 만들던 그 수준이었다. 그러던 내가, CSS의 독립을 이해하고 나니 그 뒤에 유려하다 싶은 웹페이지들을 크롬개발자도구의 힘을 빌어 쉽게 혼자 보면서 분석할 수 있게 되었다.

2. CSS의 핵심, Selector(선택자)

  앞에서 얘기했지만, HTML은 정보만을 담는다고 했다. 그렇다면, CSS는 그 정보를 선택해서 디자인 해야할 것이다. 이를 위한게 선택자이다.

  선택자의 종류는 많지만, 그것을 다 소개하는 것은 전문적인 디자이너가 아니라면 그럴 필요도 없거니와, 이 글의 목적과 부합하지 않기 때문에 몇가지만 보도록 하자. 일단 예제 Tag묶음을 보면

<div class="readiz">

  <h1>

    <b>Test message.</b>

  </h1>

</div>

<div id="booo">

  You\'re my boo.

</div>

   위와 같은게 있다고 해보자. 급조한 거지만, 충분히 설명할 수 있을 것 같다.

  우선 class와 id는 구분을 짓기 위한 것이라고 보면 맞다. 사실 ID는 Javascript가 본문 태그를 선택하기 위해 있는 측면이 강하고, Class는 CSS가 선택하기 위해 있는거라고 나는 보고 있다. 그렇지만 어쨌든 둘 다 구분을 위한 것이니 혼용해도 상관은 없는 듯 하다.

  첫번째로, tag를 선택하는 것은 가장 쉽다. 그냥 그 tag를 적으면 선택자가 완성된다. 즉, 아래의 CSS를 HTML에 적용하면 

div { display: none; }

  화면에 아무것도 출력되지 않을 것이다. 왜냐하면 div 태그를 선택자가 선택하여, display라는 속성을 none으로 만들었기 때문이다.

  클래스를 선택하는 것은 .을 붙이면 되고, ID를 선택하는 것은 #를 붙이면 된다는게 두번째로 할 말이다. 즉 위 예제코드에서는 div.readiz라고 하면 첫번째 div 태그가 선택될 것이고, div#booo라고 하면 두번째 div태그가 선택될 것이다. 만약에 div를 안붙이고 그냥 .readiz, #booo라고 한다면 앞의 태그와 상관없이 id와 class만 보고 일치하는 태그 모두에게 그 속성이 적용된다.

  짧게 이야기했지만 위 내용이 사실 선택자의 거의 전부이다. 여기에서 이제 추가로 알아야 하는 것은 Tree구조의 선택인데, 간단하다. 스페이스와 >만 알고 있으면 된다.

  만약 두 태그 사이에 스페이스가 들어간다면,

div b { font-size: 3em; }

 위 CSS 선택자를 해석하면, div태그 하위에 있는 b태그를 선택하라는 의미이다. 예제에서는 Test message.라는 부분에 영향을 미칠 것이다. 만약에 스페이스 대신에 >를 쓴다면 바로 아래에 있는 자식에게만 적용이 된다는 뜻이다. 즉 스페이스와 >의 차이점은 두 요소 간의 트리구조상의 거리 차이에 있다고 볼 수 있다. 스페이스는 몇대 자손이건 손자건 상관없지만 >는 아들만 된다는 뜻이다.

  이렇게만 알고 있으면 HTML Markup에 임의의 위치에 위치한 원하는 태그를 어떻게든 가져올 수 있을 것이다. body>div>h1>b... 하는 식으로 찾아들어가도 되고, 적당한 위치에 ID를 삽입하여 div#readiz와 같은 식으로 선택할 수 있을 것이다.

  쓰다보니 길어져서 연재물이 되고 말았는데, 다음 2편에서 알짜배기 핵심들을 계속해서 알아보도록 하자.