[CSS] max-width/min-width, max-height/min-height

 

 

▶ max-width
  - 요소의 최대 가로 너비 지정.
  - max-widht 값이 지정된 요소는 이보다 더 커질 수 없음.

 

- 속성 값
  - 기본값: none.

    - 요소는 기본적으로 최대치가 없음.

    - 지정하지 않으면 원하는 만큼 늘려 쓸 수 있다는 것.
  - 단위: px, em, % 등의 단위로 지정.
  - auto: 브라우저가 너비 계산.

 

▶ min-width
- 요소의 최소 가로 너비 지정.
- min-width가 지정된 요소는 이보다 더 작아질 수 없음.

 

- 속성 값
  - 기본값: 0.

    - 너비는 0보다 작아질 수 없음.
  - 단위: px, em, % 등의 단위로 지정.
  - auto: 브라우저가 너비 계산.

 

 

▶ max-height
- 요소의 최대 세로 너비 지정.
- max-height가 지정된 요소의 높이는 이보다 더 커질 수 없음.

 

- 속성 값

  - 기본값: none.

    - 요소는 기본적으로 최대치가 없음.

    - 지정하지 않으면 원하는 만큼 늘려 쓸 수 있다는 것.
  - 단위: px, em, % 등의 단위로 지정. 
  - auto: 브라우저가 계산.

 

 

 

▶ min-height 
- 요소의 최소 세로 너비를 지정.
- min-height가 지정된 요소의 높이는 이보다 더 작아질 수 없음.

- 속성 값. 
  - 기본값: 0.

    - 너비는 0보다 작아질 수 없음.
  - 단위: px, em, % 등의 단위로 지정. 
  - auto: 브라우저가 너비 계산. 

 

 

  - .child는 <div>(block 요소)이므로 width의 기본값은 auto, 즉 width: 100%;가 됨.
  - 따라서 값을 지정하지 않을 경우 .parent의 width값이 그대로 .child의 width값이 됨.
  - .parent의 width 변경 시 자동으로 변경된 값으로 .child의 width 또한 변경됨.

 

 

max-widht, min-width 사용 예시(1)

max-widht, min-width 사용 예시(2)

  - max-width, min-width 지정.
  - .child의 max-width보다 .parent의 width값이 큰 경우 max값으로 인해 영역의 너비 크기에 제한이 있음.
  - 이는 min-width 이하로 .parent width 변경 시에도 마찬가지.

  - 결과적으로 max-width/min-width, max-height/min-height을 통해 요소의 너비를 가변할 수 있는 상태로 설정하되, 최솟값과 최댓값을 정해서 제한선을 둘 수 있는 구조로 레이아웃 설정 가능.