๋ชฉ๋ก2022/03 (46)
whatisthis?
Opacity = ํฌ๋ช ๋ 0 : ์์ ํฌ๋ช 1 : ์์ ๋ถํฌ๋ช opacity: 0.9 opacity: 90% A in the range 0.0 to 1.0, inclusive, or a in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range. - ์์์ rgba์์ a(์ํ๊ฐ)์ ํด๋นํจ. REF > opacity - CSS: Cascading Style Sheets | MDN The opa..
Box-shadow box-shadow๋ฅผ ์ด์ฉํด์ ๋ค์ํ ๋๋์ ๋ผ ์ ์์. ์๋ฅผ๋ค๋ฉด, ์์ฆ ์ ํํ๋ neumorphism, Skeuomorphism ๋ฑ ๐ป ** neumorphism ** Skeuomorphism h-offset (x) v-offset (y) blur (ํ๋ฆฐ์ ๋) spread (๊ทธ๋ฆผ์ ์ฌ์ด์ฆ) color (์์) ์์ผ๋ก (์์ ๋ฐ๋๋ฉด ์ ๋ ์๋จ) ์์ฑํด์ค์ผํจ. /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); - ๋ณดํต spread-radius๋ 0์ผ๋ก ํด์ค๋ค. (๊ทธ๋ฆผ์ ์์ฒด๊ฐ ์ปค์ง) ์์ - ๋ฒํผ์ ๋ง์ฐ์ค ์ฌ๋ ธ์๋ (hover) box-..
CSS - Animation practice ๐ป ๋ด๊ฐ ์์ฑํ ์ฝ๋ * { box-sizing: border-box; margin: 0; } body { font-family: "Mulish", sans-serif; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 100px; } .loading-title { color: #151b26; font-size: 18px; line-height: 1.33333333; margin-bottom: 20px; animation-name: loading-effect; animation-duration: 1000ms; a..
CSS - Transition practice * { box-sizing: border-box; margin: 0; } body { font-family: "Lato", sans-serif; background-color: #525252; } button, input, textarea { font-family: "Lato", sans-serif; } โ button, input, textarea ๊ฐ์ form ์์ ์์ ํ ์คํธ๋ค์ body์ font-family ํด์ค๋ ์๋จน๋ ๊ฒฝ์ฐ๊ฐ ์์ผ๋ฏ๋ก ๋ฐ๋ก ์ ๋ ๊ฒ font-family ํด์ฃผ์. (๋๋ ์ฌํ * selector์ ํด์คฌ์๋๋ฐ ๊ทธ๊ฑด ์ข ํจ์จ์ ์ด์ง ์๋ค๊ณ ํ๋ค..) button { background-color: #fff; border: none; cur..
CSS Animation animation vs transition - ๋์ ์์ฐํ ๋ค๋ฅธ ์์ฑ์. transition : ์์ฑ์ '์ ํ' animation : ๊ฐ property๋ฅผ ์ชผ๊ฐ์ ์ฌ์ฉํจ. (transition์ ์๊ธฐํ์ผ๋ก ์ ์์ง๋ง) /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation - CSS: Cascading Style Sheets | MDN animation CSS ์์ฑ์ ๋ค์์ ์คํ์ผ์ ์ ํํ๋ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํฉ๋๋ค. animation-name (en-US), animation-duration, animation-tim..
CSS Transition transition - CSS: Cascading Style Sheets | MDN transition CSS ์์ฑ์ transition-property (en-US), transition-duration (en-US), transition-timing-function (en-US) ๊ณผ transition-delay๋ฅผ ์ํ ๋จ์ถ ์์ฑ์ ๋๋ค. ์ด ์์ฑ์ผ๋ก ์๋ฆฌ๋จผํธ์ ๋ ๊ฐ์ง ์ํ ์ฌ์ด์ ๋ณํ๋ฅผ ์ค ์ developer.mozilla.org ์๋ฆฌ๋จผํธ์ ๋ ๊ฐ์ง ์ํ ์ฌ์ด์ ๋ณํ๋ฅผ ์ค ์ ์์. property - ์ด๋ค ์์ฑ์ ์ ์ฉํ ์ง? duration - ๋ณํ๊ฐ ์ผ๋ง๋์ ์ผ์ด๋ ์ง? - ๋จ์ : ms / s .selector { transition: background-color 2..