codepen2 [CSS] ์์ง์ด๋ ์ก๋ฉด์ฒด ์ ๋๋ฉ์ด์ ๐ฒ ์์ง์ด๋ ์ก๋ฉด์ฒด ์ ๋๋ฉ์ด์ ๐ฒ ์ด๋ฒ ํฌ์คํ ์์๋ ์์ง์ด๋ ์ก๋ฉด์ฒด ์ ๋๋ฉ์ด์ ์ ๋ง๋ค์ด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค! HTML ์ฝ๋ cubeํด๋์ค๋ฅผ ๊ฐ์ง div ํ๊ทธ ์์ div ๋ฐ์ค๋ฅผ 6๊ฐ ๋ง๋ค๊ณ ์ฒซ๋ฒ์งธ div ๋ฐ์ค์ ๊ธ์๋ฅผ ๋ฃ์ต๋๋ค. ์ฝ๋ฉ๊ณต์ฑ CSS ์ฝ๋ body { background-color: #999; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) tr.. 2022. 9. 22. [CSS] ํตํต ํ๋ ๊ธ์ ํจ๊ณผ๐ฐ ํตํต ํ๋ ๊ธ์ ํจ๊ณผ๐ฐ ์ด๋ฒ ํฌ์คํ ์์๋ ํตํต ํ๋ ๊ธ์ ํจ๊ณผ๋ฅผ ๋ง๋ค์ด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค! HTML ์ฝ๋ h1 ํ๊ทธ ์์ ์ฐ๊ณ ์ถ์ ๊ธ์ ์๋งํผ์ span ํ๊ทธ๋ฅผ ๋ง๋ ๋ค์ ๊ธ์๋ฅผ ์ฑ์ ๋ฃ๋๋ค. ์ฝ ๋ฉ ๊ณต ์ฑ โ ํฐ ์ค ํ ๋ฆฌ CSS ์ฝ๋ @import url('https://webfontworld.github.io/crown/CrownMychew.css'); html, body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { f.. 2022. 9. 22. ์ด์ 1 ๋ค์ ๋ฐ์ํ
