[CSS] 선택자 정리

 

전체 선택자(universal selector)

* {
attribute: value
}

 

타입 선택자(type selector)

p {
font-style: italic;
}

 

클래스 선택자(class selector)

.class {
 border: 1px solid black;
}

 

id 선택자(id selector)

- 문서에서 한 번만 적용 가능

- 주로 문서 레이아웃 스타일 지정 or 웹 요소에 자바스크립트 프로그램 사용하면서 요소 구별시 사용

#id {
 width: 100px;
 margin: 10px;
 padding: 10px;
 border: 1px solid black;
}

 

그룹 선택자

h1, p {
 text-align: center;
}

 

CSS 우선순위

- 사용자 스타일 -> 제작자 스타일 -> 브라우저 기본 스타일

- !important > inline > id > class = attribute > tag

- 나중에 작성한 스타일이 먼저 작성한 스타일 덮어씀

 

---

 

 

 

공부용 자료

CSS Diner

CSS Selectors Reference

CSS 선택자 - Web 개발 학습하기 | MDN

 

 

참고 자료

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (한 권으로 끝내는 웹 기본 교과서)