CSS - 1 [선택자]

CSS Cheat Sheet

CSS(Cascading Style Sheets)란?

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다.

 

전체 선택자 - 모든 요소에 적용

* {}

 

태그 선택자 - 태그를 사용하는 요소에 스타일을 적용 ex) H1 태그 사용 시

H1 {}

 

ID 선택자 - id속성을 가진 특정 부분에 스타일을 적용

#id명 {}

id 에 줄 경우 아래처럼 #을 맨 앞에 붙여 사용하며 원칙적으로 하나의 객체에만 적용할 수 있다.

 

Class 선택자 - class 이름을 가진 특정 집단의 요소에 스타일을 적용

.class명 {}

class에 줄 경우 아래처럼 .을 맨 앞에 붙여 사용하며 여러 객체에 적용할 수 있다.

 

 

그룹 선택자 - 여러 개의 요소를 ,로 연결해 스타일을 적용

H1, P {}

 

자손 선택자 - 하위의 모든 요소에 스타일을 적용, 띄어쓰기 사용

ul a {}

 

자식 선택자 - 하위의 자식요소에 스타일을 적용, > 사용ul > a {}

 

가상 클래스 선택자 - 가상 클래스를 임의로 지정하여 선택하는 방법, 마우스가 들어왔을때 등의 특정 상태에만 적용되는 가상의 클래스를 지정

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을때
• :active - 마우스를 클릭했을때
• :focus - 포커스가 들어왔을때