[CSS] CSS의 선택자와 캐스케이딩(스타일 적용 우선 순위)

1. 선택자

CSS에서는 선택자라는 것이 있는데, 이는 HTML의 어떤 영역과 요소에 스타일을 적용할지 가리키는 것이다. 크게 태그 Type, Class, ID로 구성되어 있고, 세 가지 모두 각 태그의 인라인 설정(속성)에서 확인할 수 있다.

<parentTag>
  <childTag class="ClassName" id="IDName"></tag>
</parentTag>

 

1) Type

태그명으로 요소를 선택

childTag {
  속성: 속성값;
}

 

2) Class

클래스 속성값. 태그 속 class 속성의 속성값으로, CSS에서는 클래스 바로 앞에 마침표(.)를 찍어서 표현한다.

.ClassName {
  속성: 속성값;
}

 

3) ID

ID 속성값. 태그 속 id 속성의 속성값으로, CSS에서는 ID 바로 앞에 샵(#)을 붙여서 표현한다.

#IDName {
  속성: 속성값;
}

 

4) 같은 부모 선택자 내에서 특정 자식 선택자만 고르고 싶을 때

부모 선택자 내에서 자식 선택자를 선택하고 싶을 때는 띄어쓰기로 연결해서 작성할 수 있다. 예를 들어, Type 선택자에서 부모 태그가 다르면서 서로 태그명이 같을 때, 특정 자식 태그만 선택하려면 아래처럼 작성하면 된다.

parentTag childTag { 속성: 속성값; }

 

5) 모든 태그를 선택하고 싶을 때

모든 태그를 선택자로 선택하여 스타일을 적용하고 싶을 때는 별표(*)를 사용하면 된다.

/* 모든 태그에 속성값이 적용 */
* {
  속성: 속성값;
}

 

 

2. Cascading(캐스케이딩)

HTML에는 많은 요소가 존재하기 때문에, 하나의 요소에 대하여 스타일이 중복되어 선언될 수 있다. CSS에서는 이런 경우에 어떤 스타일을 우선순위로 적용할지 정한 규칙이 있는데, 이를 Cascading(캐스케이딩)이라고 한다.

캐스케이딩을 할 때, 즉 우선 순위를 정할 때 영향을 끼치는 요소 중 크게 3가지를 알아보면 아래와 같다.

1) 선택자

위에서 알아본 선택자 중 어떤 선택자를 가져오느냐에 따라 우선순위가 결정되기도 한다. 그 순위는 Inline style 속성 > id > class > type순을 따른다. 즉, 선택자에 따라 모두 스타일이 선언되어 중복될 경우, Inline style 속성을 따른다.

/* 1순위. HTML의 태그 내에 직접 선언(Inline style 속성) */
<tag class="className" id="idName" style="속성: 속성값1;"></tag>

/* 아래 순으로 2순위, 3순위, 4순위 */
#idName {속성: 속성값2;}
.className {속성: 속성값3;}
tag {속성: 속성값4;}

/* 속성값1이 적용된다. */

 

2) 디테일

해당 요소를 얼마나 구체적으로, 디테일하게 호출하는가도 캐스케이딩에 영향을 끼친다. 같은 요소를 부르더라도 해당 선택자만 작성한 것보다, 부모 선택자까지 명시를 해서 작성하는 것이 우선순위가 더 높다.

parentTag #childID {속성: 속성값1;}
#childID {속성: 속성값2;}

/* 속성값1이 적용된다. */

 

3) 선언 순서

호출한 선택자와 디테일 등이 모두 같은 경우에는 가장 늦게 선언된 스타일이 적용된다.

.class {속성: 속성값1;}
.class {속성: 속성값2;}

/* 속성값2가 적용된다. */

 

4) !important

만약 코드가 너무 복잡하거나, 원하는 속성값이 잘 적용되지 않을 때는 속성값 뒤에 !important를 작성해주는 방법도 있다. 임포턴트는 어떤 스타일보다 우선 순위를 가장 높게 강제 설정하는 방법으로, 아래처럼 속성값 뒤에 추가로 기입해주면 된다.

tag {속성: 속성값1 !important;}
#idName tag {속성: 속성값2;}

/* 속성값1이 적용된다. */