• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
transition CSS - transition-duration 속성 ★ - 트랜지션 완료에 걸리는 시간 (= transiti…
transition CSS - transition-property 속성 - 트랜지션 효과 적용할 속성명 지정 (= transit…
transition CSS - transition-timing-function 속성 - 트랜지션 속도변경곡선 (= transit…
animation CSS - @keyframes 구문 - 애니메이션 코드 사용 선언 (= 애니사용 = @keyframes속성 …
animation CSS - animation 속성 ★ - 애니메이션 단축속성 (= animation속성 = 애니메이션속성, …
animation CSS - animation-delay 속성 - 애니지연시간 (= 작동지연시간 = 작동대기시간 = 작동준비시…
animation CSS - animation-direction 속성 - 애니방향 (= 움직임방향 = 애니메이션디렉션속성, I…
animation CSS - animation-duration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간…
animation CSS - animation-fill-mode 속성 - 애니미작동스타일 (= 움직임 작동안할때 스타일 = 애…
animation CSS - animation-iteration-count 속성 - 애니반복횟수 (= 움직임반복횟수, IE10…
animation CSS - animation-name 속성 - 키프레임명 (= 키프레임이름 = 애니이름 = 애니명 = 애니메…
animation CSS - animation-play-state 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/…
animation CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경…
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
9/25
목록
찾아주셔서 감사합니다. Since 2012