[CSS] Box Model _ 구성요소 / 개발하기 전에 ♥border-box(o)♥ 설정을 하자.

 

CSS는 모든 HTML 요소를 예외없이, 

사각형 박스의 형태로 바라본다. 

 

* 참고 

원은 네모 박스를 동그랗게 깎은 것이다

 

---

 

CSS Box Model

모든 HTML 요소를 사각형 박스로 표현하는 개념이다.

content(내용), padding(안쪽 여백), border(테두리), margin(외부 간격)으로 구성된다

 

	Margin : 가장 바깥쪽 영역, 이 박스와 다른 요소 사이의 공백 Border : 콘텐츠와 padding을 감싸는 테두리 영역  Padding : 콘텐츠 주위에 위치하는 공백 영역 Content : 콘텐츠가 표시되는 영역
	▶ Box 구성의 방향 별 별칭 margin-top, margin-right, margin-left, margin-bottom border-top, border-right, border-left, border-bottom padding-top, padding-right, padding-left, padding-bottom height, width

 

---

 

▷ 실습

정석형 스타일	단축 스타일

 

Q. 여기서 box1과 box2는 width가 똑같이 200px인데, 왜 보이는 영역에서 서로 길이가 다를까?

CSS는 border가 아닌 content의 크기를 width 값으로 지정하기 때문이다.

일반적으로 사람들이 생각하는 너비와는 다르다. 

 

---

box-sizing 속성

기본값 (우리가 아무것도 안했을때 설정값)	우리가 새로 설정한 값  (border-box 설정)
CSS가 width 값을 계산하는 기준이다. CSS는 border가 아닌 content의 크기를 width 값을 지정한다.	그런데, 테두리 기준으로 작성을 해야 사람이 사용하기에 편하다. 그래서 그것에 대한 설정을 별도로 해주어야 한다. CSS 위쪽에서 전체 선택자를 사용해서 하는 경우가 일반적이다.

 

 

- 예제

https://bayleaf07.tistory.com/181