CSS 선택자의 우선순위, 명시도 계산법, 박스 모델링

CSS를 배워보자

4. 선택자의 우선순위

CSS는 중복선언을 허용한다. 중복되는 속성이 있을경우 아래와 같은 우선순위로 처리된다.

①. 속성값 뒤에 !important 를 붙인 속성 

②. HTML에서 style을 직접 지정한 속성

③. #id 로 지정한 속성 

④. .클래스, :추상클래스 로 지정한 속성 

⑤. 요소이름으로 지정한 속성 

⑥. 상속된 속성

같은 우선순위에 있는 경우, 나중에 선언된 것이 우선되어 적용된다.

5. 명시도 계산법

!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]

ID 선택자의 갯수를 세어서 개당 100 으로 계산한다. 

클래스 선택자의 갯수를 세어서 개당 10 으로 계산한다. 

태그 선택자의 갯수를 세어서 개당 1 로 계산한다.

공용 선택자는 모두 0으로 계산한다.

가상 엘리먼트는 무시한다.

6. 박스 모델링

HTML의 엘리먼트들은 사각형 박스의 형태를 가지고 있는데, 이것을 가르켜 박스모델이라고 한다. 박스의 크기와 박스간의 간격을 정의하는 다양한 속성들이 있다.

margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소X

border : 박스의 테두리

padding : 테두리와 content간의 간격

content : 엘리먼트 안에 포함되는 컨텐츠