목차
728x90
헷갈림의 주의 하자, 이전에 배운 vh 와 vw 도 함께 보자.
vh 단위 : viewport의 높이에 대한 백분율.
vw 단위 : viewport의 너비에 대한 백분율.
min-width :
( 이상 - 너비 )
요소가 가질 수 있는 최소 너비를 지정.
단 , 이는 요소의 최초 너비를 지정하는 것.
브라우저 창의 너비를 늘린다고해서 그 최대 크기를 제한하지 않음.
제한 함으로 스크롤이 생성되나, 브라우저 창의 너비가 min-width 보다 큰 경우 요소 최대 크기를 제한하지 않음의 주의.
max-width :
( 이하 - 너비 )
요소가 가질 수 있는 최대 너비를 지정.
브라우저 창의 너비를 늘려도 요소의 너비가 최대 너비로 제한됨.
min-height :
( 이상 - 높이 )
요소가 가질 수 있는 최소 높이를 지정.
브라우저 창의 높이를 줄여도 요소의 높이가 최소 높이로 제한됨.
max-height :
( 이하 - 높이 )
요소가 가질 수 있는 최대 높이를 지정.
요소의 컨텐트 양이 많아지더라도 요소의 높이가 제한됨.
나중에 overflow 속성을 이용할 수 있다.
max-height:700px;
min-height:500px;
max-width:1000px;
min-width:700px;
vmin 단위
vw / vh (웹 브라우저의 높이와 너비 ) 중 작은 값으로 단위 평가.
vmax 단위
vw / vh (웹 브라우저의 높이와 너비 ) 중 큰 값으로 단위 평가.
<style>
/*< vmin >. */
.box1 {
background-color: aqua;
width: 50vmin;
height: 50vmin;
}
/* < vmax >*/
.box2 {
background-color: yellow;
width: 50vmax;
height: 50vmax;}</style>
</head>
<body>
<div class="box box1"></div>
<hr>
<div class="box box2"></div>
</body>
'Development > HTML_CSS' 카테고리의 다른 글
| CSS, 텍스트의 배치 , white -space / indent / spacing (0) | 2024.04.20 |
|---|---|
| CSS, display / visibility / overflow / nowrap (0) | 2024.04.17 |
| CSS, viewport / margin / height / width / vh , vw (0) | 2024.04.16 |
| CSS, 비율 단위 (% , em , rem) / : root 를 알아보자. (0) | 2024.04.16 |
| CSS, 색상명 지정과 불투명도 ( color / rgb / opacity ) (0) | 2024.04.16 |