목차
- zoom 예제 - 요소 확대
- zoom 정의
- zoom 구문
- clearfix 핵 (= IE6, IE7 에러해결)
zoom 예제 - 요소 확대
<style type="text/css">
.zoom1 { zoom:1; }
.zoom2 { zoom:2; }
.zoom3 { zoom:3; }
.zoom4 { zoom:4; }
</style>
<img src="https://i.imgur.com/WfW5mBC.png" alt="1배확대" class="zoom1"><br />
<img src="https://i.imgur.com/WfW5mBC.png" alt="2배확대" class="zoom2"><br />
<img src="https://i.imgur.com/WfW5mBC.png" alt="3배확대" class="zoom3"><br />
<img src="https://i.imgur.com/WfW5mBC.png" alt="4배확대" class="zoom4">
결과보기
zoom 정의
width height 속성값 사용 않고, 이미지의 특정 배수 만큼 확대.
1.
※ 원래는 IE 전용 속성이였음.
※ 익스플로러 하위 브라우저 (IE6, IE7) 에러 해결 핵.
※ 비표준이니 사용 비권장.
2.
콘텐츠 크기 조절하려먼 아래 속성 사용 권장.
transform: scale(x,y)
3.
파이어폭스 제외한 주요 브라우저 모두 지원.
zoom 구문
selector {zoom:속성값}
[속성값]
number
필수. 배율 크기 나타내는 정수.
(예)
※ 1배 경우, zoom:1 (기본값)
※ 2배 경우, zoom:2
clearfix 핵 (= IE6, IE7 에러해결)
overflow:auto; zoom:1