![[CSS] 기본 선택자 정리 (CSS Selector)](https://i0.wp.com/www.walterz.net/wp-content/uploads/2017/11/5876140014_e301ff1b3f_z.jpg?resize=640%2C478&ssl=1)
CSS를 처음 접할 때 가장 어려운 것은 선택자입니다. 그런데 선택자는 CSS에서 매우 중요하기 때문에 CSS를 배울 때 선택자에 대해서는 반드시 알아두어야 합니다. 선택자는 HTML DOM 객체를 계층적으로 선택할 때 사용됩니다. CSS 속성은 선택된 객체에 대해서만 적용됩니다. 이 글에서는 CSS 문서를 작성할 때 필요한 기본적인 선택자에 대하여 알아보겠습니다.
CSS Selector 란 무엇인가?
CSS 선택자(CSS Selector)는 스타일을 지정하고자 하는 HTML DOM 요소를 선택할 때 사용되는 CSS 규칙입니다. HTML 태그에 스타일을 지정할 때, 어떠한 요소에 어떠한 스타일을 지정하겠다! 이렇게 특정 요소를 선택할 수 있는 방법이 있어야겠죠? 그렇지 않다면 HTML 스타일은 정말 뒤죽박죽 될 것입니다.
예제 소스코드와 함께 CSS 선택자를 이해하기 쉽게 설명하도록 하겠습니다.
<html>
<head>
<title>스타일 테스트 페이지</title>
</head>
<body>
<div class="article">
<a href="http://www.naver.com" target="_blank">네이버로 이동</a>
</div>
<a href="https://www.walterz.net/" target="_blank">내 블로그로 이동</a>
</body>
</html>
어떤 분이 필자에게 질문했습니다. 블로그를 운영하고 있는데 블로그 전체 링크가 아니라 블로그 본문 내부에 있는 링크 스타일만 바꾸고 싶다고 말입니다. 위 예제는 바로 그 분을 위한 예제입니다.
위 예제에서 본문은 <div class=”article”> 와 </div> 사이에 있습니다. 모든 블로그는 본문 영역이 따로 지정되어 있는데, 그 구조는 위 예제와 비슷합니다. 블로그 스킨 HTML 소스에서 본문이 표시되는 부분을 찾은 후, 해당 본문 영역의 class 또는 id 이름을 찾아낸 후 그 영역에 CSS 스타일을 지정하면 됩니다.
위 예제에서 본문이 표시되는 영역은 article class 인 것을 확인할 수 있습니다. CSS에서는 class 를 선택할 때 점(.)을 사용하므로 본문 영역을 선택하기 위해서는 .article 와 같이 CSS에 입력하면 됩니다.
또한 본문 내부의 링크 스타일을 변경할 때에는 링크의 태그가 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와 달리 id는 해당 HTML 소스코드 내에 단 한 개만 존재해야 합니다.
그러나 같은 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 영역 내부의 article class 영역을 선택합니다. 이때 다른 영역에 있는 article class 영역에는 아무런 영향을 미치지 않습니다.
마무리 – CSS 중급을 향하여
CSS에는 위에서 설명한 것 이외에도 매우 다양한 선택자가 있습니다. 특히 ul, ol, li와 같이 HTML5에서 자주 사용되는 HTML 태그를 사용할 때에는 1단계 하위에 있는 DOM 객체만을 선택해주는 > 와 같은 선택자가 필수적입니다.
또한 맨 마지막에 있는 DOM 객체만 선택해주는 :last-child 선택자와 맨 처음에 있는 DOM 객체만 선택해주는 :first-child 선택자도 있습니다. 이러한 선택자들을 사용하면 자바스크립트 또는 복잡한 HTML 없이도 멋있는 홈페이지를 만들 수 있습니다.
이 글은 기본적인 선택자를 다루는 것이 목적이었으므로 여기에서 마치도록 하겠습니다. 다른 CSS 선택자에 관한 글을 추후 작성하도록 하겠습니다.
[…] 위의 예제는 링크 텍스트의 색상을 빨간색으로 변경하고 마우스 커서 아래에 있는 링크 텍스트의 색상은 보라색으로 변경합니다. 위와 같이 선택자를 a로 하는 경우에는 페이지 내의 모든 링크에 해당 속성이 적용됩니다. 만약 특정한 위치에 있는 링크의 속성만 변경하고 싶다면 여러 개의 태그 및 선택자를 이용하면 됩니다. CSS의 선택자를 이용하는 방법은 다음 글을 참고하시기 바랍니다. → 2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory […]
[…] 이 사이트에서 그라디언트 CSS 소스코드를 생성했다면 블로그에 그라디언트 효과를 적용시키는 일만 남았습니다. CSS를 다루는 가장 기본적인 지식만 가지고 있으면 됩니다. 여기에서 반드시 알아야 하는 것은 CSS 선택자에 관한 기본 지식입니다. 이와 관련된 내용은 다음 글에서 자세하게 설명하고 있으니 참고바랍니다. → 2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory […]
[…] jQuery 사용법 중 선택자에 관한 것은 CSS에서의 선택자 사용 방법과 동일하기 때문에 CSS 선택자에 대해서만 잘 알고 있으면 jQuery 사용 방법을 배우는 것은 크게 어렵지 않습니다. CSS 선택자에 대해서는 다음 글에서 자세하게 설명하고 있으니 참고바랍니다. → 2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory […]
[…] 관련 글 2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory […]
[…] 글 2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory 2017/11/16 [CSS] 특정한 위치에 있는 DOM 요소를 지정하는 방법 by Walter […]