์ค๋์ ๋ฐ์ํ ์น์ฌ์ดํธ ๋ง๋ค๊ธฐ์ ๋ํด ๋ฐฐ์ ๋ค.
์ด ๋ํ ์ค์ํ ๊ฐ๋ ๋ค์ด ๋ง์ผ๋ ํ๋ฒ ์ ๋ฆฌํด๋ณด์
๋ฐ์คํฌํ ๋ฟ๋ง ์๋๋ผ ํ๋ธ๋ฆฟ, ์ค๋งํธํฐ ๋ฑ ๋ค์ํ ๊ธฐ๊ธฐ์์ ์ ์ํ ์ ์๊ธฐ ๋๋ฌธ์ ๊ธฐ๊ธฐ์ ํ๋ฉด์ ๋ง์ถฐ ์ ๋์ ์ผ๋ก ์น ํ๋ฉด์ ๊ตฌ์ฑํด์ผํ๋ค. ์ด๋ ๊ฒ ๋ง๋๋๊ฒ์ด ๋ฐ์ํ ์น์ฌ์ดํธ ๋ง๋ค๊ธฐ์ด๋ค!
Unit
์ ๋ฒ ์๊ฐ๊น์ง๋งํด๋ ๊ณ ์ ์ ์ธ px๋จ์๋ฅผ ์ฌ์ฉํ์๋ค.
๋ฐ์ํ ์นํ์ด์ง๋ฅผ ๋ง๋ค๋, ๊ณ ์ ๊ฐ์ธ px์ ๋ณ๋ก ์ ํฉํ ๋ฐฉ๋ฒ์ ์๋๋ค.
์๋ํ๋ฉด, ๊ณ ์ ์ ์ธ px์ ํ๋ฉด์ ํฌ๊ธฐ๊ฐ ๋ณํ๊ฑฐ๋, ๋ธ๋ผ์ฐ์ ์ค์ ์์ ์๋ฌด๋ฆฌ ๊ธ๊ผด ์ค์ ์ ํฌ๊ฒ ์๊ฒ ๋ณ๊ฒฝํ์ฌ๋ ๋ณ๊ฒฝ๋์ง ์๋๋ค.
- px
- pt
- %
- em
- rem
- vh, vw
CSS์ Unit์ ์ข ๋ฅ๋ ๋ค์๊ณผ ๊ฐ๋ค.
% (ํผ์ผํธ)
- Parent element ๊ธฐ์ค ์๋ ํฌ๊ธฐ
- ์ ๋๊ฐ
- Grid ์ก๊ธฐ & ๋ฏธ๋์ด ๊ฐ๋ฐ์ ์ ์ฉ
em
- Parent element์ ํฐํธ ํฌ๊ธฐ ๋น์จ
- ๋ถ๋ชจ์์์ ์ ์ฉ๋ ํฐํธ ํฌ๊ธฐ ์์ฑ์ด ์๋ค๋ฉด, ์ต์์ ๋ธ๋ผ์ฐ์ ์ค์ (๊ธฐ๋ณธ 16px)์ ๋ฐ๋ฅธ๋ค.
- ๋ถ๋ชจ์์์ ์ํด ์ํฅ์ ๋ฐ๊ธฐ ๋๋ฌธ์, ์ข ์์์๊ฐ ๋ง์์ง์๋ก ๋ณต์กํ๋ค.
- ํฐํธํฌ๊ธฐ์์๋ %์ ๋น์ทํ ๊ฒฐ๊ณผ๋ฅผ ๋์ถํ๋ค. (1em=100%)
rem
- Root element์ ํฐํธ ํฌ๊ธฐ ๋น์จ
- ๋ธ๋ผ์ฐ์ ์ค์ (๊ธฐ๋ณธ 16px)์ ๊ธฐ์ค์ผ๋ก ํ๋ค. but, html ์์์ ํฐํธํฌ๊ธฐ ์ค์ ์ ํด๋๋ฉด, html์์ ๊ธฐ์ค์ผ๋ก ํ๋ค! body๋ ์ ์ฉ์ด ๋์ง ์๋๋ค!
- ๊ธฐ๋ณธ 16px = 1rem
vh, vh (Viewport width (vw), Viewport height (vh))
- viewport ํฌ๊ธฐ
- vw: ๋ธ๋ผ์ฐ์ ํ๋ฉด width + ์คํฌ๋กค๋ฐ ํฌ๊ธฐ
- vh: ๋ธ๋ผ์ฐ์ ํ๋ฉด height
em vs rem
em์์๋ ๋ถ๋ชจ๊ธฐ์ค์ด๋ฏ๋ก, ์ฌ๋ฌ depth๊ฐ ์๋ค๋ฉด ์ ๋ถ ์๋์ ํฌ๊ธฐ๊ฐ์ ๊ณ์ ๋ฌผ๋ ค๋ฐ๋๋ค.
rem์ ์ฌ์ฉํ๋ฉด ๋ฌด์กฐ๊ฑด ์ต์์ element, ์ฆ html ํ๊ทธ์ ๊ธฐ๋ณธ font-size๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๊ธฐ ๋๋ฌธ์, ์ด๋ค depth์ธ์ง ์๊ด์์ด ๋ฌด์กฐ๊ฑด html ํ๊ทธ๊ฐ์ ๋ฐ๋ผ์ ์๋์ ์ธ ๊ฒฐ๊ณผ๊ฐ์ ๊ฐ๋๋ค.
→ em์ depth๊ฐ ๋ง์์ง๋ฉด, ๊ณ์ฐ์ด ๋ณต์กํด์ง๊ธฐ ๋๋ฌธ์ ๋ณดํต rem์ ๋ง์ด ์ฌ์ฉํ๋ค!
๐ง
์์์ ๋จ์๋ฅผ ๋ฐฐ์ธ๋, ํฐํธํฌ๊ธฐ์์๋ %์ ๋น์ทํ ๊ฒฐ๊ณผ๋ฅผ ๋์ถํ๋ค. (1em=100%) ๋ฐฐ์ ๋๋ฐ,
๊ทธ๋ผ ๋ค๋ฅธ ์์ฑ์์ ์ด๋ป๊ฒ ๋ค๋ฅผ๊น?
padding์ ๊ฒฝ์ฐ๋ฅผ ์์๋ก ๋ค์ด๋ณด์๋ฉด,
๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ์ค์ ์ 22px๋ก ์ค์ ๋์ด์๊ณ , ๋ถ๋ชจ์์์ ์๋ฌด๋ฐ ํฐํธ ์ค์ ์ด ๋์ด์์ง ์๋ ์ ์ ์กฐ๊ฑด์ด๋ค.
font-size: 200%: ๋ถ๋ชจ์์ ์์ฑ์ด ์๊ธฐ๋๋ฌธ์, ์ต์์ ๋ธ๋ผ์ฐ์ ๊ธฐ์ค 22X2=44px์ด ๋๋ค.
padding: 0.1em : em๋จ์๋ ๋ถ๋ชจ ํฐํธ ํฌ๊ธฐ์ ์๋์ ์ธ ๋จ์๋ก์จ, ์ด๊ฑธ ํจ๋ฉ ๊ฐ์ ์ฌ์ฉํ๋ฉด, ๋ถ๋ชจ๊ฐ ์๋ ํด๋น ์์์ ํฐํธ ํฌ๊ธฐ์ ์๋์ ์ผ๋ก ํจ๋ฉ์ด ๊ฒฐ์ ๋๋ค.
๊ทธ๋์ ํ์ฌ์์์ font-size:44px์ ๊ธฐ์ค์ผ๋ก 0.1๋ฐฐ=4.4px์ด๋๋ค!
์ด๋ฌํ ์ด์ ๋ก, padding์ ๋ฐ์ํ์ผ๋ก ๋ง๋ค๊ณ ์ถ๋ค๋ฉด, rem์ ์ฌ์ฉํ๋๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค.
padding: 0.1rem : rem์ ๋ธ๋ผ์ฐ์ 22px๊ธฐ์ค์ผ๋ก=2.2px
Media Query
์นํ์ด์ง์ ์คํ์ผ์ ๋ฏธ๋์ด์ ํน์ ํน์ฑ์ ๋ฐ๋ผ ๋์ ์ผ๋ก ์กฐ์ ํ ์ ์๊ฒ ํ๋ ๊ธฐ์ ๋ก, ๋ฐ์ํ ์น ๋์์ธ์์ ์ฌ์ฉ๋์ด ๋ค์ํ ๋๋ฐ์ด์ค์ ํ๋ฉด ํฌ๊ธฐ์ ๋์ํ ์ ์๋๋ก ๋์์ค๋๋ค.
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ์์ฑํ CSS์ฝ๋๋ ๊ณ์ํด์ ์ ํจํ๊ณ , ๋ฏธ๋์ด์ฟผ๋ฆฌ์ ์ฝ๋ ๋ธ๋ญ์ด ์คํ๋๋ฉด ์ ์๋ ๊ท์น๋ง ๋ฎ์ด์ฐ๋ ํ์์ด๋ค. ๋ฎ์ด์ด ์์ฑ๋ง ํ์ฑํ๋๋๊ฒ!
Flex ๋ ์ด์์
์ธ์ ๊ฐ ๋ฐฐ์ ๋์ง๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง ์ด๋ฒ์ ์ฒ์ ์๊ฒ๋ ์ฌ์ค..!
์ปจํ ์ด๋๋ฅผ flex box๋ก ๋ง๋ค๋ฉด, ํ์์ ์ธ๋ผ์ธ ์์๋ค์ด ๋ธ๋ก ์์๋ก ๋ณด์ธ๋ค!
.menu-btn {
width: 3rem;
height: 3rem;
display: flex;
}
.menu-btn span {
height: 3px;
width: 100%;
background-color: black;
}
:target ๊ฐ์ ์ ํ์
์ด๋ฒ์ ์ฒ์์ผ๋ก, target ์ ํ์์ ๋ํด ์๊ฒ ๋์๋ค.
target์ ํ์๋ก, URL ๋์ # ๊ธฐํธ์ ํจ๊ป ์ฌ์ฉ๋๋ Fragment ์๋ณ์์ ์ผ์นํ๋ ID๋ฅผ ๊ฐ์ง ์์๋ฅผ ๋ฌธ์ ๋ด๋ถ์์ ์ฐพ์, ์ ํํ๊ณ ํด๋น ์์์ ์คํ์ผ์ ์ ์ฉํฉ๋๋ค.
์ด์ ๊ฐ์ ํ๋ฒ๊ฑฐ ๋ฒํผ์ ๋๋ฅด๋ฉด, aํ๊ทธ์ href์ธ ๋ด๋ถ #side-drawer (asideํ๊ทธ)๋ก ์ด๋ํ ๊ฒ์ด๊ณ , url๋ #side-drawer๊ฐ ๋ถ์๊ฒ์ด๋ค.
์ด๋, ์ฌ์ด๋๋ฐ๊ฐ ์ค๋ฒ๋ ์ด๋๋๋ก, position์ ์ด์ฉํด ๋ฌธ์ํ๋ฆ์์ ์ ์ธ์ํจ๋ค.
#side-drawer {
width: 100%;
height: 100%;
background-color: rgb(29, 26, 27);
position: fixed;
top: 0;
left: 0;
}
์ฌ์ด๋๋ฐ๋ฅผ position: fixed;๋ฅผ ํตํด, ๋ทฐํฌํธ ๊ธฐ์ค์ผ๋ก ์ ์ฒดํ์ด์ง๋ฅผ ๋ฎ์ด๋ฒ๋ฆฐ๋ค.
Z-index
z-index๋ ๊ธฐ๋ณธ ๊ฐ์ธ position: static์ ์ ์ธํ๊ณ ๋ฐฐ์น๋ ์์์๋ง ์ํฅ์ ๋ฏธ์น๋ฏ๋ก z-์ถ์ ๋ฐ๋ผ ์์์ ์์๊ฐ ๋ณ๊ฒฝ๋์ง ์์ต๋๋ค.
position: static์์๋ z-index ์ ์ฉ์ด ์๋๋ค... ๊ธฐ์ตํ์..!
์ค๋์ ์๋ฌธ์ด์๋ ์ ..!
๐ง <a href = ""> ๋ฅผ ์ฌ์ฉํ๋ฉด ์๋๋ ์ด์ !
<a> ํ๊ทธ๋ฅผ ํตํด ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ๋ฉด ์๋ฒ์ ์์ ํ ์๋ก์ด ํ์ด์ง๋ฅผ ์์ฒญํ๊ฒ ๋๋๋ฐ, ๊ทธ ๊ฒฐ๊ณผ ๋ธ๋ผ์ฐ์ ๋ ์๋ก๊ณ ์นจ์ ์ํํจ๊ณผ ๋์์ ํ์ฌ ์ปดํฌ๋ํธ๊ฐ ๊ฐ๊ณ ์๋ ๋ชจ๋ ์ํ๊ฐ์ ์๊ฒ ๋ฉ๋๋ค.