๐ ์น๊ณผ HTML&CSS์์ ๋์น๊ธฐ ์ฌ์ด ๊ฐ๋ ๋ค 3
์ค๋์ CSS์ ์์ฑ๋ค์ ๋ํด ํ์ตํ๋ค. ์ ๋ง ๋ง์ ์์ฑ๋ค๊ณผ ๊ฐ๋ ๋ค์ด ์์๋๋ฐ ๊ทธ์ค์ ์ค์ํ ๊ฒ๋ค์ ๋ฏธ๋ฆฌ ํ์ตํด๋๋ ๊ฒ์ด ์ข๋ค๊ณ ์๊ฐํ๋ค. ๋ฌผ๋ก ์ง์ ์นํ์ด์ง๋ฅผ ๋ง๋ค๋ฉด์ ํ์ตํ ์๋ ์๊ฒ ์ง๋ง ๊ทธ๋ฌ๋ฉด ๊ธฐ๋ฅ๋ค์ ๋ช ํํ๊ฒ ์์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ ๋์ค์ ํ์ฉํ์ง ๋ชปํ๊ฒ ๋๋ค.
๊ทธ๋์ ์กฐ๊ธ ๋นํจ์จ์ ์ด๋๋ผ๋ ๋๋ถ๋ถ์ ๊ธฐ๋ฅ๋ค์ ๋ฏธ๋ฆฌ ํ์ตํ๊ณ ๊ฐ๋ ๋ค์ ์ดํดํ๋ ๊ฒ์ด ๋์์ด ๋ ๊ฒ ๊ฐ๋ค. ์ ํ, ๋ณํ, ์์น ์กฐ์ ๋ฑ๊ณผ ๊ฐ์ ๊ฒ์ ์์ฑ๋ค์ ๋จ์์ด ์ธ์ฐ๋ ๊ฒ์ด ์๋๋ผ ์ดํด๊ฐ ํ์ํ๊ธฐ ๋๋ฌธ์ด๋ค(์๊ทผํ ์ด๋ ต๊ธฐ๋ ํ๋ค).
๊ทธ๋ผ ์์ํด๋ณด์! ๐โ
CSS ์์ฑ(Properties)
๊ฐ์
- ๋ฐ์ค ๋ชจ๋ธ
- ๊ธ๊ผด, ๋ฌธ์
- ๋ฐฐ๊ฒฝ
- ๋ฐฐ์น
- ํ๋ ์ค(์ ๋ ฌ)
- ์ ํ
- ์ ๋๋ฉ์ด์
- ๋ณํ
- ๋์
- ๊ทธ๋ฆฌ๋
- ๋ค๋จ
- ํ๋ฌ
๋ฐ์ค ๋ชจ๋ธ
-
width, height - ์์์ ๊ฐ๋ก/์ธ๋ก ๋๋น
- ๊ธฐ๋ณธ๊ฐ: auto - ๋ธ๋ผ์ฐ์ ๊ฐ ๋๋น๋ฅผ ๊ณ์ฐ
- ์ธ๋ผ์ธ์์ - ๊ฐ๋ก/์ธ๋ก ๋๋น๊ฐ ์๋์ผ๋ก ์ค์ด๋ฌ
- ๋ธ๋ก์์ - ๊ฐ๋ก ๋๋น๊ฐ ์๋์ผ๋ก ๋์ด๋จ, ์ธ๋ก ๋๋น๋ ์๋์ผ๋ก ์ค์ด๋ฌ
- ๋จ์ - px, em, vw ๋ฑ
- ๊ธฐ๋ณธ๊ฐ: auto - ๋ธ๋ผ์ฐ์ ๊ฐ ๋๋น๋ฅผ ๊ณ์ฐ
-
max-width, max-height - ์์๊ฐ ์ปค์ง ์ ์๋ ์ต๋ ๊ฐ๋ก/์ธ๋ก ๋๋น
- ๊ธฐ๋ณธ๊ฐ: none - ์ต๋ ๋๋น ์ ํ ์์
- ๋จ์ - px, em, vw ๋ฑ
-
min-width, min-height - ์์๊ฐ ์์์ง ์ ์๋ ์ต์ ๊ฐ๋ก/์ธ๋ก ๋๋น
- ๊ธฐ๋ณธ๊ฐ: 0 - ์ต์ ๋๋น ์ ํ ์์
- ๋จ์ - px, em, vw ๋ฑ
โ๏ธ ๋จ์
- px - ํฝ์
- % - ์๋์ ๋ฐฑ๋ถ์จ
- em - ์์์ ๊ธ๊ผด ํฌ๊ธฐ
- rem - ๋ฃจํธ ์์(html)์ ๊ธ๊ผด ํฌ๊ธฐ
- vw - ๋ทฐํฌํธ ๊ฐ๋ก ๋๋น์ ๋ฐฑ๋ถ์จ
- vh - ๋ทฐํฌํธ ์ธ๋ก ๋๋น์ ๋ฐฑ๋ถ์จ
- margin - ์์์ ์ธ๋ถ ์ฌ๋ฐฑ(๊ณต๊ฐ)์ ์ง์ ํ๋ ๋จ์ถ ์์ฑ
- ๊ธฐ๋ณธ๊ฐ: 0 - ์ธ๋ถ ์ฌ๋ฐฑ ์์
- auto: ๋ธ๋ผ์ฐ์ ๊ฐ ์ฌ๋ฐฑ์ ๊ณ์ฐ โ์์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํ์ฉ
- ๋จ์: px, em, vw ๋ฑ โ ๋ง์ด๋์ค ์ฌ์ฉ ๊ฐ๋ฅ
๐ margin์ ๋จ์ถ ์์ฑ
- margin: top, right, bottom, left ;
- margin: top, bottom left, right ;
- margint: top left, right bottom ;
- margint: top right nottom left ;
๐ margin์ ๊ฐ๋ณ ์์ฑ
- margin-top ;
- margin-bottom ;
- margin-left ;
- margint-right ;
- padding - ์์์ ๋ด๋ถ ์ฌ๋ฐฑ(๊ณต๊ฐ)์ ์ง์ ํ๋ ๋จ์ถ ์์ฑ โ ์์์ ํฌ๊ธฐ๊ฐ ์ปค์ง
- ๊ธฐ๋ณธ๊ฐ: 0 - ๋ด๋ถ ์ฌ๋ฐฑ ์์
- ๋จ์: px, em, vw ๋ฑ
- %: ๋ถ๋ชจ ์์์ ๊ฐ๋ก ๋๋น์ ๋ํ ๋น์จ๋ก ์ง์
๐ padding ๊ฐ๋ณ ์์ฑ
- padding: top, right, bottom, left ;
- padding: top, bottom left, right ;
- padding: top left, right bottom ;
- padding: top right nottom left ;
๐ padding์ ๊ฐ๋ณ ์์ฑ
- padding-top ;
- padding-bottom ;
- padding-left ;
- padding-right ;
-
border: ์ -๋๊ป ์ -์ข ๋ฅ ์ -์์; - ์์์ ํ ๋๋ฆฌ ์ ์ ์ง์ ํ๋ ๋จ์ถ ์์ฑ โ ์์์ ํฌ๊ธฐ๊ฐ ์ปค์ง
- ๊ธฐ๋ณธ๊ฐ: medium - ๊ธฐ๋ณธ๊ฐ์ด ์๊ธด ํ์ง๋ง ์ ๋งคํด์ ์ง์ ๋จ์๋ก ์ง์ ํ๋ ๊ฒ์ด ์ข์
- ๋จ์: px, em, %
- ๋ฐฉํฅ์ผ๋ก ๊ฐ๋ณ ์์ฑ ์ค์ ๊ฐ๋ฅ
-
border-style - ์์ ํ ๋๋ฆฌ ์ ์ ์ข ๋ฅ
- ๊ธฐ๋ณธ๊ฐ: none - ์ ์์
- solid: ์ค์ (์ผ๋ฐ ์ )
- dashed: ํ์
-
border-color - ์์ ํ ๋๋ฆฌ ์ ์ ์์์ ์ง์ ํ๋ ๋จ์ถ ์์ฑ
- ๊ธฐ๋ณธ๊ฐ: ๊ฒ์ ์
- ์์: ์ ์ ์์
- transparent: ํฌ๋ช
โ๏ธ ์์ ํํ
- ์์ ์ด๋ฆ
- Hex ์์์ฝ๋ - 16์ง์ ์์(Hexadecimal Colors) #000, #FFFFFF
- RGB - ๋น์ ์ผ์์ rgb(255, 255, 255)
- RGBA - ๋น์ ์ผ์์ + ํฌ๋ช ๋(0, 0, 0, 0.5)
-
border-radius - ๋ชจ์๋ฆฌ๋ฅผ ๋ฅ๊ธ๊ฒ ๊น์
- ๊ธฐ๋ณธ๊ฐ: 0 - ๋ฅ๊ธ๊ฒ ์์
- ๋จ์: px, em, % ๋ฑ
- border-radius: 10px ; โ ๋ฐ์ง๋ฆ์ด 10px์ธ ์๋งํผ ์๋ผ๋
- ๋ฐฉํฅ์ผ๋ก ๊ฐ๋ณ ์์ฑ ์ค์ ๊ฐ๋ฅ(์๊ณ๋ฐฉํฅ)
-
box-sizing - ์์์ ํฌ๊ธฐ ๊ณ์ฐ ๊ธฐ์ค์ ์ง์
- ๊ธฐ๋ณธ๊ฐ: content-box - ์์์ ๋ด์ฉ์ผ๋ก ํฌ๊ธฐ ๊ณ์ฐ
- border-box - ์์์ ๋ด์ฉ + padding + border์ ํฉ์ผ๋ก ํฌ๊ธฐ ๊ณ์ฐ โ ์ฌ๋ฌ ์์ฑ์ ๋ฃ์ง๋ง ํฌ๊ธฐ๋ ํค์ฐ๊ณ ์ถ์ง ์์ ๋!
-
overflow - ์์์ ํฌ๊ธฐ ์ด์์ผ๋ก ๋ด์ฉ์ด ๋์ณค์ ๋, ๋ณด์ฌ์ง์ ์ ์ดํ๋ ๋จ์ถ ์์ฑ
- ๊ธฐ๋ณธ๊ฐ: visible - ๋์น ๋ด์ฉ์ ๊ทธ๋๋ก ๋ณด์ฌ์ค
- hidden - ๋์น ๋ด์ฉ์ ์๋ผ๋
- auto - ๋์น ๋ด์ฉ์ด ์๋ ๊ฒฝ์ฐ์๋ง ์๋ผ๋ด๊ณ ์คํฌ๋กค๋ฐ ์์ฑ
- (scroll) - ๋์น ๋ด์ฉ์ ์๋ผ๋, ์คํฌ๋กค๋ฐ ์์ฑ(๊ฐ๋ก, ์ธ๋ก ๋ ๋ค ์๊น)
- ๊ฐ๋ณ ์์ฑ
- overflow-x
- overflow-y
-
display - ์์์ ํ๋ฉด ์ถ๋ ฅ(๋ณด์ฌ์ง) ํน์ฑ
- block ๊ธฐ๋ณธ๊ฐ: ์์(๋ ์ด์์) ์์
- inline ๊ธฐ๋ณธ๊ฐ: ๊ธ์ ์์
- inline-block ๊ธฐ๋ณธ๊ฐ: ๊ธ์ + ์์์์
- flex: ํ๋ ์ค ๋ฐ์ค(1์ฐจ์ ๋ ์ด์์) - ์ํ์ด๋ ์์ง์ด๋ ํ๋์ ์ถ์ผ๋ก ๋ ์ด์์ ์ ๋ ฌ
- gird: ๊ทธ๋ฆฌ๋(2์ฐจ์ ๋ ์ด์์) - x์ถ/y์ถ, ํ๊ณผ์ด ๋๊ฐ์ ์ฐจ์
- none: ๋ณด์ฌ์ง ํน์ฑ ์์, ํ๋ฉด์์ ์ฌ๋ผ์ง
-
opacity - ์์ ํฌ๋ช ๋
- ๊ธฐ๋ณธ๊ฐ: 1 - ๋ถํฌ๋ช
- 0~1: 0๋ถํฐ 1์ฌ์ด์ ์์์ ์ซ์
๊ธ๊ผด(์์ฒด)
-
font-size - ๊ธ์์ ํฌ๊ธฐ
- ๊ธฐ๋ณธ๊ฐ: 16px
- ๋จ์: px, em, rem ๋ฑ
-
font-weight - ๊ธ์์ ๋๊ป(๊ฐ์ค์น)
- ๊ธฐ๋ณธ๊ฐ: normal, 400 - ๊ธฐ๋ณธ ๋๊ป
- bold: 700 - ๋๊ป๊ฒ
- 100 ~ 900: 100๋จ์์ ์ซ์ 9๊ฐ, normal๊ณผ bold ์ด์ธ์ ๋๊ป
-
font-style - ๊ธ์์ ๊ธฐ์ธ๊ธฐ
- ๊ธฐ๋ณธ๊ฐ: normal - ๊ธฐ์ธ๊ธฐ ์์
- italic: ์ดํ ๋ฆญ์ฒด
-
font-family - ๊ธ๊ผด(์์ฒด) ์ง์ โ (ํ๋ณด๋ฅผ ์ ํ๋ ์ด์ : ๊ธ๊ผด์ ์ฌ๋ฌ ์ด์ ๋ก ์ฌ์ฉํ ์ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์)
- ๊ธ๊ผด1, โ๊ธ๊ผด2โ, ... ๊ธ๊ผด๊ณ์ด ; โ (๊ธ๊ผด ์ด๋ฆ์ ๋์ด์ฐ๊ธฐ๊ฐ ๋ค์ด๊ฐ๋ ๊ฒฝ์ฐ ๋ฐ์ดํ๋ก ๋ฌถ์ด์ค์ผ ํจ)
-
line-height: ํ ์ค์ ๋์ด, ํ๊ฐ์ ์ ์ฌ, ๊ธ์๋ ํ ์ค์ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ(์์ง ๊ฐ์ด๋ฐ)
- ์ซ์: ์์์ ๊ธ๊ผด ํฌ๊ธฐ์ ๋ฐฐ์๋ก ์ง์ - 1.4 โ ๊ธ๊ผด ํฌ๊ธฐ์ 1.4๋ฐฐ โ (๋ฐฐ์๋ก ์ ๋ ฅํ๋ ๊ฒ์ด ์ข์)
- ๋จ์: px, em, rem, % ๋ฑ
๊ธ๊ผด(์์ฒด) ์ข ๋ฅ
- serif - ๋ฐํ์ฒด ๊ณ์ด
- sans-serif - ๊ณ ๋์ฒด ๊ณ์ด โ(๊ฐ์ฅ ๋ง์ด ์)
- monospace - ๊ณ ์ ๋๋น(๊ฐ๋กํญ์ด ๋๋ฑ) ๊ธ๊ผด ๊ณ์ด
- culsive - ํ๊ธฐ์ฒด ๊ณ์ด
- fantasy - ์ฅ์ ๊ธ๊ผด ๊ณ์ด
๋ฌธ์
-
color - ๊ธ์์ ์์
- ๊ธฐ๋ณธ๊ฐ: rgb(0,0,0) - ๊ฒ์ ์
- ์์: ๊ธฐํ ์ง์ ๊ฐ๋ฅํ ์์
-
text-decoration: ๋ฌธ์์ ์ฅ์(์ )
- ๊ธฐ๋ณธ๊ฐ: ์ฅ์ ์์
- underline: ๋ฐ์ค
- overline: ์์ค
- line-through: ์ค์ ์
-
text-align: ๋ฌธ์์ ์ ๋ ฌ ๋ฐฉ์
- ๊ธฐ๋ณธ๊ฐ: ์ผ์ชฝ ์ ๋ ฌ
- right: ์ค๋ฅธ์ชฝ ์ ๋ ฌ
- center ๊ฐ์ด๋ฐ ์ ๋ ฌ
-
text-indent - ๋ฌธ์ ์ฒซ ์ค์ ๋ค์ฌ์ฐ๊ธฐ โ ์์ ์ฌ์ฉ ๊ฐ๋ฅ
- ๊ธฐ๋ณธ๊ฐ: 0 - ๋ค์ฌ์ฐ๊ธฐ ์์
- ๋จ์: px, em, rem emd
๋ฐฐ๊ฒฝ
-
background-color - ์์์ ๋ฐฐ๊ฒฝ ์์
- ๊ธฐ๋ณธ๊ฐ: ํฌ๋ช
- ์์: ์ง์ ๊ฐ๋ฅํ ์์
-
background-image - ์์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ฝ์
- ๊ธฐ๋ณธ๊ฐ: ์ด๋ฏธ์ง ์์
- url(โ๊ฒฝ๋ก"): ์ด๋ฏธ์ง ๊ฒฝ๋ก
-
background-repeat
- ๊ธฐ๋ณธ๊ฐ: repeat - ์ด๋ฏธ์ง๋ฅผ ์์ง, ์ํ ๋ฐ๋ณต
- repeat-x: ์ด๋ฏธ์ง๋ฅผ ์ํ ๋ฐ๋ณต
- repeat-y: ์ด๋ฏธ์ง๋ฅผ ์์ง ๋ฐ๋ณต
- no-repeat: ๋ฐ๋ณต ์์
-
background-position - ์์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์์น
- ๊ธฐ๋ณธ๊ฐ: 0% 0% โ ๋ธ๋ผ์ฐ์ ์ 0, 0์ ์ผ์ชฝ ์๋จ
- ๋ฐฉํฅ: top, botton, left, right, center ๋ฐฉํฅ โ ๋ฐฉํฅ1 ๋ฐฉํฅ2
- ๋จ์: px, em rem ๋ฑ โ x์ถ, y์ถ
-
background-size - ์์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ํฌ๊ธฐ โ x y ์ค ํ๋๋ง ์ ๋ ฅํด๋ ์๋์ผ๋ก ๋น์จ์ ๋ง๊ฒ ๋๋จธ์ง ๊ฐ ๋ง์ถฐ์ค
- ๊ธฐ๋ณธ๊ฐ: ์ด๋ฏธ์ง์ ์ค์ ํฌ๊ธฐ
- ๋จ์: px, em, rem
- cover: ๋น์จ์ ์ ์ง, ์์์ ๊ฐ๋ก/์ธ๋ก ์ค ๋ ๋์ ๋๋น์ ๋ง์ถค
- contain: ๋น์จ์ ์ ์ง, ์์์๊ฐ๋ก/์ธ๋ก ์ค ๋ ์งง์ ๋๋น์ ๋ง์ถค
-
background-attachment - ์์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์คํฌ๋กค ํน์ฑ
- ๊ธฐ๋ณธ๊ฐ: scroll - ์ด๋ฏธ์ง๊ฐ ์์๋ฅผ ๋ฐ๋ผ์ ๊ฐ์ด ์คํฌ๋กค
- fixed: ์ด๋ฏธ์ ๋ทฐํฌํธ์ ๊ณ ์ , ์คํฌ๋กคX
๋ฐฐ์น
โ ์์๋ฅผ ๋ฐฐ์นํ ๋๋ ๊ธฐ์ค์ ์ ํ๊ณ , ๊ทธ๋ฆฌ๊ณ ์์น๋ฅผ ์ ์ธ
-
position - ์์์ ์์น ์ง์ ๊ธฐ์ค(์์น ์ ๋ถ๋ชจ์์์ ๊ตฌ์กฐ ์ ๋ถ๋ชจ์์๊ฐ ๋ค๋ฅผ ์ ์์)
-
๊ธฐ๋ณธ๊ฐ: static(๊ธฐ์ค ์์)
-
reative: ์์ ์์ ์ ๊ธฐ์ค โ ๋ณ๊ฒฝ ์ ์๋ฆฌ๋ ์๋ณด์ด์ง๋ง ์ฑ์์ ธ ์์, ์์น ๋ณ๊ฒฝ๋ ๊ฒ์ ํ์์, ์ ์ฐ์ด์ง ์์
-
absolute: ์์น ์ ๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค โ ์์น ์ ๋ถ๋ชจ ์์๋ฅผ ๊ผญ ํ์ธํด์ผ ํจ, ์ฃผ๋ณ ์์์์ ์ํธ์์ฉ์ด ๋ฌด๋์ง, ๊ณต์ค์ผ๋ก ๋ถ ๋ธ, ๋ถ๋ชจ ์์์ ํฌ์ง์ ๊ฐ์ด ์์ผ๋ฉด ๋ทฐํฌํธ๋ฅผ ์์น ์ ๊ธฐ์ค์ผ๋ก ํจ(๋ถ๋ชจ ์์๋ static์ธ ๊ฒ๊ณผ ๋์ผ)
-
fixed: ๋ทฐํฌํธ(๋ธ๋ผ์ฐ์ )๋ฅผ ๊ธฐ์ค โ ์ฃผ๋ณ๊ณผ ์ํธ์์ฉX, ๊ณต์ค์ ๋ถ ๋ธ, ํญ์ ํ๋ฉด์ ๊ณ ์ ๋จ
-
(sticky: ์คํฌ๋กค ์์ญ ๊ธฐ์ค)
-
-
top, bottom, left, right - ์์์ ๊ฐ ๋ฐฉํฅ๋ณ ๊ฑฐ๋ฆฌ ์ง์
- ๊ธฐ๋ณธ๊ฐ: ๋ธ๋ผ์ฐ์ ๊ฐ ๊ณ์ฐ
- ๋จ์: px, em, rem ๋ฑ
โ๏ธ ์์ ์์ ์์(Stack order)
(โ ์์๋๋ก ๋ค ๋ง์กฑํด์ผ ํจ, 3๋ฒ์ด ์ ค ๋๋ค๊ณ ์์ ์์ด์ง ์์)
- ์ด๋ค ์์๊ฐ ์ฌ์ฉ์์ ๋ ๊ฐ๊น๊ฒ ์๋์ง(์์ ์์ด๋์ง) ๊ฒฐ์
- ์์์ psition ์์ฑ์ ๊ฐ์ด ์๋ ๊ฒฝ์ฐ ์์ ์์(๊ธฐ๋ณธ๊ฐ static ์ ์ธ) โ relatice, absolute, fixed
- 1๋ฒ ์กฐ๊ฑด์ด ๊ฐ์ ๊ฒฝ์ฐ, z-index ์์ฑ์ ์ซ์ ๊ฐ์ด ๋์ ์๋ก ์์ ์์
- 1๋ฒ๊ณผ 2๋ฒ ์กฐ๊ฑด์ด ๊ฐ์ ๊ฒฝ์ฐ, HTML์ ๋ค์ ๊ตฌ์กฐ์ผ ์๋ก ์์ ์์ โ HTML์ ๊ตฌ์กฐ๊ฐ ๋ ๋์ค์ ์์ฑ๋ ์๋ก
*cf) z-index์ ๊ธฐ๋ณธ๊ฐ: 0*
- z-index - ์์์ ์์ ์ ๋๋ฅผ ์ง์
- ๊ธฐ๋ณธ๊ฐ: ๋ถ๋ชจ ์์์ ๋์ผํ ์์ ์ ๋, 0
- ์ซ์: ์ซ์๊ฐ ๋์ ์๋ก ์์ ์์
โ๏ธ Position ๊ฐ ์ค์ ๊ณผ display
- position ์์ฑ์ ๊ฐ์ผ๋ก absolute, fixed๊ฐ ์ง์ ๋ ์์๋ display ์์ฑ์ด block์ผ๋ก ๋ณ๊ฒฝ๋จ
ํ๋ ์ค(์ ๋ ฌ) - 1์ฐจ์ ๋ ์ด์์
- ์ฃผ๋ก ์ํ ์ ๋ ฌํ๋๋ฐ ์ฐ์
flex-container
flex-item
-
display - Flex Container์ ํ๋ฉด ์ถ๋ ฅ(๋ณด์ฌ์ง) ํน์ฑ
- flex: ๋ธ๋ก ์์์ ๊ฐ์ด Flex Container ์ ์
- inline-flex: ์ธ๋ผ์ธ ์์์ ๊ฐ์ด Flex Container ์ ์
-
flex-direction - ์ฃผ ์ถ(Main-axis)์ ์ค์
- ๊ธฐ๋ณธ๊ฐ: row ํ ์ถ(์ข โ ์ฐ)
- row-reverse: ํ ์ถ(์ฐ โ ์ข)
- column: ์ด ์ถ(์ โ ์๋)
- column-reverse: ์ด ์ถ(์๋ โ ์)
- flex-wrap - Flex Items ๋ฌถ์(์ค ๋ฐ๊ฟ) ์ฌ๋ถ
- ๊ธฐ๋ณธ๊ฐ: nowrap - ๋ฌถ์(์ค ๋ฐ๊ฟ) ์์
- wrap: ์ฌ๋ฌ ์ค๋ก ๋ฌถ์
-
justify-content - ์ฃผ ์ถ์ ์ ๋ ฌ ๋ฐฉ๋ฒ
โ ์ํ ์ ๋ ฌํ ๋ ์์ฃผ ์ฐ์- ๊ธฐ๋ณธ๊ฐ: flex-start - Flex Items๋ฅผ ์์์ ์ผ๋ก ์ ๋ ฌ
- flex-end: Flex Items๋ฅผ ๋์ ์ผ๋ก ์ ๋ ฌ
- center: Flex Items๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌ
- space-between: ๊ฐ Flex Items ์ฌ์ด๋ฅผ ๊ท ๋ฑํ๊ฒ ์ ๋ ฌ
- space-around: ๊ฐ Flex Items์ ์ธ๋ถ ์ฌ๋ฐฑ์ ๊ท ๋ฑํ๊ฒ ์ ๋ ฌ
-
align-content - ๊ต์ฐจ ์ถ์ ์ฌ๋ฌ ์ค ์ ๋ ฌ ๋ฐฉ๋ฒ
โ ํ ์ค์ผ ๋ ์๋ ์๋จ- ๊ธฐ๋ณธ๊ฐ: stretch - Flex Items๋ฅผ ์์์ ์ผ๋ก ์ ๋ ฌ โ container์ items์ ๋๋ฆผ
- flex-start - Flex Items๋ฅผ ์์์ ์ผ๋ก ์ ๋ ฌ
- flex-end - Flex Items๋ฅผ ๋์ ์ผ๋ก ์ ๋ ฌ
- center: Flex Items๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌ
- space-between: ๊ฐ Flex Items ์ฌ์ด๋ฅผ ๊ท ๋ฑํ๊ฒ ์ ๋ ฌ
- space-around: ๊ฐ Flex Items์ ์ธ๋ถ ์ฌ๋ฐฑ์ ๊ท ๋ฑํ๊ฒ ์ ๋ ฌ
-
align-items - ๊ต์ฐจ ์ถ์ ํ ์ค ์ ๋ ฌ ๋ฐฉ๋ฒ โ ์์ง ์ ๋ ฌํ ๋ ์ฃผ๋ก ์ฐ์
- ๊ธฐ๋ณธ๊ฐ: stretch - Flex Items๋ฅผ ์์์ ์ผ๋ก ์ ๋ ฌ โ container์ items์ ๋๋ฆผ
- flex-start - Flex Items๋ฅผ ์์์ ์ผ๋ก ์ ๋ ฌ
- flex-end - Flex Items๋ฅผ ๋์ ์ผ๋ก ์ ๋ ฌ
- center: Flex Items๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌ
- baselind: Flex Items๋ฅผ ๊ฐ ์ค์ ๋ฌธ์ ๊ธฐ์ค์ ์ ์ ๋ ฌ
-
order - Flex Item์ ์์
- ๊ธฐ๋ณธ๊ฐ: 0 - ์์ ์์
- ์ซ์: ์ซ์๊ฐ ์์ ์๋ก ๋จผ์
-
flex-grow - Flex Items์ ์ฆ๊ฐ ๋๋น ๋น์จ
โ item์ ์ฌ์ด์ฆ๊ฐ ์์ด๋ ๋น์จ์ ๋ฐ๋ผ ์กฐ์ ๋จ- ๊ธฐ๋ณธ๊ฐ: 0 - ์ฆ๊ฐ ๋น์จ ์์
- ์ซ์: ์ฆ๊ฐ ๋น์จ
-
flex-shrink - Flex Item์ ๊ฐ์ ๋๋น ๋น์จ
์ซ์ 0 โ๊ฐ์ ๋๋น๋ฅผ ์ฌ์ฉํ์ง ์๊ฒ ๋ค, ์์ดํ ๋ค์ ์ฌ์ด์ฆ ์๋ฐ๋
- ๊ธฐ๋ณธ๊ฐ: 1 - Flex Container ๋๋น์ ๋ฐ๋ผ ๊ฐ์ ๋น์จ ์ ์ฉ โ ๊ทธ๋์ ์ปจํ ์ด๋๊ฐ ์์์ง๋ฉด ๊ทธ์ ๋ง์ถฐ item๋ ์์์ง
- ์ซ์: ๊ฐ์ ๋น์จ
-
flex-basis - Flex Item์ ๊ณต๊ฐ ๋ฐฐ๋ถ ์ ๊ธฐ๋ณธ ๋๋น
โ 0์ผ๋ก ์ค์ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์(์ฆ๊ฐ/๊ฐ์ ๋๋น์ ๋ง์ถ๊ธฐ ์ํด)- ๊ธฐ๋ณธ๊ฐ: auto - ์์์ content ๋๋น
- ๋จ์: px, em, rem ๋ฑ
์ ํ
transition - ์์์ ์ ํ(์์๊ณผ ๋) ํจ๊ณผ๋ฅผ ์ง์ ํ๋ ๋จ์ถ ์์ฑ
โ transition: ์์ฑ๋ช
์ง์์๊ฐ ํ์ด๋ฐํจ์ ๋๊ธฐ์๊ฐ ;
-
transition-property - ์ ํ ํจ๊ณผ๋ฅผ ์ฌ์ฉํ ์์ฑ ์ด๋ฆ์ ์ง์
- ๊ธฐ๋ณธ๊ฐ: all - ๋ชจ๋ ์์ฑ์ ์ ์ฉ
- ์์ฑ์ด๋ฆ: ์ ํ ํจ๊ณผ๋ฅผ ์ฌ์ฉํ ์์ฑ ์ด๋ฆ ๋ช ์
-
transition-duration - ์ ํ ํจ๊ณผ์ ์ง์์๊ฐ์ ์ง์
- ๊ธฐ๋ณธ๊ฐ: 0s - ์ ํํจ๊ณผ ์์
- ์๊ฐ: ์ง์์๊ฐ(s)์ ์ง์
-
transition-timing-function - ์ ํ ํจ๊ณผ์ ํ์ด๋ฐ(Easing) ํจ์๋ฅผ ์ง์
-
transition-delay - ์ ํ ํจ๊ณผ๊ฐ ๋ช ์ด ๋ค์ ์์ํ ์ง ๋๊ธฐ์๊ฐ์ ์ง์
โ ์ง์์๊ฐ ๋ค์ ์ค์ - ๊ธฐ๋ณธ๊ฐ: 0s - ๋๊ธฐ์๊ฐ ์์
- ์๊ฐ: ๋๊ธฐ์๊ฐ(s)์ ์ง์
๋ณํ
- ์์์ ๋ณํ ํจ๊ณผ
transform: ๋ณํํจ์1 ๋ณํํจ์2 ๋ณํํจ์3 ... ;
transform: ์๊ทผ๋ฒ ์ด๋ ํฌ๊ธฐ ํ์ ๊ธฐ์ธ์ ;
- ์๊ทผ๋ฒ์ ์ ์ฉํ rotate ํจ์
-
skew ํจ์
-
perspective - ํ์ ์์๋ฅผ ๊ด์ฐฐํ๋ ์๊ทผ ๊ฑฐ๋ฆฌ๋ฅผ ์ง์
โ ํจ์๊ฐ ์๋๋ผ ์์ฑ!
โ ํจ์๋ณด๋ค ์์ฑ์ด ๋ ๊ถ์ฅ๋จ
-
backface-visibility - 3D ๋ณํ์ผ๋ก ํ์ ๋ ์์์ ๋ท๋ฉด ์จ๊น ์ฌ๋ถ
- ๊ธฐ๋ณธ๊ฐ: visible - ๋ท๋ฉด ๋ณด์
- hidden: ๋ท๋ฉด ์จ๊น
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ ์น๊ณผ HTML&CSS์์ ๋์น๊ธฐ ์ฌ์ด ๊ฐ๋ ๋ค 3), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@zerone/์น๊ณผ-HTMLCSS์์-๋์น๊ธฐ-์ฌ์ด-๊ฐ๋ ๋ค-3์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค