[CSS] 선택자

태그 선택자

• html 에 존재하는 태그의 스타일을 적용하는 선택자
• p{}, body{}

클래스 선택자

• 해당 클래스를 소유하고 있는 태그 스타일을 적용하는 선택자
• ‘.’ 을 사용한다.
• .tempClass {color: blue;}

id 선택자

• 해당 id를 소유하고 있는 태그 스타일을 적용하는 선택자
• ‘#’ 을 사용한다.
• #tempId {color: red;}

태그와 함께쓰는 선택자

• p 태그 중 해당 선택자가 포함된 태그만 적용
• p.tempClass { text-align: center }

그룹 선택자

• 동일한 스타일을 가지는 코드를 줄일 수 있다.
• ‘,’ 사용
• 동일한 스타을을 , 로 리스트화 해서 사용한다.

h1 { text-align: center; color: red; }
p { text-align: center; color: red; }

h1, p { text-align: center; color: red; }

하위 선택자

• 공백을 사용한다.

전체 선택자

• 모든 태그의 스타일에 적용된다.
• • 을 사용한다.

* { 
	color: red
}

인접 선택자 +

• 해당 태그 하단 인접한 태그를 선택한다.
  ul + p {}: ul 하단에서 가장 인접한 p

형제 선택자 ~

• 해당 태그의 모든 형제 태그를 선택한다.
• 형제 태그의 자식 태그들은 선택되지 않는다.
  ul ~ p {}: ul의 형제들 중 p

[깨알 팁]
주석 인덴트 지키면서 적용하기

command + shift + /