CSS 정리

CSS 우선순위

속성 값 뒤에 !important 를 붙인 속성 (거의거의 안쓰인다고는 함.)

HTML에서 style을 직접 지정한 속성 (인라인 스타일)

#id 로 지정한 속성 (아이디)

.클래스, :추상클래스 로 지정한 속성 (클래스, 및 가상(수도)클래스)

태그이름 으로 지정한 속성

상위 객체에 의해 상속된 속성

 

CSS 박스모델

모든 태그들은 자신의 박스영역을 가진다.

그 박스는 콘텐츠 영역의 박스(WIdth,Height), padding의 박스, border의 박스, margin등이 있다.

 

https://www.tcpschool.com/css/css_boxmodel_boxmodel

1. 내용(content) : 텍스트, 이미지등 실제 태그의 컨텐츠가 들어가는 영역의 크기.

2. 패딩(padding) : 내용과 테두리 사이의 간격.

3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격.

 

box-sizing의 border-box를 사용하면 , width,height를 지정할 때 padding과 border값을 주더라도 실제 자신의 width와 height은 유지한다. 

 -> 기본은 content-box. 

 -> border-box를 쓰는게 나중에 더 유지보수하기 쉽다고한다.

 -> 다만 그만큼 padding과 border를 합하기에 컨텐츠 영역의 크기는 작아질수밖에없음.

 

Releative, Absolute

간단하게 Releative는 부모, Absolute는 자식이다. 두 속성 모두 Position과 관련된 것. (디폴트는 static이라는 값을 가짐.)

즉 Absolute는 부모(Relative)를 기준으로 Position을 잡게된다.

 -> 왼쪽 상단이 기준점.

 

relative만 사용할때는 HTML요소 순서를 유지하지만, absolute는 HTML 요소 순서를 벗어남 (자신의 부모를 따르므로)

 -> 요소 순서를 벗어난다는말은 웹 문서 흐름에서 제외된다는 의미.

 -> 부모태그란 relative 속성을 가진 부모. 만약 없다면 body가 기준이된다.