HTML에서 마우스 오버 시 요소를 확대, 축소하는 방법입니다.
확대, 축소는 아래와 같이 자바스크립트로 CSS를 직접 제어하여 구현할 수도 있지만
function zoomIn(event) {
event.target.style.width = "600px";
}<img src="/image.jpg" onmouseenter="zoomIn(event)" />
이 작업은 CSS class의 변경만으로도 구현이 가능한 작업이기 때문에 위와 같이 JAVASCRIPT로 style을 직접 제어하지는 않겠습니다.
자바스크립트로 style을 직접 제어하게 되면 요소에 인라인 스타일이 적용되는데, 이후의 코드 관리와 확장성에 부정적인 영향을 끼치는 경우가 많습니다.
예를 들면 inline 스타일은 요소에 적용되는 여러 가지 스타일 중에서 가장 우선순위가 높기 때문에, 이후에 다른 class로 스타일을 적용했을 때 특정 프로퍼티가 inline 스타일에 의해 적용되지 않을 수 있습니다.
CSS를 이용해서 div를 확대, 축소하기
1. transform scale 활용
<!DOCTYPE html>
<html>
<head>
<style>
.small {
width: 100px;
height: 100px;
}
.scale-up {
transform: scale(1.3);
}
.bg-blue {
background: blue;
}
.bg-green {
background: green;
}
.bg-red {
background: red;
}
</style>
</head>
<body>
<div>
<div class="small bg-blue" onmouseenter="zoomIn(event)" onmouseleave="zoomOut(event)"></div>
<div class="small bg-green" onmouseenter="zoomIn(event)" onmouseleave="zoomOut(event)"></div>
<div class="small bg-red" onmouseenter="zoomIn(event)" onmouseleave="zoomOut(event)"></div>
</div>
<script>
function zoomIn(event) {
event.target.classList.add("scale-up");
}
function zoomOut(event) {
event.target.classList.remove("scale-up");
}
</script>
</body>
</html>
마우스 오버 시 transform 속성과 scale 값을 활용하여 요소를 1.3배 확대하고, 마우스 leave 시에 다시 1배로 축소합니다. transform은 요소의 레이아웃을 변경하지 않고 해당 요소의 크기만 확대, 축소하기 때문에 아래 예시와 같이 다른 요소에 영향을 주지 않고 확대, 축소됩니다. (=> 밀려나지 않음)
(직접 마우스를 오버해 보세요)
2. width, height 조절
<!DOCTYPE html>
<html>
<head>
<style>
.small {
width: 100px;
height: 100px;
}
.big {
width: 130px;
height: 130px;
}
.bg-blue {
background: blue;
}
.bg-green {
background: green;
}
.bg-red {
background: red;
}
</style>
</head>
<body>
<div>
<div class="bg-blue small" onmouseenter="zoomIn(event)" onmouseleave="zoomOut(event)"></div>
<div class="bg-green small" onmouseenter="zoomIn(event)" onmouseleave="zoomOut(event)"></div>
<div class="bg-red small" onmouseenter="zoomIn(event)" onmouseleave="zoomOut(event)"></div>
</div>
<script>
function zoomIn(event) {
event.target.classList.add("big");
}
function zoomOut(event) {
event.target.classList.remove("big");
}
</script>
</body>
</html>
이번엔 요소의 width와 height를 직접 크게 설정하였습니다. width와 height가 변경되면 해당 요소가 위치한 레이아웃에 영향을 주기 때문에 인접한 요소들이 양쪽으로 밀려나면서 확대되는 모습을 확인할 수 있습니다. (=> 밀려남)
(직접 마우스를 오버해 보세요)
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar (11) | 2019.08.20 |
|---|---|
| [HTML, CSS] 내용이 요소(div 등)를 벗어날 때 스크롤 적용하는 방법 - overflow (3) | 2019.08.18 |
| [HTML, JAVASCRIPT] fetch를 사용하여 데이터 요청 후 화면에 적용하는 방법 ajax (4) | 2019.08.17 |
| [HTML, CSS] div 자식요소 가운데 정렬하는 방법 - margin, text-align, flexbox (1) | 2019.08.14 |
| [HTML] video 태그로 동영상 플레이어 만드는 방법 (0) | 2019.08.14 |
