티스토리 뷰

CSS Selector

지난번에는 CSS의 구문 구성을 알아보았다. 다시 복습하면 CSS 문법은 선택자(Selector)와 선언 블록(declaration block)으로 구성됨을 기억하자. 이번 시간에는 선택자에 대해 좀 더 자세히 알아보고자 한다.

CSS 선택자(Selector)는 HTML 요소(Element)를 요소 이름(element name), ID, 클래스(class), 속성(attribute) 등에 따라 찾거나 선택하는데 사용된다. 각각의 경우에 따른 선택자 사용법을 알아보자.

요소 이름 선택자 (element name Selector)

요소 선택자는 요소 이름을 기반으로 요소를 선택한다. 한글로 요소라고 써서 좀 헷갈릴 수 있는데 HTML의 태그 요소를 지칭한다. 아래와 같이 쓰면 페이지의 모든 <p> 요소를 선택할 수 있다. (이 경우 모든 <p> 요소는 가운데 정렬되며 빨간색 텍스트 색상으로 표시된다).

{
    text-align: center;
    color: red;
}
cs

ID 선택자 (ID Selector)

ID 선택자는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택한다. 요소의 id는 페이지 내에서 고유하므로 따라서 id selector는 하나의 고유한 요소를 선택하는데 사용되는 선택자이다.

css 문법에서 특정 ID가있는 요소를 선택하려면 해시(#) 문자 다음에 요소의 ID를 쓴다. 아래 스타일 규칙은 id="comment"인 HTML 요소에 적용된다.

#comment {
    text-align: left;
    color: white;
}
cs

클래스 선택자 (Class Selector)

클래스 선택자는 특정 클래스 속성이 있는 요소를 선택한다. 특정 클래스가 있는 요소를 선택하려면 마침표(.) 문자와 그 뒤에 클래스 이름을 쓴다.

아래 예제에서 class = "center"인 모든 HTML 요소는 빨간색으로 중앙 정렬된다.

.center {
    text-align: center;
    color: red;
}
cs

특정 HTML 요소만 클래스의 영향을 받도록 지정할 수도 있다. 아래 예제에서 class="center"인 <p> 요소만 가운데 정렬된다.

p.center {
    text-align: center;
    color: red;
}
cs

또한 HTML 요소는 둘 이상의 클래스를 참조 할 수도 있다. 아래 예제에서 <p> 요소는 class = "center"및 class = "large"에 따라 스타일이 지정된다.

<p class="center large">This paragraph refers to two classes.</p>

참고로 클래스 이름은 숫자로 시작할 수 없다.

그룹화 선택자 (Grouping Selectors)

다음과 같이 똑같은 스타일 정의들이 있는 요소들이 반복되는 경우

h1 {
    text-align: center;
    color: red;
}
h2 {
    text-align: center;
    color: red;
}
{
    text-align: center;
    color: red;
}
cs

코드를 최소화하기 위해 선택자를 그룹화하는 것이 좋다. 선택자를 그룹화하려면 각 선택자를 쉼표로 구분한다. 아래 예제에서 위 코드의 선택자를 그룹화했다.

h1, h2, p {
    text-align: center;
    color: red;
}
cs

CSS 주석

주석은 코드를 설명하기 위해 사용되며 /*로 시작하고 */로 끝난다. 한줄 혹은 여러 줄에 걸쳐있을 수도 있다. 꼼꼼히 달아두면 나중에 소스 코드를 편집 할 때 도움이 된다. 당연한 말이지만 주석은 브라우저에서 무시됨.

{
    color: red;
    /* This is a single-line comment */
    text-align: center;
}   
/* This is
a multi-line
comment */
cs

정리

css의 요소는 CSS의 선택자를 이용해서 선택할 수 있는데, 기본적인 것들에는 ID, 요소 이름, 클래스가 있다. 그 외에도 속성과 기타 선택자는 다음 글에서 살펴보자.