[CSS] 선택자 Selector (Type, Class)

1. 선택자 (Selector)

선택자 "Selector"란 말 그대로 선택을 해주는 요소입니다.

 

1.1 Type선택자 (태그 선택자)

[HTML]

<a href="#">A선택자1</a>
<a href="#">A선택자2</a>
<a href="#">A선택자3</a>
<a href="#">A선택자4</a>

Type선택자는 태그에 대한 스타일을 지정합니다.

a태그에 속한 글자들의 폰트 사이즈와 색상을 변경하고싶을 때 아래처럼 선언해주면 됩니다.

 

[CSS]

a { 
  font-size: 20px;
  color: #8492a6;
}

a 태그를 가진 "선택자"를 선택하여

font-size라는 속성(property)에

20px이라는 속성값(property value)으로 지정합니다.

 

1.2 Class 선택자 

태그안에 class로 지정된 요소들을 선택하는것을 지칭합니다.

CSS에서 class의 접근은 .(dot)을 붙이는데,

class사이의 띄어쓰기도 .(dot)을 붙여서 접근할 수 있다.

 

<div class="bamtory">밤토리</div>
<div class="bamtory study">밤토리 학습</div>
<div class="bamtory study finish">밤토리 학습 성공</div>

 

 

1.2.1 어떤 태그든 class가 "bamtory"가 포함된 선택자를 선택하여 스타일을 지정하고 싶을 때

.bamtory {
  font-size: 33px;
}

 

"bamtory"가 있는 class의 font-size가 전체 33px로 결정된다.

 

1.2.2 어떤 태그든 class가 "bamtory study"가 포함된 선택자를 선택하여 스타일을 지정하고 싶을 때

class = "bamtory study"

css = .bamtory.study

.bamtory {
  font-size: 33px;
}

.bamtory.study {
  font-size: 15px;
}

 

"bamtory" class는 33px

"bamtory study" class가 포함된 하위는 15px 적용

 

 

CSS: 선택자(Selector) 이해