ํฌ๋ช
๋๊น์ง ํฌํจ๋ Rgb
rgba- ( , , , alpha channel)
alpha = 0 ํฌ๋ช
alpha = 1 ๋ถํฌ๋ช
hex = ff ๋ถํฌ๋ช
์ ์ฒด ์์์ ํฌ๋ช
๋ ๊ด์ฌ
static - ์ผ๋ฐ์ ๋ฌธ์ ํ๋ฆ์ ๋ฐ๋ผ ๋ฐฐ์น top left px์ค์ ๊ณผ ๊ฐ์ ์์์ ์ ์ฉ์ ๋ฐ์ง ์์
relative - ์์๋ฅผ ์ผ๋ฐ์ ๋ฌธ์ ํ๋ฆ์ ๋ฐ๋ผ ๋ฐฐ์น ์์ ๊ฐ์ ์์์ ๋ํ ์ ์ฉ์ ๋ฐ์
absolute - ๊ณต๊ฐ ๋ฐฐ์ x ๊ฐ์ฅ ๊ฐ๊น์ด ์์น์ ์ง์ ์กฐ์ ์์์ ๋ํด ์๋์ ๋ฐฐ์น ๋จ ์๋ค๋ฉด
์ด๊ธฐ ์ปจํ
์ด๋ ๋ธ๋ก์ ๊ธฐ์ค ์ผ์
fixed - ๊ณต๊ฐ ๋ฐฐ์ x
sticky
top,left๊ฐ์ ์์๋ฅผ ์ด์ฉํด์ ๊ณต๊ฐ์ ๋ฒ๋ฆด์ ์์ ์๋ก๋ถํฐ ๋ช px ์ด๋ฐ์
property name
duration
timing function
delay
.circle {
width: 300px;
height: 300px;
background-color: magenta;
transition: background-color 1s,ease-in,border-radius 2s;
}
.circle:hover {
background-color: cyan;
border-radius: 50%;
}
section div {
height: 100px;
width: 100px;
background-color: black;
margin: 20px 20px;
transition: margin-left 3s;
}
section:hover div {
margin-left: 500px;
}
div:nth-of-type(1) {
transition-timing-function: ease-in;
}
div:nth-of-type(2) {
transition-timing-function: ease-out;
}
div:nth-of-type(3) {
transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}
div:nth-of-type(4) {
transition-timing-function: ease-in;
}
transition ์ง์ ํ ๋ all์์๋ ์ฌ์ฉ๊ฐ๋ฅํ์ง๋ง ๊ฐ๋ณ ์์๋ก ์ง์ ํ๋ ๊ฒ์ ์งํฅ
๋์ค์ ์์ ํ ๋ ์ฉ์ดํจ
transform : skew(30deg) scale(1.3)
์ด๋ฐ์์ผ๋ก ์ฌ์ฉ๊ฐ๋ฅ
์ฌ๋ฌ ์ต์
์ด ์์
effect๋ฅผ ์ด๋ค ์์๋ค์ ์ด์ฉํด์ ๋ง๋๋ ์ง
body {
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #151b29;
}
button {
background: none;
color: #ffa260;
border: 2px soild;
padding: 1.5em 2em;
font-size: 1em;
transition: 1s;
}
button:hover {
border-color: #f1ff5c;
color: white;
box-shadow: 0 0.5em 0.5em -0.4em yellowgreen;
transform: translateY(-0.25em);
}
color, img, size, etc.
no repeat - ์ด๋ฏธ์ง ๋ฐ๋ณต ๋ง์ ์ ์์
background-image: url("https://images.unsplash.com/photo-1564442038901-4f9a19d3d456?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1227&q=80");
background-size: cover;
background-position: top;
margin: 0 auto;
์๊ธฐ
background: center/cover url("https://images.unsplash.com/photo-1564442038901-4f9a19d3d456?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1227&q=80");
Google Fonts
๋ณดํต pairing ๊ธ๊ผด์ด ์์
๋จธ๋ฆฟ๋ง - ๋ณธ๋ฌธ