CSS의 문법 구조는 프로그래밍 언어라고 할 수 없을 정도로 아주 단순합니다. 우선 제일 먼저 나오는 것이 선택자입니다. 선택자에 대해서는 이전 글 에서 잠깐 타입 선택자(Type Selector)에 대해서 알아봤는데 타입선택자와 함께 가장 많이 쓰이는 것이 아이디 선택자와 클래스 선택자입니다. 선택자 다음에 나오는 것이 중괄호의 시작입니다. 그 다음이 속성, 콜론, 값, 단위, 세미콜론, 중괄호끝으로 모든 구문이 완료됩니다. 하나의 속성과 값이 끝나고 다른 속성과 값을 추가하려면 세미콜론 다음에 다시 시작하면 됩니다. 모든 속성과 값은 중괄호 안에 들어가야합니다. 아주 간단하죠. 그러면 위 사진에서 중요한 것이 선택자와 속성, 값이 있는데 속성과 값은 아주 다양하기 때문에 별도의 내용없이 나오는대로 설명드리고 선택자에 대해서만 설명드립니다.
1. 선택자(Selector)
웹표준에 의하면 HTML페이지에서 CSS 사용시 외부 스타일시트를 사용하도록 되어있으므로 CSS에서 HTML 요소에 대해서 어떤 명령을 내리려면 타겟이 있어야합니다. 그 타겟을 선택자라고 합니다. 그래서 대상을 정하는 것을 타겟팅(Targeting)이라고 하기 때문에 HTML의 태그와 같은 요소는 타겟이 됩니다. CSS로 속성과 값을 선언하는 방식은 세가지가 있는데 인라인(inline)방식, 임베디드(Embedded)방식, 외부스타일시트(External Style Sheet)방식입니다. 이에 대한 자세한 내용은 다음글에 나옵니다. 인라인 방식은 태그가 있는 괄호<>안에서 스타일을 정하는 방식이라서 해당 태그에만 적용이 되므로 선택자라는 타겟을 정할 필요가 없습니다. 하지만 임베디드방식이나 외부스타일시트방식은 태그로부터 떨어져 나와서 선언해야하기 때문에 선택자가 필요하게 됩니다.
선택자의 종류는 다양하지만 가장 많이 쓰이는 것이 타입선택자, 아이디선택자, 클래스 선택자입니다. 그밖의 선택자는 유사클래스(Pseudo Class)선택자라고 하여 다양해서 CSS 기초에서 다루지는 않겠습니다.
타입선택자는 HTML 태그를 타겟으로 하므로 크게 어려운 점은 없습니다. 아이디선택자와 클래스 선택자에 대해서는 이해가 필요하므로 자세한 설명이 필요합니다.
2. 아이디 선택자(ID Selector)
<p id="firstname">My name is Donald.</p>
위처럼 태그에 대해서 아이디 선택자가 들어가 있는데 태그에 대해서 타입선택자를 사용해서 명령을 내리면 될 것을 굳이 아이디선택자를 정할 필요가 있는가. 하는 의문이 생길 수 있습니다. HTML페이지에는 단순하게 p 태그가 한곳에만 있으란 법은 없죠. 여러군데 존재할 수 있기 때문에 그 여러개의 p 태그에서 어떤 특정한 p 태그만 색다른 효과를 주려면 이름표(Identification)를 달아주면 이 이름(firstname)을 가진 p 태그만 별도 관리를 할 수 있게 됩니다. 그래서 아이디 선택자가 필요한 것입니다.
이곳 을 클릭하면 위 화면이 나오는 페이지로 이동합니다. 1처럼 이미 스타일이 정해져 있습니다. p 태그 중에서 아이디가 firstname인 태그만 배경색깔을 노란색으로 해라. 라는 명령을 내렸습니다. 스타일시트에서 아이디선택자에게 명령을 내릴때는 HTML페이지에서는 "id"를 사용하지만 스타일시트에서는 선택자 이름 앞에 #를 붙여줍니다. 위처럼 HTML페이지 안의 <head>태그 안에서 <style>이라는 태그로 감싸서 스타일시트를 만드는 것을 임베디드(Embedded)방식의 스타일시트라고 합니다.
그러면 이번에는 1과 같이 hometown이라는 아이디를 가진 태그에 테두리 명령을 내려봅니다. 1픽셀에 점선으로 빨간색입니다. 그랬더니 3과 같이 점선이 생겼습니다.
이번에는 p 태그에 대해서 배경색을 파란색으로 하라는 명령을 내렸습니다. 그러면 HTML페이지에 있는 모든 p 태그에 적용이 됩니다. 그랬더니 두개만 배경색이 들어가고 나머지 하나는 그대로 노란색입니다. 어찌된 일일까요. 이것은 선택자간의 싸움에서 어떤 것이 우세한가하는 아주 중요한 사항입니다. 지금 상황을 보면 p태그와 id는 부모와 자식관계도 아닌 같은 태그안에 위치해서 서로 동등한 자격을 갖고 있습니다. 부모와 자식관계라면 자식이 이기죠. 하지만 동동할 경우에는 어떤 것이 이길까요? 아이디 선택자가 항상 이깁니다(Win). 그래서 이 아이디를 가진 p 태그는 배경색 노란색으로 그대로 남아있게 됩니다. 부모와 자식관계의 의미는 예를 들어 위의 코드에서 <div class="intro">의 div 태그는 p태그의 부모입니다. div 태그에 배경색을 지정하더라도 p태그가 자식이기기 때문에 이부분은 원래의 색이 남아있게 됩니다.
3. 클래스 선택자(Class Selector)
<div class="comment-box">~~</div>
그럼 또 의문이 생깁니다. 태그선택자나 아이디선택자를 사용하면 원하는 목적을 달성하고도 남을 것인데 왜 클래스선택자를 만들었을까.. 아이디는 그 이름을 가진 하나의 태그에 대해서만 명령을 내릴 수 있어서 하나만을 대상으로 합니다. 클래스는 반(Class)전체에 대해서 명령을 내릴 수 있는 기능의 선택자입니다. 예를 들어 웹페이지에는 댓글을 달 수 있는 댓글 박스가 여러 종류가 있을 수 있습니다. 본문의 댓글 박스가 있고 방명록의 댓글박스가 있습니다. 만일 이 두개의 댓글박스가 같은 모양이고 같은 기능을 한다면 굳이 아이디를 정해서 하나씩 별도로 명령을 내릴 필요없이 두개를 묶어서 하나의 반(Class)으로 만들어 관리한다면 담임교사는 한분만 필요하죠. 이 담임선생님에 해당하는 것이 클래스 선택자입니다.
이곳 을 클릭하면 위 화면으로 이동합니다. 클래스에 대해서 명령을 내릴때는 클래스 이름 앞에 점을 찍습니다. 1을 보면 클래스 이름 앞에 점이 있고 점 앞에 p 태그가 있는데 이것은 위 웹페이지에서는 불필요합니다. 위처럼 클래스앞에 태그를 두는 것은 p 태그 중에서 hometown이라는 클래스를 가진 선택자를 의미하거든요. 하지만 그런 선택자는 하나밖에 없으므로 p태그를 추가하는 것은 불필요한 것이죠. 하지만 여기서 알아두어야할 것이 또한 이것입니다. 위처럼 어떤 선택자 앞에 다른 선택자가 있는 경우를 복합 선택자(Compound Selector)라고 하기도 합니다(드림위버에서). 이렇게 하면 더 특정화(More specific)되므로 다른 선택자와 분리하기가 쉬워집니다.
위 사진에서 보듯이 hometown이라는 선택자를 가진 태그는 모두 노란색배경이 되었습니다. 이처럼 클래스는 두개 이상의 태그에 대해 명령을 내릴때 편리합니다.
이번에는 p 태그에 대해서 파란색의 배경색을 입력했습니다. 그랬더니 클래스 선택자가 있는 태그는 그대로 노란색입니다. 그러니 클래스 선택자가 타입선택자를 이기는 것이 됩니다.
그러면 클래스 선택자와 아이디 선택자는 어느것이 우세할까요. CSS의 캐스캐이딩 논리에 의하면 마지막에 선언된 것이 우세하지만 선택자의 싸움에서는 아이디 선택자가 클래스 선택자보다 우세해서 항상 이깁니다. 1의 red 아이디 선택자가 p 태그보다 먼저 선언되었습니다. 캐스캐이딩이란 스타일 시트의 순서상 나중에 선언된 것이 우선 적용된다는 것이죠. 그렇다면 p 태그가 나중에 선언되었기 때문에 파란색이 우선하여야하지만 선택자의 싸움에서는 아이디 선택자가 항상 우세하고 그다음이 클래스 선택자, 그다음이 타입선택자입니다.
4. 아이디 선택자와 클래스 선택자의 선택
그러면 웹페이지 작성시 어떤 선택자를 사용해야할까? 하는 의문이 생깁니다. 아이디 선택자는 웹페이지에서 하나만 사용이 가능합니다. 헤더나 내비게이션 바 같은 페이지에서 하나밖에 없는 것은 아이디 선택자를 사용해도 됩니다. 본문인 content는 어떨까요. 본문은 포스트의 본문도 있고 방명록의 본문도 있고 페이지가 있는 곳이라면 본문이 있기때문에 이 본문에 대해서 선택자를 정할 경우는 클래스로 만드는 것이 편리합니다. 그러니 앞으로 한 곳에만 적용할 것이고 두번다시 사용할 일이 없다고 판단되면 아이디선택자를 사용하고, 두개 이상으로 사용할 것 같다면 클래스 선택자로 선택해야합니다. 나중에 이것을 변경한다면 아주 복잡해질 수도 있으니 처음에 선택을 잘 해야합니다.
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
