[CSS] CSS Box Model

width : 박스의 너비

height : 박스의 높이

 

border : 요소를 감싸는 박스 모델의 테두리

- border-color : 박스 모델의 색상

- border-width : 박스 모델의 두께

- border-style : 박스 모델의 모양(스타일) [dashed, solid]

* 속기로 border : 4px solid black 을 사용할 수 있음

- border-radius : 곡률설정 (px, %로 설정가능)

 

padding : 콘텐츠 박스와 요소를 둘러싼 테두리 사이에 남은 공간

- padding : 10px -> all four sides

- padding : 5px 10px -> vertical, horizontal

- padding : 1px 2px 2px -> top, horizontal, bottom

- padding : 5px 1px 2px 3px -> top, right, bottom, left (시계방향)

 

margin : 두 요소에 존재하는 각 테두리 간의 간격

- margin : 10px -> all four sides

- margin : 5px 10px -> vertical, horizontal

- margin : 1px 2px 2px -> top, horizontal, bottom

- margin : 5px 1px 2px 3px -> top, right, bottom, left (시계방향)

 

display

- display : inline ->  Inline Element로 작동

- display : block -> Block Element처럼 작동

* element가 inline element라면 width나 height는 무시됨

- display : inline-block -> 인라인 요소처럼 작동하나 width, height, margin, padding이 적용됨

- display : none -> 요소는 존재하나 보이지 않게 설정

 

CSS unit

- px : 절대 단위

- percentages(%)

- em : parent element의 글꼴 크기에 맞춰 사이즈를 상대적으로 변경 (1.5em은 부모 요소의 크기의 1.5배)

- rem : root element의 글꼴 크기에 맞춰 중첩요소에서의 em의 단점을 개선