๐Crucial : Transitions, Position Property
๐Important : Opacity & Alpha Channel, Google Fonts, The Full Story on the Background
๐Nice To Have : Transforms
Opacity, Alpha channel
โ rgba : rgb์ ํฌ๋ช ๋ alpha ์ฑ๋์ ์ถ๊ฐํ ๊ฒ 0์ ์์ ํ ํฌ๋ช , 1์ ์์ ํ ๋ถํฌ๋ช -> rgba(255, 255, 0, 0.5)
-> rgba๋ ์์์ ์๊ด์์ด ์๊ธฐ ์์ ๋ง ํฌ๋ช ๋๋ฅผ ์กฐ์ ํจ
โ opacity : ํน์ ์์์ ์ง์ ํด์ ๊ทธ ํด๋น ์์๋ ํด๋น ์์์ ์ฝํ ์ธ ๋ฐ ์์์ ํฌํจํ ์ ์ฒด ์์์ ํฌ๋ช ๋๋ฅผ ๊ฒฐ์
โ hex : rgba๋ฅผ hex ์ํ๋ก ๋ํ๋ด๊ณ ์ถ๋ค๋ฉด 16์ง๋ฒ 8๊ฐ๋ฅผ ์์ฑํ๋ฉด๋จ -> #ff00ff00 (rgba ๋ ๋ง์ด ์ฌ์ฉ)
Position
โช ๋ฌธ์ ๋ด์์ ์์์ ์์น๋ฅผ ๊ฒฐ์ ํจ
โ๏ธ static : ๋ํดํธ ํฌ์ง์ , top, bottom, left, right์ ์ํฅ์ ๋ฐ์ง ์์
โ๏ธ relative : ๋ฌธ์์ ์ผ๋ฐ์ ์ธ ํ๋ฆ์ ๋ฐ๋ผ ์์นํ์ง๋ง top, bottom, left, right์ ์ํฅ์ ๋ฐ์
โ๏ธ absolute : ๋ฌธ์์ ์ผ๋ฐ์ ์ธ ํ๋ฆ์์ ์์๊ฐ ์ ๊ฑฐ๋๊ณ ๊ณต๊ฐ๋ ๋ฐฐ์ ๋์ง ์์ (๊ฒน์ณ์ ๋๋๊ฒ์ด ๊ฐ๋ฅํจ)
-> ๊ฐ์ฅ ๊ฐ๊น์ด ์์นํ ์กฐ์์ ์์น๋ body๋ฅผ ๊ธฐ์ค์ผ๋ก top, bottom, left, right์ ์ํฅ์ ๋ฐ์
โ๏ธ fixed : ๋ฌธ์์ ์ผ๋ฐ์ ์ธ ํ๋ฆ์์ ์์๊ฐ ์ ๊ฑฐ๋๊ณ ๊ณต๊ฐ๋ ๋ฐฐ์ ๋์ง ์๊ณ ์ปจํ ์ด๋ ๋ธ๋ก์ ํญ์ ๊ณ ์ ๋์ด์์
-> ์คํฌ๋กค์ ํด๋ ๊ทธ ์๋ฆฌ์ ํญ์ ์์นํ๋ค๋ ์๋ฏธ
โ๏ธ sticky : ์์ํ ๋๋ ์์น๊ฐ ๊ณ ์ ๋์ด์์ง ์์ง๋ง ์คํฌ๋กคํ๊ฒ๋๋ฉด ์คํฌ๋กค๊ณผ ํจ๊ป ๊ทธ ์์น์ ๊ณ ์ ๋์ฑ ์ด๋
Transition
โช ํ ํน์ฑ ๊ฐ์์ ๋ค๋ฅธ ๊ฐ์ผ๋ก ๋ณํํ ๋ transition์ผ๋ก ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ค ์ ์์
โช ์ ํํ๋ ค๋ ํน์ฑ์ ์ถ๋ ค์ ํ ๋ฒ์ ๋ค ์ ํํ์ง ๋ง๊ฒ -> ์ฝ๋๋ฅผ ๋ณ๊ฒฝ์ํค๋ฉด์ ์ด์ํ๊ฒ ์ ํ์ด ๋ฐ์ํ ์ ์์(์ํ๋ ํน์ฑ๋ง ์ ํ)
h1{
transition : property_name duration timing_function delay;
}
โ property name : transition๋ property์ ์ด๋ฆ์ ์ ์ด์ค ex) background-color
โ duration : ์ ํ๋๋๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ ex) 3s๋ฉด 3์ด์ ๊ฑธ์ณ ์ ํ๋จ
โ timing funtion : ease, ease-in ์ฒ๋ผ ์ด๋ค ๋ฐฉ์์ผ๋ก ์ ํ์ด ์ผ์ด๋๊ฒ ํ ์ง ์ค์ ํ๋ ๋ถ๋ถ
โ delay : ์ ํ์ด ์์๋๊ธฐ๊น์ง ๊ฑธ๋ฆฌ๋ ์๊ฐ(์ง์ฐ), ์ค์ ํ๋ฉด ๋ฐ๋ณตํด์ ์ ํ์ด ์ผ์ด๋จ
Transform
โ๏ธ transform-origin : ํ์ ์ค์ฌ์ ์์น๋ฅผ ๋ณ๊ฒฝํ ์ ์์ -> top right, bottom left์ ๊ฐ์ ํ์์ผ๋ก ์ธ ์ ์์
โ๏ธ rotate(20deg) : ์์๋ฅผ ํ์ ์ํด -> 20 degree ๋งํผ ํ์ ์ํด -> rotateX(), rotateY()๋ ๊ฐ๋ฅ
โ๏ธ scale() : ์์์ ํฌ๊ธฐ๋ฅผ ๋ณํ์ํฌ ์ ์์, 0.5ํ๋ฉด ์ ๋ฐ, 2ํ๋ฉด 2๋ฐฐ๊ฐ ๋จ -> scaleX(), scaleY() ๊ฐ๋ฅ
โ๏ธ translate() : ์์์ ์์น๋ฅผ ๋ณํ์ํฌ ์ ์์ -> translateX(), translateY()
โ๏ธ skew() : ์์๋ฅผ 2์ฐจ์ ํ๋ฉด์์์ ๊ธฐ์ธ์ด๋ ๊ธฐ๋ฅ -> skewX(), skewY()
โช ๊ฐ transform๋ค์ ๋์ด์ฐ๊ธฐ๋ก ๊ตฌ๋ถํด์ ๋์ดํ๋ฉด ์ฌ๋ฌ๊ฐ ์ ์ฉํ๊ธฐ ๊ฐ๋ฅ
Background
โ๏ธ background-image : url("") -
โ๏ธ background-size : cover(๋น์จ์ ์ง ๊ฝ์ฐจ๊ฒ ์๋ฆผ์์), contain(๋น์ธ ์ ์ง ๊ฝ์ฐจ๊ฒ ์๋ฆผ์์ด(๋ฐ๋ณต๋จ)), auto
โ๏ธ background-repeat : ์ด๋ฏธ์ง๊ฐ ๋ฐ๋ณต๋๊ฒ ํ ๊ฑด์ง ์ค์ ๊ฐ๋ฅ, no-repeat
โ๏ธ background-position : ์ด๋ฏธ์ง์ ์ด๋ค๊ณณ์ ๊ธฐ์ค์ผ๋ก ๊ฐ์ ธ์ฌ ๊ฒ์ธ์ง ์ค์ ๊ฐ๋ฅ(top, botton, left, right, center)
โช property๋ฅผ ์ด๋ค ์์๋ก ์์ฑํ๋ ํฌ๊ฒ ์๊ด์์
(๊ทธ๋ฌ๋ background-size๋ฅผ ์์ฑํ ๋ position ๋ค์ /์ ํจ๊ป "center/80%" ํ์์ผ๋ก ์์ฑํด์ผํจ
HTML ์ฃผ์์ฌํญ
โช ์นํ์ด์ง๋ฅผ ๋ง๋ค๋ <img> ํ๊ทธ๋ฅผ ํ ์ค์ 3๊ฐ์ฉ ๋์ด๊ฒ ์ฝ๋ฉํ๋ค๊ณ ํ์
โช ์ด๋ <img> ํ๊ทธ์ width๋ฅผ ๋ถ๋ช %์ ๋ง์ถฐ์ 3๊ฐ๊ฐ ๋ฐฐ์น๋๋๋ก ํ ์ ์์์๋ ๋ถ๊ตฌํ๊ณ 2๊ฐ์ฉ๋ง ๋ณด์ด๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค
-> ์๋๋ฉด ๊ฐ ํ๊ทธ๋ค ์ฌ์ด์ ๊ณต๋ฐฑ(ํ์ดํธ ์คํ์ด์ค)๊ฐ ์๊ธฐ ๋๋ฌธ
-> ์คํ์ด์ค๋ฅผ ๋ชจ๋ ์ง์์ฃผ๊ณ ํ๊ทธ๋ฅผ ๋ถ์ฌ์ ์์ฑํ๋ฉด ๋ฌธ์ ํด๊ฒฐ
-> <img>๋ <span>์ฒ๋ผ ์ธ๋ผ์ธ ์์์ด๊ธฐ ๋๋ฌธ์ html์ ๊ณต๋ฐฑ์ด ์๋ค๋ฉด html์ ๋ฐ๋ก ์ ์ฉ๋๋ ๊ฒ์ด ๋จ์
// ์ด๋ฐ์ ์๋ฌด๋ฆฌ ํด๋ 2๊ฐ๋ง ๋ณด์ฌ์ ๊ณ์ ๊ตฌ๊ธ๋ง ํ๋๋ฐ๋ ํด๊ฒฐ์ด ์๋ผ์ ๊ณ ์ํ์๋๋ฐ ๋ง์ง๋ง์ ์๋ ค์ฃผ์ฌ..
hover.css
body {
font-family: 'Roboto Condensed', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #1f1b29;
}
button {
background: none;
color: #ff704f;
border: 2px solid;
padding: 1em 2em;
font-size: 1em;
transition: all 0.2s;
}
button:hover {
border-color: #ffe84f;
color: white;
box-shadow: 0 0.5em 0.5em -0.4em #ffe84f;
transform: translateY(-0.25em);
cursor: pointer;
}
photosite.css
img {
width: 30%;
margin: calc(10%/6);
}
nav {
text-transform: uppercase;
border-bottom: 2px solid #f1f1f1;
width: 30%;
margin-left: calc(10%/6);
padding: 1.2em 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.5em;
}
'๊ณต๋ถ ๊ธฐ๋ก > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Udemy] The Web Developer Bootcamp 2022 : [11] ๊ฐ๊ฒฉํ ์ฝ๋ฉํ๊ธฐ (0) | 2022.07.19 |
|---|---|
| [Udemy] The Web Developer Bootcamp 2022 : [10] ๋ฐ์ํ ๋ฐ Flexbox (0) | 2022.07.18 |
| [Udemy] The Web Developer Bootcamp 2022 : [8] CSS Box Model (0) | 2022.07.11 |
| [Udemy] The Web Developer Bootcamp 2022 : [7] CSS Selector (0) | 2022.07.11 |
| [Udemy] The Web Developer Bootcamp 2022 : [6] CSS ๊ธฐ์ด (1) | 2022.07.09 |