CSS ํต์ฌ๊ฐ๋
ํ์คํ๊ฒ ๊ณต๋ถํ์ง ์์๋ ์ง๋ ๋ ์ ํํํ๋ฉฐ..
css์ ๋ํด ๋ชจํธํ๋ ๊ฐ๋ ์ ๋ค์ ์ ๋นํ๋ค.
#
์ .
๊ฐ id, class์์ ๋ช
ํํ๊ฒ ์ ๋ฆฌํ๋ค.
๋ํ ํ๋ก์ ํธ๋ฅผ ํ๋ฉฐ โ์ด๊ฑฐ ์ ์ฌ๊ธฐ ์ ์์นํด?โ ํ๋ ๋ถ๋ถ์ด margin ์์ ๋๋ฌธ์ด๋ผ๋ ๊ฒ์ ๊นจ๋ฌ์๋ค. ๊ทธ๋์์ ๋ง์ง ์์์ ๊ท์น์ ๋ชจ๋ฅด๊ณ ๋ฌด์์ ๊ตฌ๊ธ๋งํด ์ฐ๋น๋นํ ํด๊ฒฐํ๋๋ฐ, ์๋ฆฌ๋ฅผ ๊นจ๋ฌ์์ผ๋ ์ค์ํ๋ ์ผ์ด ์์ ๊ฒ ๊ฐ๋ค.
Block๊ณผ inline์ ๋ช ํํ ๊ตฌ๋ถํ๊ณ , ์ ํ์์ ์บ์ค์บ์ด๋ฉ ๊ฐ๋ ์ ์๊ณ ์ฐ์ ์์๋ฅผ ๊ณ ๋ คํด css๋ฅผ ์์ฑํ ์ ์๊ฒ ๋์๋ค.
#id๋ช
{ css ์์ฑ }
์ผ๋ก ์คํ์ผ ์ ์ฉ.class๋ช
{ css ์์ฑ }
์ผ๋ก ์คํ์ผ ์ margin : ์ธ๋ก ๊ฐ๋ก ํ ๋ ์ฌ์ด์ ,
** ์ฐ๋ฉด ์๋จ
- yellow(#ffff00), white(#ffffff), pink(#ff00ff) โฆ.
<html>
)์ font-sizecss๋ ๋น์ทํ ๊ธฐ๋ฅ๋ค๋ผ๋ฆฌ ๋ชจ์๋ ๋ชจ๋๋ณ๋ก ๋ฐ์ ํ๋ค. css1~css3๊น์ง๋ ํ๋์ ํ์ค์ผ๋ก ์๋ก์ด ๋ฒ์ ์ ๋ง๋ค์์ผ๋, ๋ฐ์ ์๋๊ฐ ๋๋ฆฌ๋ค๊ณ ํ๋จํด ์ง๊ธ์ ๋ชจ๋์๋ค๊ฐ level์ ๋ถ์ธ๋ค.
ex) Selector ์ ํ์ ๋ผ๋ ๋ฌธ๋ฒ์ ์๋ก์ด ๊ธฐ๋ฅ ์ถ๊ฐ โ Selector Level 3, 4 ์์ผ๋ก ํด๋น ๋ชจ๋๋ง ๋ฐ๋ก ๋ ๋ฒจ์ ์ฌ๋ฆฐ๋ค.
ํ ์คํธ ์คํ์ผ๋ง
line-height
: ์ค๊ณผ ์ค ์ฌ์ด ๊ฐ๊ฒฉ ์กฐ์ . 1 = ๊ธ์ ํฌ๊ธฐ์ ์๋์ ์ธ ๊ฐline-height : 1
์ด๋ฉด 32px ์ค ๊ฐtext-decoration
: ๋ฐ์ค, ์ทจ์์ ๋ฃ๊ธฐ ๋ฑ.background-image
: url('...')
,url('...')
,url('...')
โฆ ์ฌ์ฉbackground-position
/background-repeat
background-size
cover
: ๋น์จ ์ ์งํ๋ฉด์ ๊ฝ ์ฐจ๊ฒ. ์ด๋ฏธ์ง ์๋ฆด ์ ์์contain
: ๋น์จ ์ ์งํ๋ฉด์ ์ต๋ํ ํฌ๊ฒ. ์ด๋ฏธ์ง ์๋ฆฌ์ง ์์linear-gradient(์์, ์ข
๋ฃ)
deg
linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
box-shadow
- ๊ฐ๋ก, ์ธ๋ก, ํ๋ฆผ, ํผ์งopacity
์ ์ฒด ๋ถํฌ๋ช
๋. 0~1 ์ฌ์ด๋ง์ง/ํจ๋ฉ/๋ณด๋/์ฝํ ํธ
auto
์ฌ์ฉ ๊ฐ๋ฅwidth
์์ฑ์ด ์ ํด์ ธ์์ด์ผ ์๋์ผ๋ก ์ฑ์ธ ์ ์์box-sizing : border-box;
: ํ
๋๋ฆฌ๊น์ง ๋ชจ๋ ํจ์น ์์ญ์ ํฌ๊ธฐ๊ฐ ๋จoverflow
hidden, scroll, auto (๋์น ๋๋ง ์คํฌ๋กค) ๋ฑwhite-space
: nowrap - ์ฌ์ด ๋น๊ณต๊ฐ ์์ <h1>
, <p>
, <div>
๊ฐ์ ๊ฒ<a>
,<br>
,<img>
,<span>
direction
์์ฑ : ์ธ๋ผ์ธ ๋ฐฉํฅ ์ ํ ๋writing-mode: vertical-rl
์โ ์๋, ์คโ์ผdisplay : inline-block
์ธ๋ผ์ธ์ด์ง๋ง ๋ธ๋ก์ฒ๋ผ ๋๋น์ ๋์ด๋ก ์ ํ ์ ์์ (none - css๋ก html ํ๊ทธ ์๋ณด์ด๊ฒ ํ, block - ๋ธ๋ก์ผ๋ก ๋ฐ๊พธ๊ธฐ, inline - ์ธ๋ผ์ธ์ผ๋ก)float : right
์์๋ฅผ ํ์ด์ง ์ค๋ฅธ์ชฝ์ ๋ฐฐ์นํ๊ณ , ๊ทธ ์ฃผ๋ณ์ผ๋ก ์ธ๋ผ์ธ ์์๋ค์ ๋ฐฐ์นํ ์ ์๋ค/* ์ ํ์ ๋ชฉ๋ก */
์ ํ์1,
์ ํ์2 {
...
}
/* ์ ํ์ ๋์ ์ ํํ๊ธฐ */
์ ํ์1์ ํ์2{
}
/*Child Combinator ์์ ๊ฒฐํฉ์*/
๋ถ๋ชจ > ์ ํํ ์์{
}
/*Descendant Combinator ์์ ๊ฒฐํฉ์ */
๋ถ๋ชจ ์์ {
/*์ฌ์ด์ ์คํ์ด*/
}
/*๋ถ๋ชจ์ n๋ฒ์งธ ์์ ์ ํ์*/
๋ถ๋ชจ :nth-child(n){
/* n์ 1๋ถํฐ ์์ํจ
odd, even, 2n, 2n+1 ๋ฑ ๋ ๊ฐ๋ฅ
... (์ฒซ๋ฒ์งธ๋ถํฐ ๋ง์ง๋ง๊น์ง ์ ์ฒด)
*/
}
์ด๋ฆ์ด ๋ฏธ๋ฆฌ ์ ํด์ ธ์์
:hover
๋ง์ฐ์ค ์ฌ๋ฆฐ ์ํ:active
ํด๋ฆญํ์ ๋ ์ํ:focus
ํฌ์ปค์ค๊ฐ ์์ ๋:visited
์ด๋ฏธ ๋ฐฉ๋ฌธํ ๋งํฌ:focus-within
, :focus-visible
:first-child
, :last-child
css ๊ท์น์ ์์์ ๋ฐ๋ผ ๊ณ๋จ์์ผ๋ก ํฉ์น๋ ๊ฒ์ด๋ค. ์ฆ, css๊ฐ ์ ์ฉ๋๋ ์ฐ์ ์์์ด๋ค.
์์- MDN ์ฌ์ดํธ
๋ง์ง ์์๋ฅผ ์ดํดํ๋ ๊ฒ์ด ๋ค์ ํท๊ฐ๋ ธ๋ค.
์ด์ํ๋ ์์๋ ์์๊ฐ ํ์ฐ์ ์ผ๋ก ์ผ์ด๋๋ฉฐ ๋ถ๋ชจ ์์ ๊ฐ์๋ padding ์ด๋ border๋ก ๊ฒฝ๊ณ๋ฅผ ๋ช ์ํด์คฌ์ ๊ฒฝ์ฐ์๋ ์์๋์ง ์๋๋ค.
position: absolute
ย ๋ ์ํfloat: left/right
ย ๋ ์ํ (๋จ, clear ๋์ง ์์ ์ํ)display: flex
ย ์ผ ๋ ๋ด๋ถ flexbox itemdisplay: grid
ย ์ผ ๋ ๋ด๋ถ grid itemQ. ๋ง์ง ์์๋ img ํ๊ทธ์์ ์ผ์ด๋๋ ๊ฐ? โ ํ ์คํธ ํดํจ
Q. ์๋ฌธ์ด ํด๊ฒฐ๋์ง ์์์ ์ง๋ฌธ์ ๋จ๊ฒผ๋ค.. ๊ธฐ๋ค๋ฆฌ๋ ์ค ใ
inline์์๋ margin-left, right๋ง ๊ฐ๋ฅํ๊ณ top, bottom์ ์ ์ฉ๋์ง ์๋๋ค๊ณ ์๊ณ ์์ต๋๋ค. ํ์ง๋ง ์ด๋ฏธ์ง๋ ์์๋๋ ์ ์ฉ๋๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋๋ฐ<img๋ width์ heigh์ด ์ ์ฉ๋๋ ๋งํผ margin๋ ์ ์ฉ ๋๋ค>๊ณ ํ๋จํ์๋๋ฐ ๋ง๋๊ฑธ๊น์..?
๊ทธ๋ฐ๋ฐ ์ ์์์ธ img์ ๋ง์ง์ ์คฌ์ ๊ฒฝ์ฐ ๋ถ๋ชจ์ ์ค์์ ๋ ฌ๋ก ๋ง์ง์ด ์ ์ฉ๋๋ ๊ฒ์ด ์๋๋ผ ์๋ก ์ฌ๋ผ๊ฐ๊น์..?
์ด ๋นํ๊ธฐ ์์ด์ฝ์ ์ด๋ป๊ฒ ํ๋ฉด ์ธ๋ก ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌํ ์ ์์๊น์..