[CSS] 레이아웃 관련 스타일 : 박스 모델 (box model) min-height / min-width

[CSS] 레이아웃 관련 스타일 : 박스 모델 (box model) min-height / min-width 

---

✔️ 블록(block) 레벨 요소

: 블록 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.

 

📓 특징

- 항상 새로운 라인에서 시작함

- 화면 크기 전체의 가로 폭을 차지한다! (width 가 100%)

- width, height, margin, padding 프로퍼티 지정이 가능하다.

- inline 레벨 요소를 안에 포함할 수 있다.

✨ 종류 : div, h6, p, ol, ul, li, table ... form 등

 

 

✔️ 인라인(inline) 레벨 요소

: 인라인 레벨 요소는 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치한다.

 

📓 특징

- 새로운 라인에서 시작하지 않으며, 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.

- content 의 너비만큼! 가로 폭을 차지한다.

- width, height 속성은 무시되며, margin 은 좌우 간격만 반영되고 상하는 반영 ❌

- padding 속성은 모두 적용된다. 

- 공백이 있을 경우, 정의하지 않은 space(4px) 가 자동 지정된다.

- 인라인 레벨 요소에 블록 레벨 요소 포함 ❌

- 일반적으로 블록 레벨 요소에 포함되어 사용된다.

✨ 종류 : span , a, strong , img , br , input, select, textarea , button 등

 

 

✔️ 박스 모델이란?

: 모든 HTML 요소는 박스 모양으로 구성되며, 이것을 박스 모델이라 한다.

: 박스 모델은 여백, 테두리, 패딩, 콘텐츠 내용으로 구성된다.

 

 

✔️ width, height 속성 : min-height 속성

: 박스 모델에서 콘텐츠 영역의 너비 및 높이를 지정한다.

: min-height : 박스 모델에서 콘텐츠 영역의 최소 높이를 지정한다.

: height 속성의 사용값이 자신의 값보다 작아지는 것을 방지한다.

: min-height 가 max-height 또는 height 보다 커지면 요소의 높이는 min-height 값을 사용한다!

 

📓 속성값

- auto : 최소 너비 또는 최소 높이를 지정하지 않음

- length : 최소 너비나 높이를 px 나 em 등의 단위로 지정

- 퍼센트 : 부모 요소를 기준으로 백분율로 지정

.box1 {
	width: 200px; 
	height: 30px;
	margin: 20px 10px;
}

.box2 {
	width: 200px; 
	min-height: 30px;
	margin: 20px 10px;
}

width, height 스타일 속성

자바

서블릿

오라클

스프링

CSS

---

자바

서블릿

오라클

스프링

CSS

💡 min-height 값은 height 속성값을 무효화시킨다.