원하는 태그 크기 확대/축소 하기 : zoom

반응형을 구현할 때, 해당 요소가 너무 큰 경우에는 flex를 사용하여 자연스럽게 떨어지게 하거나 미디어쿼리를 사용하여 해당요소를 작게 하는 등 여러 가지 방법을 이용하여 구현한다. 

하지만 다른 사람의 작업물이거나 복잡하게 구현되어 있는 경우에는 어디서 부터 손을 대야 할지 감이 잡히지 않을 때가 있다.

더군다나 반응형을 구현하기 위해 디바이스별로 정해놓은 구간이 있는 상황에서 새로 레이아웃을 획정해야 하는 경우에는 난감한 경우가 발생한다. 애매한 구간에서만 동일한 비율로 간단하게 줄일 수 있다면 좋을 텐데 말이다.

이러한 경우에 간단하게 css의 zoom 프로퍼티를 사용하면 된다. 

zoom : 0.5; // 50% 촉소
zoom : 1;   // 기본 
zoom : 2;   // 2배 확대

 

미디어쿼리를 사용하여 일정구간을 더 만들어서 축소효과를 주어 최대한 다른 css를 건드리지 않고 구현할 수 있게 되었다. 그러나 간단하게 구현을 할 수 있지만 단점이 있다. 

바로 zoom 속성은 css 표준 속성이 아니라는 것이다.

 

현재 대부분의 브라우저를 지원하지만 Firefox(파이어폭스)는 지원하지 않는다.

이제 파이어폭스도 지원한다고 합니다.

zoom속성보다는 transform이 더 선호된다고 한다. 그리고 크기 조절 외에도 더 많은 기능들을 가지고 있다. transform은 여백 등이 생기는 등 랜더링의 방식 zoom과는 조금 다르기때문에 둘 중 하나를 잘 선택해서 사용해야 한다.

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom