์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- promise
- Project
- https://m.blog.naver.com/tt2t2am1118/221010125300
- object
- addEventListener
- setTimeout()
- database
- async
- ๊ฒ์
- await
- ๋๊ธฐ
- mysql
- slow and steady
- js
- execCommand
- sql
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- webpack
- prj
- callback
- JS #ํ๋ก์ ํธ
- Porject
- json
- ๋น๋๊ธฐ
- db
- Import
- ์ฐธ๊ณ ๋ธ๋ก๊ทธ
- ajax
- eport
- ํผํ
- Today
- Total
C-log
๐ Decorate from CSS : font-size ๋ณธ๋ฌธ
์ด๋ฒ ํฌ์คํ ์์๋ font-size์ ๊ธฐ๋ณธ์ ์ธ ๋จ์ px๊ณผ em/rem์ ์์๋ณผ ๊ฒ์ด๋ค. px์ em/rem์ ์ ๋์ ์ด๋ ์๋์ ์ด๋ ๋ก ๋๋๋ค.
- px์ ํ๋ฉด์ ํ์๋๋ ๊ฐ์ฅ ์์ ๋จ์์ด๋ฉฐ ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ๊ฐ์ง๊ณ ์์ด ์น ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋๊ฐ ๋์ด๋ ํฌ๊ธฐ๊ฐ ๊ณ ์ ๋๋ค. ๋ฐ๋ผ์ ํ๋ฉด์ ํฌ๊ธฐ ๋ณ๋์ ์ํฅ์ ๋ฐ์ง ์๊ธฐ ์ํด์ px๋ฅผ ์ฌ์ฉํ๋ค.
- em์ ๋ถ๋ชจ ์์์ ๊ธ๊ผด ํฌ๊ธฐ์ ๋ฐ๋ผ ์๋์ ์ผ๋ก ํฌ๊ธฐ๊ฐ ์กฐ์ ๋๋ ๊ฒ์ด๋ค. ์ฆ, ๋ถ๋ชจ ์์๊ด๊ณ์์ ์ํธ์ ์ด๋ผ๋ ๊ฒ์ ์ ์ ์๋ค.์๋ก ๋ค๋ฉด ๋ถ๋ชจ์ ์์์ ๊ธ๊ผด ํฌ๊ธฐ๊ฐ 16px์ด๊ณ ์์ ์์์ 2em์ด ๋์ ์ฉ์ด ๋๋ค๋ฉด ์์ ์์์ ํฌ๊ธฐ๋ 32px๊ฐ๋๋ ๊ฒ์ด๋ค.
- rem์ ๊ธ๊ผด ํฌ๊ธฐ ๊ธฐ์ค์ผ๋ก ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ๋ํ๋ธ๋ค. em๊ณผ ๋ฌ๋ฆฌ ์์๋ ๋ถ๋ชจ์๊ฒ ์ํฅ์ ๋ฐ์ง ์์ผ๋ฉฐ ํญ์ ๋ฃจํธ์ ์์์ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ค. ๋ ์ด์์์ ์ค๊ณํ ๋ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ฉฐ ๊ธ๊ผด ํฌ๊ธฐ๊ฐ ์ผ๊ด์ ์ผ๋ก ์ ์ง๋๊ธธ ์ํ ๋ ์ ์ฉํ๋ค.
์ด์ ์ฝ๋๋ฅผ ์ดํด๋ณด์.
ํ์ฌ ์ฝ๋๋ฅผ ๊ฐ์ง๊ณ ๋ณด๋ฉด px์ ์น ๋ธ๋ผ์ฐ์ ํฌ๊ธฐ์ ๋ณ๋ ์์ด px๊ฐ ๊ณ ์ ๋ ๊ฒ์ด๋ค. em์ ๋ถ๋ชจ๊ฐ 16px์ด๊ธฐ ๋๋ฌธ์ 32px์ธ ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ๋ฐ๊ณ ์์ ๊ฒ์ด๋ค. rem์ ์น ๋ธ๋ผ์ฐ์ ํฌ๊ธฐ ๋ณ๋์ ์ํฅ์ ๋ฐ์ผ๋ ๊ฐ๋ณ์ ์ผ ๊ฒ์ด๋ค. ์ด๋ฅผ ์น์์ ํ์ธํ๋ ๋ฐฉ๋ฒ์ ์ผ๋ฐ์ ์ผ๋ก ๋จ์ํ ํ๋๋ง ํ๋ฉด ๋ ๊ฒ ๊ฐ์ง๋ง ๋ธ๋ผ์ฐ์ ์์ ์ด๋์ ๋ ์ค์ ์ ํด์ค์ผํ๋ค. ๋ฐฉ๋ฒ์ ์๋์ ๊ฐ๋ค.
ํฌ๋กฌ ์ค์ ์์ ๊ธ๊ผด์ ๊ฒ์ํ๊ณ ๊ธ๊ผด ํฌ๊ธฐ ๋ณ๊ฒฝ์ ์์ฃผ ์๊ฒ๋ก ๋ณ๊ฒฝํ๋ฉด ์ ์ฉ์ด ๋ ๊ฒ์ด๋ค. ๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ๋ค
์ฐ๋ฆฌ๊ฐ ์์ํ๋ ๊ฒ๊ณผ ๊ฐ์ด ์ค์ ์ ๋ณ๊ฒฝํ๊ธฐ ์ ๊ณผ ๊ฐ์ด px์ ์ ๋์ ์ด๊ธฐ์ ํฌ๊ธฐ๊ฐ ์ ์ง๋๋ฉฐ em์ px์ ๋๋ฐฐ ํฌ๊ธฐ๋ฅผ ์ ์งํ๊ณ ์๋ค. ๋ฐ๋๋ก rem์ ์๋์ ์ผ๋ก ์น ๋ธ๋ผ์ฐ์ ์ ํฌ๊ทธ์ ์๋์ ์ํฅ์ ๋ฐ์ ๊ธ์ ํฌ๊ธฐ๊ฐ ์์ ์ก์์ ์ ์ ์์๋ค.
'๐ CSS > โกver.0' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๐ Decorate from CSS : ๋ค์ํ ์ ํ์๋ค #12 (0) | 2024.02.13 |
---|---|
๐ Decorate from CSS : ๋ค์ํ ์ ํ์๋ค #7 (0) | 2024.02.13 |
๐ Decorate from CSS : ๊ฐ์ ํด๋์ค ์ ํ์ (0) | 2024.02.13 |
๐ Decorate from CSS : ๋ถ๋ชจ ์์ ์ ํ์ (0) | 2024.02.13 |
๐ Decorate from CSS : ์์ํ๊ธฐ ์์ (0) | 2024.02.13 |