CSS선택자 - 1

CSS 선택자

스타일 줄 HTML 요소를 찾거나 선택하는 기능.

CSS 선택자 종류

• 단순 선택자 (타입, ID, 클래스를 기준으로 요소 선택)
• 조합선택자(+,>...) 
• 가상 클래스 선택자(:hover,:after... )
• 가상 요소 선택자(::after, ::before..) 
• 속성 선택자 ([title="this"], [attribute~="value"]..)

 

단순 선택자 

종류 : 타입선택자 / ID 선택자 /  클래스 선택자

 

 

 

 

타입선택자

html 요소 이름을 기반으로 선택 

p, span, b, h1, h2, .... 

 

 

 

html

<p> html 파일의 p 요소에 해당 스타이 적용된다 </p>

css

p {
  text-align: left;
  color: red;
}

 

 

클래스 선택자

HTML 요소 중에 같은 class 이름이 있는 요소를 선택 특정 클래스의 요소를 선택

지정된 class 이름앞에 . 을 찍어 준다. 

 

html

<div class="class_name"> html 파일의 class_name을 가진 요소에 해당 스타이 적용 </div>

css

.class_name {
  text-align: center;
  color: red;
}

*클래스 이름 숫자로 쓰면 NO! 

 

 

 

ID 선택자

HTML 요소 중에 같은 id 이름이 있는 요소를 선택 특정 클래스의 요소를 선택

지정된 id 이름앞에  #을 찍어 준다. 

 

html

<div class="id_name"> html 파일의 id_name을 가진 요소에 해당 스타이 적용 </div>

css

#id_name {
  text-align: center;
  color: red;
}

*ID 이름 숫자로 쓰면 NO!

*ID 이름은 하나의 고유 요소만 가리킴. 

 

 

전체 선택자

범용 선택기 (*)는 페이지의 모든 HTML 요소를 선택합니다.

* {
  margin: 0;
  padding: 0;
}

*페이지 모든 요소에 적용하므로 느려질 수 있다.