목차
- max-width 예제 - 최대 너비
- max-width 정의
- max-width 구문
max-width 예제 - 최대 너비
[예제1] - px 단위
<style>
h1, h2 {
max-width: 250px;
border:1px solid red;
margin:0 auto;
}
</style>
<h1>Homzzang.com</h1>
<h2>HTML, CSS, JS, JQEURY, SQL, PHP</h2>
결과보기
[예제2] - % 단위
<style>
h1,h2 {
max-width: 33%;
border:1px solid red;
margin:0 auto 10px;
}
</style>
<h1>Homzzang.com</h1>
<h2>HTML, CSS, JS, JQEURY, SQL, PHP</h2>
결과보기
max-width 정의
요소의 최대 너비 지정.
1.
요소 안 내용이 max-width 범위 벗어나면 자동으로 요소 높이값이 변함.
(주의: 다 그런 건 아니니 CSS 처리 필요. 위 예제 결과보기 클릭해 확인)
2.
- 상속여부: X
- 애니효과: O
- CSS버전: CSS2
- JS구문: object .style.maxWidth = "500px";
4.
IE7 이상 주요 최신브라우저 모두 지원.
max-width 구문
selector {max-width: 속성값;}
[속성값]
none
최대 너비 없음. (기본값)
px, cm, % 등 단위
(예) 100px , 10cm , 50%
initial
이 속성의 기본값으로 설정.
inherit
부모 요소의 속성값 상속.
