css 박스 모델 속성 !

1. width, height

width 요소의 가로 너비를 지정한다.

height 요소의 세로 너비를 지정한다.

 

2. max-width, min-width, max-height, min-height

max-width 요소의 최대 가로 너비를 지정

min-width 요소의 최소 가로 너비를 지정

max-height 요소의 최대 세로 너비를 지정

min-height 요소의 최소 세로 너비를 지정

 

3. margin

margin 요소의 외부 여백을 지정하는 속성이고 단축 속성이다!

ex) margin: 10px; 위 아래 좌우 모두 10px의 외부 여백

      margin: 10px 20px; 위아래 10px, 좌우 20px의 외부 여백

      margin: 10px 20px 30px; 위 10px, 좌우 20px, 아래 30px의 외부 여백

      margin: 10px 20px 30px 40px; 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px의 외부 여백

margin-top, margin-bottom, margin-left, margin-right 를 통해 개별 지정도 가능!

값으로 음수 값도 사용이 가능하다!

마진 중복 현상

1. 형제 요소의 margin-top 과 margin-bottom 이 만났을 때
   ex)형제 요소인 .child1 과 .child2 가 수직으로 차례대로 쌓여 있을 경우. child1의 margin-bottm: 20px 이고
   child2 의 margin-top: 20px 이라면 둘 사이의 여백은 40px 이 되어야 하나 마진 중복현상의로 20px의 여백만 생기게 된다.
2. 부모 요소의 margin-top 과 자식 요소의 margin-top 이 만났을 때 
   ex)부모 요소인 .parent 와 자식 요소인. child의 위쪽 부분이 겹쳐 있을 경우에 .child 요소에 margin-top: 50px; 을 하게 되면
   부모 요소인 .parent의 margin-top: 50px; 로 사용이 된다.
3. 부모 요소의 margin-bottom 과 자식 요소의 margin-bottom 이 만났을 때
   ex)부모 요소인 .parent 와 자식요소인 .child의 아래쪽 부분이 겹쳐 있을 경우에 .child 요소에 margin-bottom50px; 을 하게 되면
   부모 요소인 .parent의 margin-bottom: 50px; 로 사용이 된다.

4. padding

padding 요소 내부 여백을 지정하는 속성이고 단축 속성이다.

ex) padding: 10px; 위 아래 좌우 모두 10px의 내부 여백

      padding: 10px 20px; 위아래 10px, 좌우 20px의 내부 여백

      padding: 10px 20px 30px; 위 10px, 좌우 20px, 아래 30px의 내부 여백

      padding: 10px 20px 30px 40px; 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px의 내부 여백

padding-top, padding-bottom, padding-left, padding-right 를 통해 개별 지정도 가능하다.

padding 속성의 특성은 내부 여백을 준 만큼 요소의 크기가 커진다.

ex) 가로너비가 100px 세로너비가 100px 인 요소에 padding: 10px; 을 주게 되면 요소의 크기는 가로너비 120px 세로너비 120px이 된다.

box-sizing 속성의 값으로 border-box를 해주면 요소가 커지는 것을 막아줄 수 있다.

 

5. border

border 요소의 테두리 선을 만들어주는 속성이고 단축 속성이다.

border: 선의두께 선의종류 선의색깔 이런 식으로 위 아래 좌우에 한 번에 지정도 가능하고

border-top, border-bottom, border-left, border-right 를 써서 개별 지정도 가능하다.

선의 두께는 border-width, 선의 종류는 border-style, 선의 색깔은 border-color 로 지정도 가능하며,

border-top-width, border-bottom-width, border-right-width, border-left-width 로 개별 지정도 가능하다.

border-style 과 border-color 도 마찬가지.

border-style의 값으로는 solid, dashed, double, dotted, groove, ridge, inset, outset 이 있다.

border 를 사용할 경우에는 두께에 따라 요소의 크기가 커진다.

ex) 가로너비가 100px 세로너비가 100px 인 요소에 border: 1px solid; 를 해주면 요소의 크기는 가로너비 102px 세로너비 102px이 된다.

box-sizing 속성의 값으로 border-box를 해주면 요소가 커지는 것을 막아줄 수 있다.

 

6. box-sizing

box-sizing 요소의 크기 계산의 기준을 지정해준다.

속성의 값으로는 content-box 와 border-box 가 있는데 content-box 는 width 와 height 만으로 요소의 크기를 계산해주고,

border-box 는 width와 height에 padding과 border를 포함해서 요소의 크기를 계산해준다.

 

7. overflow

overflow 자식 요소의 크기가 요소의 크기를 넘어섰을 때 내용의 보여짐을 제어해주며 단축 속성이다.

속성의 값으로는 넘어 선 부분을 자르지 않고 보여주는 visible, 넘어 선 부분을 잘라내고 보이지 않게 하는 hidden,

넘어 선 부분을 잘라내고 스크롤바를 이용해서 볼 수 있게 해주는 auto 가 있다.