CSS 04 Box-model 박스 모델 & 패딩 마진

 

BOX-Model 박스모델

(컴퓨터화면)브라우저가 요소를 렌더링 할때 , 각각의 요소는 기본적으로 사각형 형태로 영역을 차지한다. 이때 영역을 박스라고 표현한다.

CSS는 박스의 크기 위치 속성 (색 , 배경, 테두리)을 결정한다,

 

[하나의 박스는 네개의 영역으로 구성된다]

 

[콘텐츠 영역, 안쪽 여백, 바깥쪽 여백, 경계선 테두리]

📦 박스 각 영역의 크기 정의

콘텐츠 영역 width, height 안쪽 영역 padding | 바깥쪽 여백 margin  테두리 border-width

 

span 에서는 width, height 영역을 인식을 못 한다.

하기 위해서는 display : inline-block으로 적용해야한다. inline-block란  : [요소는 인라인으로 배치하되 블록 요소 속성을 가질수 있다.]

그러면 width height를 가질 수 있다.

span { width: 100px; height: 100px;}

 

📌정리

브라우저는 요소를 렌더링 할 때 박스 모델에 따라 사각형으로 표현한다.

하나의 박스는 네개의 영역으로 구성되었다.

(바깥여백 안쪽여백 콘텐츠영역 테두리)

각 영역의 크기를 정의하는 속성이 존재한다.

---

패딩과 마진

 

패딩: 콘텐츠 영역 <-> 테두리 |   마진: 테두리 <-> 바깥

다양한 경우 의 수 => 여백은 상하좌우 네 개의 면이 존재한다

 

하위 속성 정의하기 ,여러 값을 한번에 정의하기

 

padding top right bottom left 시계방향. | 여러 값을 한 번에 정의하기

span{ display: inline-block;width: 100px; height:100px;margin: 10 20 3040;}

 한번에 시계 방향으로 주기 값