CSS
[CSS] Minimum and Maximum Height and Width
Dongi
2021. 12. 31. 10:40
안녕하세요 동기 여러분 오늘은 최소, 최대의 폭과 높이 설정에 대해 알아봅시다!
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 때문에 캐나다도 난리입니다. 언제쯤 이 바이러스를 이겨낼 날이 올까요? ㅠ ㅠ