[CSS]2. 기본 문법 - 선택자의 종류와 우선순위

목차

1. 기본 문법
2. 전체 선택자
3. 태그 선택자
4. 클래스 선택자
5. id 선택자
6. 선택자의 우선순위

1. 기본 문법

CSS의 기본적인 문법은 다음과 같다. HTML강의를 들었던 분들은 h1태그가 무엇을 의미하는지 알 것이다. h1태그를 모르는 사람들을 위해 이 태그가 무엇인지 간단하게 설명하고 가자면, h1 태그는 주로 제목을 나타낼 때 쓰인다. 아래 코드를 분석해보자면 중괄호 앞의 h1은 선택자, 중괄호의 시작부터 끝부분 까지를 선언 부라고 한다. color와 font-size와 같이 :의 왼쪽 부분에 위치하는 것은 속성 명, :의 우측에 위치한 것은 속성 값이라고 하며 이 두 개를 하나의 속성이라고 부른다. 또한 속성끼리는 아래와 같이 ;로 구분해줘야 한다.

h1{color: yellow; font-size: 5px}
선택자{속성명: 속성값; 속성명: 속성값}

2. 전체 선택자

위의 코드에서 선택자에 해당하는 부분은 h1이다. 선택자를 간단하게 설명하자면 말 그대로 꾸밀 요소를 지정하는 것이라고 생각하면 된다. 선택자는 총 7개가 있다. 선택자 중 가장 넓은 범위를 가지고 있는 선택자가 바로 전체 선택 자이다. 전체 선택자는 다음과 같이 *을 사용한다. 전체 선택자는 HTML 문서의 전체 태그에 CSS 속성을 지정한다. 그래서 주로 웹을 본격적으로 만들기 전에 웹을 초기화한다는 식으로 margin이나 padding값을 설정해주곤 합니다.

*{color: yellow; font-size: 5px}

 

3. 태그 선택자

태그 선택자는 말 그대로 태그를 선택하는 선택자이다. 아래 예제와 같이 CSS속성이 적용될 특정 태그를 CSS속성 앞에다가 적어주면 된다.

h1{color: yellow; font-size: 5px}

 

4. 클래스 선택자

클래스 선택자는 말 그대로 클래스를 선택하는 선택자이다. 아래 예제와 같이 CSS속성이 적용될 특정 클래스를. 을 적은 후에 속성 앞에다가 적어주면 된다. 또한 HTML 강의를 들었다면 클래스가 두 개 이상일 수 있다는 것을 알고 있을 것이다. 만약 클래스에 대한 속성이 아래 예제와 같이 두 개라면, 두 개의 클래스의 속성이 적용이 된다. 따라서 아래와 같이 a, b클래스가 한 요소에 대해 속성을 적용했다면 마지막으로 실행되는 빨간색이 나오게 된다.

 

See the Pen css-class by junjason-dev (@junjason-dev) on CodePen.

 

 

 

 

5. id 선택자

id 선택자는 말 그대로 id를 선택하는 선택 자이다. 아래 예제와 같이 CSS속성이 적용될 특정 id앞에 #을 붙인 후에 CSS속성 앞에다가 적어주면 된다.

#id{color: red; font-size: 5px;}

5-1. id와 클래스의 차이

HTML을 어느 정도 알고 있는 사람이라면 id와 class의 차이를 알고 있겠지만, 모르는 사람들을 위해 설명하자면, class는 한 페이지 내에서 여러 번 사용이 가능하지만, id는 한 페이지 내에서 한 번만 사용이 가능하다. 

 

6. 선택자의 우선순위

지금까지 우린 총 4가지의 선택자에 대해서 배웠다. 만약 한 개의 요소에 두 개의 선택자가 있다면 어떤 것이 우선시가 될까? 이를 위해 선택자들은 우선순위를 계산하는 점수가 있다. 점수가 높을수록 더 우선시되는 것이다. 따라서 만약 한 요소에 대해 클래스 선택자와 id선택자가 적용되어 있다면, 100>10 이므로 id선택자의 속성이 적용된다. 또 한 가지 알아야 하는 것은 만약 점수가 같다면 마지막으로 선언된 것의 속성이 적용된다. 

 

	전체 선택자(*)	태그 선택자	클래스 선택자(.)	id 선택자(#)	!important
점수	0	1	10	100	10000

마지막 열을 보면! important라는 것이 있다. important는 말 그대로 모든 곳에서 최우선으로 되도록 만들어준다. 아래 코드에서 원래 대로라면 id선택자는 10점, 태그 선택자는 1점 이므로 id 선택자의 속성인 빨간색이 되는 것이 정상이지만,! important를 태그 선택자의 color 속성에 줌으로써 10001점이 되어 우선순위가 바뀌게 된 것이다.! important는 남발할 시에 나중에 우선순위에 혼동을 생길 수 있으니 되도록이면 안 쓰는 것을 추천한다.

 

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

 

이번 시간에는 전체, 태그, 클래스, 그리고 id 선택자에 대해서 알아보았다. 선택자는 이것들을 제외하고도 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자, 가상 선택자 등등 다양한 선택자들이 있다. 다음 시간에는 이러한 선택자들을 알아보도록 하자.