BOX MODEL

BOX MODEL

박스는 줄바꿈이 되는(word_wrap) 박스와 줄바꿈 없이 옆으로 이어지는 박스로 구분된다

---

 

Block box 

abcdefghi 
jklmnop.....

줄바꿈 o

<h1>, <p>, <li>, <div>, <article> 등...

 

Inline box

abcdefghijklmnop....

줄바꿈 X 크기지정 X

<span>, <a>, <img>,<script>,<video>,<textarea>..등

 

display: inline-block

inline box 처럼 옆에 붙으며 고유의 크기를 갖는다.

 

박스의 종류별 특징

	줄바꿈 여부	기본 너비	width, height 사용 여부
Block Box	O	100%	O
Inline-block	X	글자가 차지하는 만큼	O
Inline	X	글자가 차지하는 만큼	X

 

---

박스의 구성 요소

 

항상 여백을 고려한 디자인을 해야한다.

 

https://edu.gcfglobal.org/en/basic-css/the-css-box-model/1/

 

BORDER(테두리)

//body 태그에 1px 빨간색 실선 적용

body { border: 1px solid red; } 

border-width	border-style	border-color	  등

 

MARGIN (바깥 여백)

// 각각 top / right / bottom / left - clockwise 로 작성
// 값을 하나만 넣으면 모든 바깥여백에 적용
// 값을 두개 넣으면 { 첫번째값= 위 아래}, {두번째값 = 좌 우} 여백 적용
// margin-right 같이 방향을 특정해서도 가능
// 음수값 적용도 가능 


body { margin: 10px 20px 30px 40px; } // 위 오른쪽 아래 왼쪽

body { margin: 10px 20px; } // 위 아래 10px, 좌우 20px 

body { margin: 5rem; } // 모든방향 여백 5rem

 

PADDING (안쪽 여백)

// border를 기점으로 박스 내부의 여백을 지정
// border처럼 시계방향으로 여백

body { padding: 10px 20px 30px 40px; } // 위10,오-20,아래-30,왼-40 px


// 배경색이나 border를 통해 padding을 선명하게 확인 가능

body
{
	padding: 50px;
    border-style: dotted;
    background-color: lightgreen;
}

 

기타기능들

 

> 콘텐츠가 박스보다 큰 경우 스크롤을 넣을 수 있다.

// 스크롤 삽입 [컨텐츠가 박스보다 클때]
body { height: 2rem; overflow: auto; }

 

> 쉽게 박스 사이즈 측정하는 방법

// *은 전역의 모든 태그들을 선택하는 선택자


code
code
code

* { box-sizing: border-box; }

// 전역 모든 태그에 box-sizing: border-box를 적용하고
// 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다. 
// 일반적으로 HTML문서 전체에 작동


* { box-sizing: content-box; }

// 박스의 크기를 측정하는 기본값 (margin, border, padding 포함 X)



// 대부분 모든 상황에서 border-box를 권장함.