코드▼ 더보기 //scss @import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300&display=swap'); body, html { height: 100%; } body { position: relative; display: grid; overflow: hidden; grid-template: "body"; place-content: center; place-items: center; margin: 0; > * { grid-area: body; } &::after { position: absolute; bottom: 0; left: 0; width: 100vw; background-color: inherit; } } ...

코드▼ 더보기 //html //css body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; } .box { position: relative; width: 400px; height: 300px; } .box span{ position: absolute; inset: 0; transition: 0.5s; background: url("사진 들어갈 곳"); background-size: cover; } .box span:nth-child(1){ clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%); transition-delay: 0; } .box span:nth-child(2)..