์ ๊ฐ ๊ฐ๋ฐํ ๋ ์กฐ๊ธ์ด๋ผ๋ ํธํ๊ฒ ํ๊ฒ๋ ๊ธฐ๋กํด ๋์ css ๋ชจ์์ง ์ ๋๋ค.
โ๏ธ ๋ฒํผ ๊ธฐ๋ณธ css ์ง์ฐ๊ธฐ
button {
border: 0;
background-color: transparent;
}
โ๏ธ ๋ด์ฉ๋ฌผ์ ๊ฐ์ด๋ฐ๋ก ๋ง๋ค๊ธฐ
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
โ๏ธ ๋ฐฐ๊ฒฝ์ ๊ทธ๋ผ์ด๋ฐ์ด์
ํจ๊ณผ ์ฃผ๊ธฐ
background: linear-gradient(180deg, #f3f186 0%, #f5c96b 100%);
height: 100vh;
โ๏ธ ์ด๋ฏธ์ง ๊ฐ์ด๋ฐ๋ก ๊ฝ์ฐจ๊ฒ ์
ํ๊ธฐ
background-position: center;
background-size: cover;
โ๏ธ ๋งํฌ ํ๊ทธ์์ ๋ฐ์ค ์์ ๊ธฐ
text-decoration: none;
โ๏ธ ๋ฒํผ ๊ฝ์ฐจ๊ฒ ๋ง๋ค๊ธฐ
Button {
display: block;
width: 100%;
text-align: center;
}
โ๏ธ input์์ ํน์ ํ์
๋ง ์ ํํ๊ธฐ
input[type=text]
{
....
}
โ๏ธ ์คํฌ๋กค ๋ด๋ ค๋ ์์น ๊ณ ์ ์ํค๊ธฐ (sticky)
.sticky {
position: sticky;
top: 0;
background: #8a4baf;
}
sitcky ์์ฑ์ ํ์์ ์ผ๋ก top, bottom, left, right๋ค ์ค์ ํ๋๋ฅผ ํ์์ ์ผ๋ก ์ค์ ํด์ฃผ์ด์ผ ํ๋ค.
'๐Language > HTML & CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
svg ์ด๋ฏธ์ง ์ฌ์ด์ฆ ์ค์ด๊ธฐ (0) | 2023.03.31 |
---|---|
๋ฆฌ์กํธ) ๋์ ์ผ๋ก ํด๋์ค ์ถ๊ฐํด์ css ํจ๊ณผ์ฃผ๊ธฐ (0) | 2022.07.20 |
๋ฆฌ์กํธ fontawesome ์ฌ์ฉ๋ฐฉ๋ฒ (0) | 2022.07.11 |
TIL) id ์์ฑ๊ณผ class ์์ฑ์ ์ฐจ์ด์ ๋ํด์ ์ค๋ช ํด์ฃผ์ธ์. (0) | 2022.05.23 |
CSS ๊ฐ๊ฒฉ์ ๋ง์ถ๊ณ ์ถ์๋ฐ ์๋ฉ๋๋ค..! css ๋ณด๋ผ์ ๋ถ๋ถ ์์ ๊ธฐ (0) | 2022.05.20 |