CSS 선택자(Selector)란?
선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다. 먼저 CSS에서 스타일이 어떤 방식으로 정의 되는지 알아보자.
Rule Set
Rule Set은 HTML페이지 안의 특정 요소들을 어떻게 렌더링할 것인지 브라우저에게 알려주는 CSS문장이다. 스타일 규칙이라고도 불리는 이 문장은 스타일에 관한 규칙들을 집합처럼 나타낸다.
이런 문장들을 한군데 모으면 스타일 시트를 이루게 되어 많은 수의 스타일 규칙들을 관리하기가 쉬워진다.
선택자 Selector
위의 그림을 보면 Rule Set 제일 앞 부분의 선택자 요소를 볼 수 있는데, 왼쪽 중괄호'{'가 나오기 전의 부분 모두가 선택자이다. 선택자는 Rule Set의 영향을 받는 HTML페이지 안의 특정 element들을 선택해서 선언블록의 내용을 적용시켜 준다.
선택자(Selector)의 종류
디자인 요소를 의도에 알맞게 적용하기 위해서는 많은 종류의 선택자를 잘 혼합해서 사용하는 것이 중요하다.
전체 선택자 (Universal Selector)
/* CSS */
* {margin : 0 ; text-decoretion : none;}전체 선책자는 HTML페이지 내부의 모든 요소에 같은 CSS속성을 적용한다. 그렇기 때문에 보통처럼 Margin이나 padding값을 초기화하는 등 기본값을 정해둘 때 사용한다. 하지만 이를 사용하면 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩 속도가 느려질 수 있다. 따라서 자주 사용하지 않는 것이 좋다.
태그 선택자 (Type Selector)
/* CSS */
p{background : bule; color : red;}
/* HTML */
<p>태그 선택자</p>
<div>태그 선택자</div>태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자이다. 위의 예시를 보면 CSS에서 < p >태그에 대한 스타일만 지정이 되어있으므로 지정해준 스타일이 적용되지만, < div >태그에는 개발자가 지정해주는 스타일이 적용되지 않는다.
클래스 선택자 (Class Seletor)
/* CSS */
.class1 {background : bule; color : red;}
div.class2 {background : green; color : yellow;}
/* HTML */
<p class="class1">클래스 선택자</p>
<p class="class2">클래스 선택자</p>
<div class="class2">태그 선택자</div>클래스 선택자는 주어진 값을 class 속성값으로 가진 HTML요소를 찾아 선택한다. 이때 선택하려는 속성값 앞에 마침표를 추가해서 작정한다.
위의 예시 코드에서 class1이라는 class속성값을 가진 모든 태그를 선택하여 CSS를 적용 시키게 되고, 두번째 스타일 규칙 처럼 마침표 앞에 태그를 붙여주면 범위를 그 특정 태그에 국한한다. (class2는 div태그에 한해 class2를 가지고 있는 태그에 class2의 CSS를 적용시킨다)
그러므로 < p >태그는 class 속성값이 class2임에도 선택되지 않는다.
ID 선택자 (ID Selector)
/* CSS */
#id1 {background : bule; color : red;}
div#id2{background : green; color : yellow;}
/* HTML */
<p id="id1">ID 선택자</p>
<p id="id2">ID 선택자</p>
<div id="id2">ID 선택자</div>ID선택자는 마침표대신 #를 사용하고 class속성이 아닌 id속성을 사용하는 것을 제외하곤 클래스 선택자와 매우 유사하다. 따라서 class선택자와 유사한 결과가 나오게 된다.
하지만 이 둘 사이엔 어떤 문자를 사용하느냐 보다 더 중요한 차이점이 있다.
Class Selector & ID Selector
비슷하게 사용되는 두 선택자 중 어떤 것을 사용해야 할지 고민에 빠지는 경우가 있다. 이럴 때는 아래의 4가지를 고려하면 된다.
한 페이지 내에서 여러 번 반복될 필요가 있는 스타일은 Class Selector를 사용하고 단 한번 유일하게 적용될 스타일은 ID Selector를 사용하는게 좋다.
- class 속성은 어떤 분류안에 포함된 요소의 특성을 정의하는데 사용된다.
- id 속성은 어떤 요소에 대해 유일한 특성을 정의한다.(HTML 문서에서 특정 id속성 값은 오직 하나만 있어야 한다.)
class Selector는 글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 지정하고 ID Selector는 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용한다.
class속성은 속성값을 두 개 이상 가질 수 있다. 그래서 클래스 선택자를 사용하면 한 태그 내에서도 여러 종류의 스타일 규칙을 적용할 수 있다.
ID Selector의 우선순위가 Class Selector의 우선순위보다 높다. 우선으로 적용되어야 할 스타일을 ID선택자를 사용하여 정의한다.
선택자(Selector)의 우선순위
위의 3가지의 선택자를 혼합해서 사용한다면?
<head>
<style>
span{
color: blue;
}
.menu {
color: red;
}
#me {
color: green;
}
</style>
</head>
<body>
<span class="menu" id="me">무슨 색일까요?</span>
</body>현재 예시코드에 있는 span태그에는 세 가지 선택자가 적용되어 있다. color값을 각각 다른 적용하고 있는데 span태그 안에 있는 텍스트의 색은 무슨 색이 될까?
이런 경우 Selector간에는 적용의 우선순위가 있다.
자세한 CSS 적용의 우선순위
1. 속성 값 뒤에 !important를 붙인 속성
2. HTML의 각 태그에서 style을 직접 지정한 속성
3. ID Selector
4. class Selector
5. tag Selector
6. 상위 객체에 의해 상속된 속성
따라서 위의 경우 id선택자가 우선으로 적용되어 텍스트의 색은 green이 된다.
이중에서 어떤 것을 사용해야 할까?
1. 속성 값 뒤에 !important를 붙인 속성
1번은 강제하는 것인데 이것은 CSS고드의 구조를 무시하는 방법이기 때문에 사용하지 않는것이 좋다. 그런데 가끔 라이브러리를 가져다 쓸 때, 다른 CSS 속성을 적용하고 싶은데 다른 선택자들로는 안 되는 경우 가끔 이 !important를 사용할 때가 있다고 한다.
2. HTML의 각 태그에서 style을 직접 지정한 속성
2번은 크게 신경써도 되지 않는 점이 CSS코드를 HTML과 분리해서 사용하는 경우가 많기 때문에 사실상 사용할 일이 많이 없다.
3~6. 나머지
실제로 나머지 3~6번을 가장 많이 사용하는데 항상 순위가 낮은 것부터 사용하고 예외사항을 적용하고 싶을 때 한 단계 위의 우선순위를 적용한다고 생각하면 된다. 이렇게 했을 때 가장 이상적이고 꼬일 걱정을 하지 않는 CSS 코드를 설계할 수 있게 된다.
전체에 적용될만한 속성은 5~6번에서 사용하게 되고 집단 단위의 예외상황을 class selector로 처리하고 그 다음 개별적인 예외상황을 id selector로 처리한다.
3번의 경우 id는 한 HTML파일 내에서 유일한 요소를 지칭한다. 따라서 id selector가 적용되는 element는 유일한 것이다. 따라서 최후의 예외사항을 적용할 때에 사용된다.
