프론트엔드/CSS
슬라이드 이미지 중앙에서 확대하기
syleemomo
2024. 2. 24. 17:42
728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="window"></div>
<script src="app.js"></script>
</body>
</html>index.html 파일을 위와 같이 작성하자!
body{
margin: 0; padding: 0;
background-color: #0e1111;
width: 100vw; height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.window{
width: 500px;
height: 300px;
background-color: wheat;
transition: .5s;
}
.window:hover{
width: 100vw;
height: 100%;
}style.css 파일을 위와 같이 작성하자!
핵심은 슬라이드 이미지를 감싸고 있는 컨테이너인 body 요소에 플럭스박스를 적용하고 justify-content 와 align-items 모두 center 로 맞춰서 슬라이드 이미지를 화면 중앙에 배치한다. 그런 다음 슬라이드 이미지에 트랜지션을 적용한다. 특정 이벤트(마우스 호버)에서 슬라이드 이미지의 너비와 높이를 브라우저 사이즈로 확대한다.
728x90