[CSS]max-width와 min-width사용법 모음

[CSS]max-width와 min-width사용법 모음

스마트 폰에서도 PC에서도 어떤 크기의 단말로 봐도 적당한 크기에 표시되는 Web디자인을 만들려면 min-width와 max-width를 피할 수 없습니다. 이는 각각 width의 최소값과 최대값을 결정하는 편리한 것입니다.

 

2021.11.05 - [CSS] - 1. CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터

1. CSS width(너비)와 height(높이)의 기본지식과 지정방법 마스터

 

1. 최소 폭(min-width)의 사용법

min-width에서는 "width의 할 수 있는 최소치"를 지정합니다. 다시 말하면 요소가 더 이상 작아지지 않는 폭를 지정할 수 있습니다.
가령 다음과 같이 쓰면 "단락 요소(p태그)가 100px보다 작아지지 않는다"라는 지정이 됩니다.

p<
min-width :100px;
}
=요소가 100px보다 작아지지 않는다(100px이상)의 의미

1-1. min-width의 사용처

width를%로 지정했을 때 min-width는 세트에서 사용하면 편리합니다. 예를 들어 width:50%일 때 웹 페이지를 보는 단말기(브라우저)의 크기마다 요소가 너무 작거나 너무 클 것입니다.

PC로 보는 분에는 width:50%는 적당한 크기이지만, 스마트 폰에서는 너무 작다"는 상황은 반응형 웹 사이트를 만들 때 자주 일어납니다.

그럴 때 min-width를 사용하면"어떤 단말 브라우저에서 보아도 이보다는 폭이 작게 안 된다"라는 설정을 할 수 있습니다.

아래에는 예시입니다. min-width를 사용하여 봅시다. width:50% 와 min-width:100px를 세트로 쓰고 부모 요소의 폭이 작아져도 요소의 폭이 100px보다 작게 안되게 해봅시다.

html 코드
<p>↓ 부모 요소 큰 경우</p>
<div class="test1">
  <p class="nomin">최소 폭 없이</p>
  <p class="min">최소 폭 100px</p>
</div>

<p>↓ 부모 요소 작은 경우</p>
<div class="test2">
  <p class="nomin">최소 폭 없이</p>
  <p class="min">최소 폭 100px</p>
</div>

CSS 코드
.test1{/*부모 요소 크다*/
  width:200px;background:skyblue;
}.test2{/*부모 요소 잘*/
  width:100px;background:skyblue
}.nomin{background:gray;width:50%;/*최소 폭 없이*/}. min{background:orange;width:50%;/*최소 폭이*/
  min-width:100px;
}

위 코드의 결과 값

2. 가장 큰 폭(max-width)의 사용법

이번에는 max-width쪽을 보겠습니다. 생각은 최소 폭과 기본적으로 같지만 사용처가 약간 다릅니다. max-width에서는 "width의 할 수 있는 최대치"를 지정합니다. 즉, 요소가 더는 안커지게 지정할 수 있습니다.

아래와 같이 쓰면"단락 요소(p태그)이 200px보다 커지지 않는다"라는 지정이 됩니다.

p<
max-width :200px;
}
=요소가 200px보다 안 크(200px이하)라는 의미

예를 들어 요소가 width:80%일 때"스마트 폰으로 보면 딱 좋은 크기인데, PC에서 보면 너무 큰!" 일이 자주 있습니다.

그럴 때 max-width(최대 폭)이 결정되어 있으면" 화면이 큰 PC에서 보더라도 더는 폭이 커지지 않는다"라는 설정이 됩니다.

 

아래 코드에서 max-width를 써보면 width:80% 와 max-width:100px 를 세트로 사용하고 부모요소의 폭이 커져도 요소의 포기 100px보다 안커지게 해봅시다.

html 코드
<p>↓ 부모 요소 작은 경우</p>
<div class="test1">
  <p class="nomin">최대 폭 없이</p>
  <p class="min">최대 폭 100px</p>
</div>

<p>↓ 부모 요소 큰 경우</p>
<div class="test2">
  <p class="nomin">최대 폭 없이</p>
  <p class="min">최대 폭 100px</p>
</div>

CSS코드
.test1{/*부모 요소 잘*/
  width:100px;background:skyblue;
}.test2{/*부모 요소 크다*/
  width:200px;background:skyblue;
}.nomin{/*최대 폭 없이*/
  background:gray;width:80%;
}. min{/*최대 폭이*/
  background:orange;width:80%;max-width:100px;
}

2-2. 그림이 화면을 벗어나지 못하도록 제한한다.

max-width의 또 다른 사용처는 화면(부모 요소)에서 사진이 벗어나지 못하도록 제한하고 싶을 때입니다.
예를 들어 웹 페이지에 폭 500px의 사진을 얹습니다.

이 웹 페이지를 폭 320px의 스마트 폰으로 보았을 때 경우를 생각하고 봅시다. 그렇다면,폭 500px의 사진은 화면에서 벗어나게 됩니다.

" 큰 화면에서 페이지를 보는 데는 500px로 화상을 표시시키고 싶지만 500px보다 작은 화면에서 보았을 때에는 벗어나고 싶지 않다"라고 생각하죠.
그런 때는 화상에 대해서 max-width: 100%를 설정합니다. 하자 크게 화면에서 보았을 때에는 화상은 500px로 작은 화면에서 보았을 때에도 화면 크기보다 영상이 크게 표시하는 것이 없어집니다.

 

아래에는 코드의 예시입니다.

html 코드
<p>
　　<img src="XXX.jpeg" alt="사진"/>
</p>

CSS 코드
img{width:100px;height:100px;max-width:100%;
}

2-3. 사진의 종횡비를 유지하는 방법

max-width사용시에 종횡비가 무너진 경우는 CSS에 이하의 지정을 추가합니다.

height: auto;

이것으로 종횡비를 유지한 채로 화상이 축소되게 됩니다. 이 지정하고 50px화면에서 다시 표시하고 봅시다.

↑ 종횡비를 유지한 상태에서 50px에 들어갔습니다. 이렇게 max-width를 사용하면서 요소에 대해서"더 이상은 더 커지지 않는다"이라는 제한을 받습니다.

 

3. min-height와 max-height

그리고 최소 높이와 최대 높이를 정합니다"min-height"과 "max-height"란 것도 있습니다. 개념은 폭에 대한 min-width, max-width와 같습니다.
min-height: 500px라고 적으면 『 요소의 height가 500px보다 작아지지 않도록 』다는 지정이 됩니다.
max-height: 500px라고 적으면 『 요소의 height가 500px이상 크지 않게 』다는 지정이 됩니다.
하지만 min-width와 비교하면 별로 사용할 기회는 많지 않을것입니다.