박스 모델

box 형태의 영역 : 콘텐트, 패딩, 테두리(border), 마진(margin)

content 요소의 텍스트, 이미지 등의 실제 내용이 위치하는 영역, width height 프로퍼티 가짐

padding 테두리(border) 안쪽에 위치하는 요소의 내부 여백영역 기본색은 투명 요소에 적용된 배경의 컬러/이미지는 패딩까지 적용

border 테두리의 두께

margin 바깥에 위치하는 요소의 외부 여백 영역

 div {

      /* 배경색의 지정: 콘텐츠 영역과 패딩 영역에 적용된다. */

      background-color: lightgrey;

      /* 콘텐츠 영역의 너비 */

      width: 300px;

      /* 패딩 영역의 두께 */

      padding: 25px;

      /* 테두리: 두께 형태 색상 */

      border: 25px solid navy;

      /* 마진 영역의 두께 */

      margin: 25px;

    }

출처 : 포이마웹

1. width/height 프로퍼티

너비와 높이는 콘텐츠 영역을 대상으로

이는 box-sizing 프로퍼티에 기본값인 content-box가 적용됨.

box-sizing 프로퍼티에 border-box 적용>콘텐츠영역,padding,border가 포함된 영역을 w/h 프로퍼티의 대상으로 지정 가능

w/h로 지정한 영역보다 실제 콘텐츠가 크면 영역 넘치게 됨

 

overflow:hidden 지정 시 넘친 콘텐츠 감추기 가능

 

width는 콘텐츠 영역을 대상으로 너비, 높이 지정>박스 전체 크기는 다음과 같이 계산

전체 너비 = left margin+left border+left padding+width+right padding+right border+right margin

전체 높이 = top margin+top border+top padding+height+bottom padding+bottom border+bottom margin

 

박스 모델 관련 프로퍼티는 상속되지 않는다

 

2. margin/padding

4개 값 지정

margin : top right bottom left

margin : 25px 50px 75px 100px

 

3개 값 지정

margin : top right/left bottom

 

2개 값 지정

margin : top/bottom right/left

 

1개 값 지정

margin : 4군데전부

 

margin : 0 auto

auto 키워드 설정 > 브라우저 중앙에 위치 

 

요소 너비가 브라우저 너비보다 크면 잘리면서 가로 스크롤바 만들어짐 

max-width 쓰면 브라우저 너비가 작아지면 요소의 너비도 같이 작아지면서 잘리는 부분이 없음

 

3. border 프로퍼티

3.1 border-style

테두리 선 스타일 지정

프로퍼티 값 갯수에 따라 지정 가능 (위와 동일)

 

3.2 border-width

테두리의 두께 지정

border-style과 함께 사용하지 않으면 적용이 안됨

 

3.3 border-color

테두리 색상 지정

border-style과 함께 사용하지 않으면 적용이 안됨

 

3.4 border-radius

테두리 모서리 둥글게 표현

 

border-top-left-radius: 10px;

border-top-right-radius: 40px;

border-bottom-right-radius: 40px;

border-bottom-left-radius: 10px;

border-top-left-radius: 50px 25px;

두개의 반지름 지정>타원형 둥근 모서리 설정

 

3.5 border

border : border-width border-style border-color;

 

4. box-sizing

width, height 프로퍼티의 대상 영역 변경 가능

 

content-box : width, height 프로퍼티 값은 content 영역 의미 (기본값)

border-box : width, height 프로퍼티 값은 content, padding, border가 포함된 값 의미

box-sizing: border-box;