-
슬라이드 이미지 중앙에서 확대하기프론트엔드/CSS 2024. 2. 24. 17:42728x90
<!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' 카테고리의 다른 글
모바일 상단바(주소창) 문제 해결하기 (0) 2024.09.22 position 기본개념 (0) 2024.02.12 SASS 입문 (0) 2023.07.17 부트스트랩 5 자주 쓰는 클래스 정리 (0) 2023.07.14 position 문제 (0) 2023.07.04
