css box-model

박스 구성 요소

• 콘텐츠(파란색)을 감싸는 padding(연두색) -> padding을 감싸는 border 선(노란색) -> border를 감싸는 margin(주황색)으로 구성되어 있다.

표현 방법

   div{padding-top: 10px;
	   padding-right: 10px;
	   padding-bottom: 10px;
 	   padding-left: 10px;}

• 기본 작성 방법

   div{padding: 10px}

• 한가지 값만 기록하면 4면 모두 동일한 값을 의미

   div{padding: 10px 7px 5px 3px}

• 순서는 top, right, bottom, left

   div{padding: 10px 7px}

• 두가지 값만 기록하면 첫번째 값인 10px top, bottom, 두번째 값인 7px 은 right, left

   div{padding: 10px 7px 5px}

• 세가지 값을 기록하면 첫번째 값인 10px top 두번째 값인 7px 은 right, left, 세번째 값인 5px은 bottom

📌 border, margin도 동일한 원리

box-model

입력 방법

<div style="padding: 10px; border: 10px solid green; margin: 10px;">
  <div style="padding: 5px; border: 5px solid red; margin: 5px;">CSS 박스 모델</div>
</div>

출력

box-sizing

• 박스의 크기는 px단위와 퍼센트(백분율)단위로 표현
• 퍼센트(백분율) 단위는 부모 요소를 기준으로 상대 값 적용

입력 방법

.div{
width: 300px;
height: 100px;
margin: 10px;
padding: 10px;
border: 10px solid green;
}

박스 요소 작성시 유의사항 : box-sizing 속성

    <div style="box-sizing: content-box;">CSS 박스 모델 : content-box</div>
    <div style="box-sizing: border-box;">CSS 박스 모델 : border-box</div>

출력

• content-box: content-box위로 border 값을 넣으면 그 값만큼 박스 사이즈가 커진다.(기본 설정)
• border-box: 박스 크기 border 값 포함 고정

최소, 최대 너비: max-width, min-width 속성 (높이도 동일 적용 가능)

<div
style="width: 50%;
max-width: 900px;
min-width: 200px;
height: 50%;
background-color: red;">
</div>

출력

• min-width: 200px: 해상도를 늘려도 최대 200px까지 줄어들고 고정
  
• max-width: 900px: 해상도를 늘려도 최대 900px까지 늘어나고 고정