[CSS] 최소, 최대 길이 설정 - width, height(min,max)

이미지나 어떤 범위의 넓이나 높이 길이를 설정하는 방법에 대해 알아보겠습니다.

더불어 최소/최대 넓이나 높이 길이를 설정하는 방법도 알아보려고 합니다.

 

---

 

1. width (가로길이)

width : 100px;

- 가로길이를 100px로 적용한 코드입니다.

 

- 이미지나 공간의 가로 폭이 100px로 고정됩니다.

 

- 단위는 px, %, ch, em 등이 있습니다.

- 적용해보면서 상황에 따라 알맞은 단위를 선택하면 될 것 같습니다.

 

- 저는 주로 px 단위를 씁니다.

 

 

2. min-width (최소 가로길이)

min-width : 100px;

- 최소 가로길이를 100px로 적용한 코드입니다.

 

- min-width를 적용해두면 설정한 값보다 작아질 수 없습니다.

 

- 예를 들어, 이미지 가로길이가 50px 일 때,

  min-width를 100px로 설정한다면 이미지 가로길이는 100px가 됩니다.

 

- 일정 길이 이상 작아지면 안 되는 경우에 사용합니다.

 

 

3. max-width (최대 가로길이)

max-width : 100px;

- 최대 가로길이를 100px로 적용한 코드입니다.

 

- max-width를 적용해두면 설정한 값보다 커질 수 없습니다.

 

- 예를 들어, 이미지 가로길이가 200px 일 때,

  max-width를 100px로 설정한다면 이미지 가로길이는 100px가 됩니다.

 

- 일정 길이 이상 커지면 안 되는 경우에 사용합니다.

 

 

4. height (세로 길이)

height : 100px;

- 세로 길이를 100px로 적용한 코드입니다.

 

- 이미지나 공간의 세로 길이가 100px로 고정됩니다.

 

- width와 같이 단위는 px, %, ch, em 등이 있습니다.

- 적용해보면서 상황에 따라 알맞은 단위를 선택하면 될 것 같습니다.

 

- 저는 주로 px 단위를 씁니다.

 

 

5. min-height (최소 세로 길이)

min-height : 100px;

- 최소 세로 길이를 100px로 적용한 코드입니다.

 

- min-height를 적용해두면 설정한 값보다 작아질 수 없습니다.

 

- 예를 들어, 이미지 세로 길이가 50px 일 때,

  min-width를 100px로 설정한다면 이미지 세로 길이는 100px가 됩니다.

 

- 일정 길이 이상 작아지면 안 되는 경우에 사용합니다.

 

 

6. max-height (최대 세로 길이)

max-height : 100px;

- 최대 세로 길이를 100px로 적용한 코드입니다.

 

- max-height를 적용해두면 설정한 값보다 커질 수 없습니다.

 

- 예를 들어, 이미지 세로 길이가 200px 일 때,

  max-width를 100px로 설정한다면 이미지 세로 길이는 100px가 됩니다.

 

- 일정 길이 이상 커지면 안 되는 경우에 사용합니다.

 

 

 

이상으로 가로/세로 길이를 다루는 css 코드에 대해 알아보았습니다.

 

---