목차
max-height 예제 - 최대 높이
max-height 정의
max-height 구문
max-height 예제 - 최대 높이
[예제1] - px 단위
<style>
h1, h2 {
height:200px;
max-height: 100px;
border:1px solid red;
margin:0 auto;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<h2>HTML, CSS, JS, JQEURY, SQL, PHP</h2>
결과보기
[예제2] - % 단위
<style>
html,body {height:100%}
h1, h2 {
height:50%;
max-height: 25%;
border:1px solid red;
margin:0 auto;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<h2>HTML, CSS, JS, JQEURY, SQL, PHP</h2>
결과보기
max-height 정의
요소의 최대 높이 지정.
1.
요소 안 내용이 max-height 범위 벗어나면 overflow 속성으로 제어 필요.
2.
내용 height > max-height : max-height 적용.
내용 height < max-height : 내용 height 적용.
즉,
height가 max-height보다 커지는 걸 방지.
3.
상속여부: X
애니효과: O
CSS버전: CSS2
JS구문: object .style.maxHeight = "100px"
4.
IE7 이상 주요 최신브라우저 모두 지원 .
max-height 구문
selector {max-height: 속성값;}
[속성값]
none 최대 높이 없음. (기본값)
px, cm, % 등 단위
(예) 100px , 10cm , 50%
initial 이 속성의 기본값으로 설정.
inherit 부모요소의 속성값 상속.
주소 복사
랜덤 이동