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
'프론트엔드 > CSS' 카테고리의 다른 글
| position 기본개념 (0) | 2024.02.12 |
|---|---|
| SASS 입문 (0) | 2023.07.17 |
| 부트스트랩 5 자주 쓰는 클래스 정리 (0) | 2023.07.14 |
| position 문제 (0) | 2023.07.04 |
| table table-cell 속성을 이용하여 수평으로 나열하기 (0) | 2023.06.24 |