min-height

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

min-height 대상의 최소높이를 지정합니다.

예제 1
min-height 개요
보기

원본 크기

min-height: 적용된 크기
소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
</style>

<div class="css_test">
    <img src="http://superkts.com/img/css/bird20.gif" />
    <img src="http://superkts.com/img/css/bird30.gif" />
    <img src="http://superkts.com/img/css/bird32.gif" /><br>
    원본 크기
</div>
<div class="css_test">
    <img src="http://superkts.com/img/css/bird20.gif" style="min-height:50px;" />
    <img src="http://superkts.com/img/css/bird30.gif" style="min-height:100px;" />
    <img src="http://superkts.com/img/css/bird32.gif" style="min-height:150px;" /><br>
    min-height: 적용된 크기
</div>
사용된 CSS (클릭시 보기) : text-align
설명

- 높이의 최소 수치를 지정합니다.
- min-height : 50px 라면 최소 50보다는 커야한다는 의미입니다.
- 설정을 해제할때는 min-height : none 를 사용합니다.

예제 2
실습 - 여러 이미지 min-height 조절해 보기
보기
min-height :
0
min-height : 0
설명

- 높이가 다른 여러이미지에 동시에 적용해 보았습니다.
- 높이가 작은 이미지 부터 적용되는것을 확인할 수 있습니다. (최소 그것보단 커야되 입니다)
- 이미지가 아닌 것에도 사용할 수 있습니다. div 등 에요.

- 높이가 50px 인 이미지에 min-height 가 100px 로 설정되면 이 이미지는 100px 로 커집니다.
- 높이가 150px 인 이미지에 min-height 가 100px 로 설정되면 이 이미지는 변화가 없습니다. (이미 100px 보다 크니까요)

 
+ 관련 CSS +