Erzsamatory Weblog


CSS를 처음 접하는 사람이 가장 어려워 하는 것은 Selector 즉, 선택자에 관한 것입니다. 하지만 CSS에서 선택자는 매우 중요하기 때문에 CSS를 만지고자 한다면 선택자에 대해서는 반드시 알아두어야 합니다. 이 글에서는 CSS 파일이나 HTML 스타일을 수정하거나 만들 때 필요한 매우 기초적인 선택자에 대해서 알아볼 것입니다.



CSS Selector 란 무엇인가?


이 글을 보고 있는 분이라면 분명히 웹프로그래밍에 관심이 많거나 본인의 블로그를 운영하고 있을 것입니다. 하지만 HTML과 웹프로그래밍에 관한 지식이 그렇게 많지는 않을 것입니다. 따라서 이 글에서는CSS Selector에 관해서 매우 간단하게 설명하도록 하겠습니다. 간단하게 말해서 CSS 선택자는 스타일을 지정하고자 하는 HTML DOM 요소를 선택할 때 사용되는 CSS의 규칙입니다.

HTML 태그에 스타일을 지정할 때 어떠한 요소에 어떠 어떠한 스타일을 지정하겠다! 이렇게 해야 해당 요소에만 스타일이 적용되겠죠? 이런 것이 없다면 HTML 스타일은 정말 뒤죽박죽 될 것입니다. 더 쉽게 설명하자면, CSS 선택자는 이름이 부여된 각각의 HTML DOM 객체를 선택할 때 사용되는 규칙이라고 할 수 있습니다.

한 가지 예를 들어 설명하도록 하겠습니다. 아래와 같은 HTML 소스가 있다고 가정합시다.

<html>
<head>
   <title>스타일 테스트 페이지</title>
</head>
<body>
    <div class="article">
        <a href="http://www.naver.com" target="_blank">네이버로 이동</a>
    </div>
    <a href="http://www.erzsamatory.net" target="_blank">내 블로그로 이동</a>
</body>
</html>


어떤 분이 저에게 질문하셨습니다. 블로그를 운영하고 있는데 블로그 전체 링크가 아니라 블로그 본문 내부에 있는 링크 스타일만 바꾸고 싶다고 말입니다. 위 예제는 바로 그 분을 위한 예제입니다. 위 예제에서 본문은 <div class="article"> 와 </div> 사이에 있는 것들입니다. 모든 블로그는 본문 영역이 따로 지정되어 있는데, 그 구조는 위 예제와 동일하다고 보면 됩니다. 블로그 스킨 HTML 소스에서 본문이 표시되는 부분을 찾은 후, 해당 본문 영역의 class 또는 id 이름을 찾아내면 됩니다.

위의 예제에서는 본문이 표시되는 영역의 class가 article 인 것을 쉽게 확인할 수 있습니다. CSS에서는 class 를 선택할 때 점(.)을 사용하므로 본문 영역을 선택하기 위해서는 .article 와 같이 입력하면 됩니다. 또한 본문 내부의 링크 스타일을 변경할 때에는 링크의 태그가 a 이므로 .article a 이와 같은 방법으로 입력하면 됩니다. CSS에서 HTML 태그 전체에 스타일을 지정할 때에는 아무런 접두사를 붙이지 않습니다. .article a 이렇게 지정하면 article class 로 설정된 박스 내부의 모든 링크의 스타일을 바꾼다는 것을 의미합니다.

클래스를 선택할 때 사용되는 CSS 선택자


위 예제를 통해서도 설명했듯이 CSS 에서는 클래스가 지정된 HTML 태그를 선택할 때에는 점(.) 을 사용합니다. 아래는 클래스가 지정된 HTML 태그를 선택하는 CSS 선택자의 예시입니다.

.article { background-color: #ccc; }
.article a { text-decoration: none; }
.article .commentBox { border: 1px solid #aaa; padding: 10px; }


CSS에서 선택자는 띄어쓰기를 통하여 그 단계를 구분합니다. 위 예시에서 .article .commentBox 는 article 클래스 박스 내의 commentBox 클래스 박스의 스타일을 지정할 때 사용됩니다. 즉, article 클래스 박스가 아닌 다른 위치에 있는 commentBox 클래스 박스에는 해당 스타일이 적용되지 않습니다. .article a 역시 마찬가지로 다른 영역에 있는 링크에는 스타일이 적용되지 않습니다.


아이디(ID)를 선택할 때 사용되는 CSS 선택자


HTML에서는 각종 태그에 이름을 부여할 때 클래스(class) 또는 아이디(ID)를 사용합니다. class 는 주로 CSS 스타일을 지정할 때 사용되고 ID는 자바스크립트를 사용할 때 주로 사용됩니다. class 는 한 HTML 소스 내에 같은 것이 여러 개가 있어도 되지만, ID는 해당 HTML 소스 내에 같은 이름이 단 한 개만 존재해야 합니다. 바로 이러한 점이 class 와 ID의 가장 큰 차이점입니다. 하지만 같은 ID가 여러개 있다 하더라도 웹브라우저에서 이것을 오류로 잡아내지는 않습니다. 단지, 웹표준에 어긋나는 코딩일 뿐입니다. 또한 자바스크립트를 통한 코딩에 약간의 어려움이 따르겠죠.

CSS에서 ID가 부여된 객체를 선택할 때에는 샵(#)을 사용합니다. 아래는 ID가 지정된 HTML 태그를 선택하는 CSS 선택자의 예시입니다.

#container { padding: 10px; }
#container .article { background-color: #ccc; }
#container .article a { text-decoration: none; }
#footer { background-color: #000; }


클래스를 지정할 때와 다른 점은 점(.)이 아닌 샵(#)을 사용한다는 것 뿐입니다. 따라서 사용 방법은 클래스를 선택할 때와 같습니다. HTML DOM 객체의 단계를 지정할 때 띄어쓰기를 사용하는 것 역시 똑같기 때문에 #container .article 은 container 로 ID가 부여된 박스 내부의 article class 가 적용된 박스를 선택합니다. 이 경우에는 다른 영역에 있는 article class가 지정된 박스에는 아무런 영향을 미치지 않겠죠.


마무리 - CSS 중급을 향하여


CSS 에는 위에서 설명한 것 이외에도 매우 다양한 선택자가 있습니다. 매우 다양하다고 할 수 있을지는 모르겠지만, 확실한 건 위에서 설명한 것만으로는 고급스러운 CSS 소스를 구현할 수는 없다는 것입니다. ul, ol, li와 같이 HTML5에서 잘 사용되는 HTML 태그를 사용할 때에는 바로 아래쪽에 있는 DOM 객체를 선택해주는 > 와 같은 선택자가 필수적입니다.

또한 맨 마지막에 있는DOM 객체만 선택해주는 :last-child 선택자와 맨 처음에 있는 DOM 객체만 선택해주는 :first-child 선택자도 있습니다. 이러한 것들을 사용하면 자바스크립트 또는 복잡한 HTML 없이 매우 간단하게 멋있는 홈페이지를 만들 수가 있습니다.

이 글에서는 매우 기초적인 것만 다루는 것이 목적이었으므로, 이러한 것들에 대해서 설명하지는 않았습니다. 더욱 고급스러운 CSS 선택자에 관한 내용은 다음 글을 통해서 자세하게 설명하도록 하겠습니다.
http://www.erzsamatory.net/trackback/104

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기