[CSS 박스모델] BOX MODEL

BOX MODEL

콘텐츠 레이아웃에 매우 중요한 특성이고 콘텐츠의 크기나 모양, 테두리, 간격을 바꿀 때 필요하다.

 

<가로, 세로>

width, height

 

 

<테두리와 모깎기>

Border : 요소를 둘러싸고 있는 박스 모델의 테두리, 웹 페이지를 보기 좋게 만드는데 중요한 역할, 각 요소를 구별하는데 도움, 눈에 띄도록 만들어 준다.

 border-width, border-color, border-style

 

/* width | style | color */

border : medium dashed green;

 

모깎기 : 모서리의 곡률을 조정하는 특성

border-radius

 

 

<padding>

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

apply to all four sides

padding : 10px;

 

vertical | horizontal

padding: 5px 10px;

 

top | right | bottom | left

padding: 5px 1px 0 2px;

 

 

<margin>

 바깥 공간을 다룬다.

apply to all four sides

margin: 10px;

 

vertical | horizontal

margin: 5px 10px;

 

top | right | bottom | left

margin: 5px 1px 0 2px;

 

효율적인 작업을 위해 

Body{

  margin : 0;

} 으로 만들고 하는게 좋다.

 

 

<Display Property>

 INLINE, BLOCK, INLINE-BLOCK

 

- inline : 요소가 인라인이면 너비나 높이는 무시

              패딩은 요소의 하나로서 존재하고 있지만 나머지 내용에 영향을 주지 않는다.

              마진은 가로줄에만 영향

 

- block : 크기 지정 가능, 패딩 적용, 마진 상하좌우 적용

 

- inline-block : 공간을 공유 서로 다른 줄로 밀어내지 않는다. 마진 상하좌우 적용

 

 

<CSS UNITS>

Relative	Absolute
- em - rem - vh - vw - % - and more !	- px - pt - cm - in - mm

 

% : 너비나 높이 지정에 가장 많이 사용

em : 특성에 따라 다른 값이 바뀐다, 부모 요소의 글꼴 크기에 달려 있다.. 요소의 글꼴 크기에 맞춘 변경이 가능

        간단한 컴포넌트나 재사용할 수 있는 항목을 만들어 해당 글꼴 크기에 맞춰 달라지게 해야 하는 경우

        단점 : 단계별로 누적이 된다 > 급격하게 커지거나 작아질 수 있다.

 

rem : 글꼴 크기를 부모 요소의 크기에 따라 바꾸지 않고 root html 요소의 글씨 크기에 따라 바꾼다는게 em과 다른점

         문서 전체에서 하나의 글꼴 크기에 비례하여 바뀐다.