선택자 구문( selector statement )
CSS는 html 페이지 안에 있는 원소( element )들의 표현 방식을 지정하는 언어입니다.
그런데, 그렇게 하려면 적어도 두 개 질문에 대답할 수 있어야 합니다.
첫 번째는 "어떤 원소를 대상으로 할 것인가"이고, 두 번째는 "그 대상의 표현 방식을 어떻게 변경할 것인가"하는 것입니다.
예를 들어, 다음과 같은 html 코드가 있습니다.
여기에 있는 세 개의 <h1> 원소의 색상을 붉은색으로 변경하려면, CSS는 다음과 같은 구문을 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS style -->
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h1>selector</h1>
<h1>article</h1>
</body>
</html>
다음에서, 이 html 코드의 결과를 볼 수 있습니다.
See the Pen Untitled by 반쪽불씨 (@ttomujxj-the-bold) on CodePen.
위에서 CSS 탭을 보면, 다음과 같은 코드를 볼 수 있습니다.
h1 {
color : red;
}이 코드의 의미는 모든 <h1> 원소의 색상을 붉은색으로 바꿔야 함을 나타냅니다.
여기서, 변경할 대상을 가리키는 h1 을 선택자( selector )라고 합니다.
그리고, 중괄호{ } 안의 문장은 선택자 h1 이 가리키는 원소의 표현 방식을 지정하는 문장으로, 이를 효과 혹은 선언( declaration )이라고 합니다.
이 선언은 다시 속성( Property )과 값( Value )으로 나눠집니다.
이러한 선언의 속성( property )은 원소를 표현하는 세부 옵션이라고 할 수 있습니다.
만약, <h1> 원소의 배경 색상을 변경하려면 다음과 같은 선언을 추가할 수 있습니다.
h1 {
color: red;
background-color: burlywood; // 배경색 설정
}여기서, 위의 burlywood는 CSS에서 간편하게 사용할 수 있도록, 미리 약속된 색상의 값을 나타내는 문자열입니다.
원소를 그룹으로 묶는 class 속성
위의 예에서, 첫 번째와 두 번째 <h1> 원소의 색상만 blue로 하고, 나머지 하나는 이전과 같이 red로 하고 싶을 수도 있습니다.
이럴 때 사용할 수 있는 html 속성으로 class가 있습니다.
이 class 속성은 html의 원소가 class에서 정한 이름의 그룹에 속한다는 것을 나타냅니다.
이 class 속성을 사용하는 방법은 다음과 같습니다.
<body>
<!-- class 속성 사용 -->
<h1 class="grp1">CSS</h1>
<h1 class="grp1">selector</h1>
<h1>article</h1>
</body>위에서, 첫 번째와 두 번째 <h1> 원소는 grp1 이라는 클래스로 그룹 지어집니다.
이렇게 묶인 원소들을 CSS에서 선택하려면 ".class 이름" 형태의 선택자( selector )를 사용합니다.
.grp1 { /* class 선택자 */
color: blue;
}
이제, grp1 클래스에 속한 원소들은 blue 색상을 가지게 될 것입니다.
See the Pen first2 by 반쪽불씨 (@ttomujxj-the-bold) on CodePen.
그리고, 이러한 class 속성의 값은 여러 개를 가질 수 있습니다.
이번엔, 두 번째와 세 번째 <h1> 원소를 grp2 class로 묶어 보겠습니다.
여기서 주목할 것은, 두 번째 <h1> 원소는 두 개의 class를 가졌다는 것입니다.
<h1 class="grp1">CSS</h1>
<h1 class="grp1 grp2">selector</h1>
<h1 class="grp2">article</h1>
이 grp2 class에 속하는 원소들은 orange 색상으로 나타내겠습니다.
See the Pen Untitled by 반쪽불씨 (@ttomujxj-the-bold) on CodePen.
위에서 두 번째 원소는 class 이름을 2개 가지고 있습니다. ( grp1 과 grp2 )
그리고, 이 두 클래스에 대한 선택자 구문도 두 개 있습니다.
그러므로, 두 번째 <h1> 원소를 blue와 orange 색상 중 어떤 색상으로 표시해야 되는가 라는 결정을 내려야 합니다.
즉, 클래스 이름이 여러 개인 경우, 우선권이 필요한 것입니다.
여기서, 두 가지 알 수 있는 사실이 있습니다.
그것은 CSS에서 나중에 선언된 선택자가 더 높은 우선권을 갖는다는 것입니다.
만약, 다음과 같이 html에서 선언된 클래스의 순서대로의 우선권이 주어졌다면, .grp2 선택자에 우선권이 있으므로 오렌지 색상으로 표시되어야 할 것입니다.
<h1 class="grp1 grp2">selector</h1>그렇지만, 두 번째 원소는 blue 색상으로 표시되었습니다.
이것은 .grp1 의 우선권이 더 높다는 것이고, 이 순서는 CSS에 선언된 선택자( selector )의 순서입니다. ( CSS에서는 .grp1 이 나중에 선언되었습니다. )
.grp2 {
color: orange;
}
.grp1 { /* grp2 보다 우선권이 있음 */
color: blue;
}
h1 { /* class 선택자보다 우선권이 없음 */
color: red;
}그리고, 같은 선택자라도, html 태그 선택자( 여기선 h1 )보다, 클래스 선택자의 우선권이 높다는 것입니다.
CSS에서 h1 은 가장 나중에 선언되었음에도 불구하고, red 색상을 가진 <h1> 원소가 하나도 없다는 것이, 이것을 말하고 있습니다.
유일한 원소임을 나타내는 id 속성
html 원소의 class 속성이 여러 개의 원소를 묶기 위한 것이라면, id 속성은 페이지 내에서 유일한 원소임을 알리기 위한 것이라고 할 수 있습니다.
그러므로, id 선택자( selector )는 class 선택자나 html tag 선택자 보다 높은 우선 순위를 갖고 있습니다.
위의 예에 이어서, 두 번째 <h1> 원소에 다음과 같은 id 속성을 부여하였습니다.
<h1 class="grp1 grp2" id = "unique">selector</h1>그리고, 이 원소의 표현을 변경하기 위해 id 선택자를 추가하였습니다.
id 선택자는 아래와 같이 "#id 이름" 형태를 가집니다.
#unique { /* id 선택자 */
color: greenyellow;
}
추가된 내용은 아래에서 확인할 수 있습니다.
See the Pen Untitled by 반쪽불씨 (@ttomujxj-the-bold) on CodePen.
위에서 보듯이, id 선택자는 다른 선택자들보다 우선 순위를 갖고 있습니다.
그래서, 두 번째 <h1> 원소가 greenyellow 색상으로 표현되는 것입니다.
