(*매우중요) CSS - box model(박스 모델)

(*매우중요) CSS - box model(박스 모델)

 

#1 box model 기본 원리

 

content < padding < border(박스의 기준이 되는 테두리) <margin

 

이렇게 있다.

---

#2 각 요소의 세부 설명

 

1)content

 

별다른 css 명령없이 선택자를 선택하고 입력하면 적용되는 영역이다.

이를테면

 

.box {

color: gray;

}

라고 할 경우, box라는 클래스를 가진 content 요소의

글씨 색은 gray가 되는 것이다.

---

2)padding

 

50px로 설정할시,

content를 기준으로 사방으로 각각 50px씩 늘려지게 되고

만약 content요소에 색이 적용되어있다면 padding에서 별도로 색상 적용을 하지 않아도 

content의 색상과 함께 증감하게 된다.

---

3)border

 

엄밀히 말하면 border 까지의 3요소 (content, padding, border)

에서 margin으로 넘어가기 전의 경계선이라고 보면 된다.

---

4)margin

 

만약 margin: 50px;

이라고 해주면

border를 기준으로 바깥으로 각각 50px씩 벌려준다.

---

#3 예외 box-sizing 속성

 

이것때문에 뭔가 css를 먹여도 정상적으로 작동을 안하는 듯한

요소들이 많다.

 

1)content-box

content 영역을 기준으로 box의 size를 적용

border영역을 기준으로 box size를 적용

 

컴퓨터는 이때 content를 기준으로 움직인다.

하지만 가시적으로 볼때 사람은 border안에 있는 padding 까지 포함한 사이즈를

기준해서 보게된다.

예를들어서

 

box-sizing: content-box;

width: 400px;

padding: 50px;

 

로 css를 먹여주게 되면

content-box를 기준하여 움직이게 될텐데

사람이 가시적으로 볼때는

기존의 400px content에 양옆에 50px씩 padding값이 더하여 져서

500px이 된다.

 

그리고 content-box의 경우 padding을 먹이게 되면 padding과 border

사이의 값이 padding 만큼 불어나기때문에 영역이 커져보인다.

---

2)border-box

 

border영역을 기준으로 box의 size를 적용

 

반면 content-box와 다르게 border-box는

사람의 눈에 보이는 padding 요소까지 포함된 사이즈에

더해서 움직여 주는 것이니깐 좀 더 효용성 있다.

 

box-sizing: border-box;

width: 400px;

padding: 50px;

 

이 경우에 500px를 기준으로 움직이게 된다. (기존의 400px + padding 50px씩 양옆에)

 

그리고 border-box의 경우에 padding을 먹이면 border를 기준으로 안쪽으로 padding을

늘리게 되고, padding이 늘어난 만큼 content는 줄어들게 된다