[CSS] Minimum and Maximum Height and Width

안녕하세요 동기 여러분 오늘은 최소, 최대의 폭과 높이 설정에 대해 알아봅시다!

 

Minimum and Maximum Height and Width

웹 페이지는 사용자가 사용하는 스크린마다 다르게 보이기 때문에 웹 페이지를 만드는 개발자들은 사용자에게 일정하고 같은 페이지를 보여주기 위해 많은 시간과 노력을 기울여야 합니다. (부트스트랩이면 한방에 해결되는데) 이러한 문제점 때문에 CSS는 폭과 높이에 각각 두 가지의 프로퍼티를 제공하는데 그게 바로 min-width, max-width, min-height, max-height입니다. 

 

---

 

생김새

p {
  min-width: 300px;
  max-width: 500px;
  min-height: 300px;
  max-height: 500px;
}

최소 폭을 300px로 지정

최대 폭을 500px로 지정 -> 폭이 300~500px 사이로 지정됨

 

최소 높이를 300px로 지정

최대 높이를 500px로 지정 -> 높이 300~500px 사이로 지정됨

 

 

 

---

 

실험을 해봅시다.

   <!-- HTML -->
    <div class='protoss'>
      <h2>프로토스</h2>
      <p>사이오닉 에너지를 사용하는 최초의 자손</p>
    </div>
    <div class='terran'>
      <h2>테란</h2>
      <p>코프룰루 지역에 정착한 인류</p>
    </div>
    <div class="zerg">
      <h2>저그</h2>
      <p>젤나가가 창조한 두 번째 생명체</p>
    </div>

* {
  text-align: center;
}

.protoss {
  background-color: gold;
  border: 3px solid black;
  min-width: 700px;
  max-width: 1000px;
}

.terran {
  background-color: crimson;
  border: 3px solid black;
  min-width: 800px;
  max-width: 1000px;
}

.zerg {
  background-color: blueviolet;
  border: 3px solid black;
  min-width: 900px;
  max-width: 1000px;
}

각 종족의 min-width를 700, 800, 900으로 다르게 주고 실행하면

위와 같은 화면이 실행되는데 화면의 폭을 한번 줄여 보겠습니다.

화면을 줄이니까 점점 저그가 밀려납니다!!! 더 줄여보겠습니다.

그다음은 테란이 밀려납니다!!!

 

---

 

프로퍼티의 값들

min-width, max-width, min-height, max-height는 아래 표에 있는 값으로 설정할 수 있습니다.

값	설명
숫자로 표현한 길이	기본 값은 0. cm, mm, in, px, pt, pc같은 절대값이나 em, ex, ch, rem, vw 같은 가변값으로 설정이 가능합니다.
%	퍼센트로 설정하는 값
initial	기본 값으로 설정
inherit	부모 요소의 값을 상속 받음

 

---

 

오늘의 느낌

COVID-19 때문에 캐나다도 난리입니다. 언제쯤 이 바이러스를 이겨낼 날이 올까요? ㅠ ㅠ