[css] CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, IE7) 에러 해결 핵

1. zoom 예제 - 요소 확대
2. zoom 정의
3. zoom 구문
4. 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