๐Ÿ“PX โ†’ REM/EM ๋ณ€ํ™˜๊ธฐ

PX ๊ฐ’์„ ์ž…๋ ฅํ•˜๋ฉด ๋ฐ˜์‘ํ˜• ์›น ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ REMยทEM ๋‹จ์œ„๋ฅผ ์ฆ‰์‹œ ๊ณ„์‚ฐํ•ฉ๋‹ˆ๋‹ค.

px
px
REM
1.5rem
EM
1.5em
์ž์ฃผ ์“ฐ๋Š” ํฌ๊ธฐ ๋ณ€ํ™˜ํ‘œ
PX REM EM

PX, REM, EM ๋‹จ์œ„๋ž€?

์›น ๋””์ž์ธ์—์„œ ํฌ๊ธฐ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋‹จ์œ„๋Š” ์ ˆ๋Œ€ ๋‹จ์œ„์™€ ์ƒ๋Œ€ ๋‹จ์œ„๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค. PX(ํ”ฝ์…€)๋Š” ํ™”๋ฉด์˜ ๊ณ ์ •๋œ ์  ํฌ๊ธฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ ˆ๋Œ€ ๋‹จ์œ„๋กœ, ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์™€ ์‚ฌ์šฉ์ž ์„ค์ •์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด REM๊ณผ EM์€ ์ƒ๋Œ€ ๋‹จ์œ„๋กœ, ๋‹ค๋ฅธ ์š”์†Œ์˜ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ณ„์‚ฐ๋ฉ๋‹ˆ๋‹ค. ๋ฐ˜์‘ํ˜• ์›น ๊ฐœ๋ฐœ์—์„œ๋Š” REM๊ณผ EM์ด ๋” ์œ ์—ฐํ•˜๊ณ  ์ ‘๊ทผ์„ฑ ๋†’์€ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“œ๋Š” ๋ฐ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

REM๊ณผ EM์˜ ์ฐจ์ด

REM(Root EM)์€ ํ•ญ์ƒ ๋ฃจํŠธ ์š”์†Œ์ธ html ํƒœ๊ทธ์˜ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ณ„์‚ฐ๋ฉ๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ณธ๊ฐ’์€ 16px์ด๋ฏ€๋กœ 1rem = 16px์ž…๋‹ˆ๋‹ค. EM์€ ๋ถ€๋ชจ ์š”์†Œ์˜ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ค‘์ฒฉ๋œ ์š”์†Œ์—์„œ ๋ณต์žกํ•˜๊ฒŒ ์ž‘์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋•Œ๋ฌธ์— ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์ผ๊ด€์„ฑ ์œ ์ง€๊ฐ€ ์‰ฌ์šด REM์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜• ์›น์—์„œ REM ์‚ฌ์šฉ ์žฅ์ 

์‚ฌ์šฉ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ณธ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด REM ๊ธฐ๋ฐ˜์˜ ๋ชจ๋“  ์š”์†Œ๊ฐ€ ๋น„๋ก€์ ์œผ๋กœ ํ•จ๊ป˜ ์กฐ์ •๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์‹œ๊ฐ ์žฅ์• ์ธ์ด๋‚˜ ๊ณ ๋ น ์‚ฌ์šฉ์ž์ฒ˜๋Ÿผ ํ…์ŠคํŠธ๋ฅผ ํฌ๊ฒŒ ๋ณด๋Š” ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ์ ‘๊ทผ์„ฑ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ฃจํŠธ์˜ font-size ํ•˜๋‚˜๋งŒ ๋ณ€๊ฒฝํ•˜๋ฉด ์ „์ฒด ๋ ˆ์ด์•„์›ƒ์˜ ํฌ๊ธฐ๋ฅผ ์ผ๊ด„ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์–ด ๋ฐ˜์‘ํ˜• ๋Œ€์‘์ด ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ (FAQ)

Q. ๊ธฐ๋ณธ ํฐํŠธ ํฌ๊ธฐ๋ฅผ 10px๋กœ ์„ค์ •ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•˜๋‚˜์š”?

A. CSS์—์„œ html { font-size: 62.5%; } ๋กœ ์„ค์ •ํ•˜๋ฉด ๊ธฐ๋ณธ ํฐํŠธ ํฌ๊ธฐ๊ฐ€ 10px์ด ๋˜์–ด 1rem = 10px๋กœ ๊ณ„์‚ฐ์ด ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค. ์ด ๋„๊ตฌ์—์„œ๋„ ๊ธฐ๋ณธ๊ฐ’ ์ž…๋ ฅ๋ž€์„ 10์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ํ•ด๋‹น ๊ธฐ์ค€์œผ๋กœ ํ™˜์‚ฐ๋ฉ๋‹ˆ๋‹ค.

Q. REM๊ณผ EM ์ค‘ ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‚˜์š”?

A. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ REM์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ์ค‘์ฒฉ ๊ตฌ์กฐ์—์„œ๋„ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. EM์€ ๋ฒ„ํŠผ์˜ ํŒจ๋”ฉ์ฒ˜๋Ÿผ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ ํฐํŠธ ํฌ๊ธฐ์— ๋น„๋ก€ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

Q. ์†Œ์ˆ˜์  ์ž๋ฆฟ์ˆ˜๊ฐ€ ๋งŽ์•„์ง€๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋‚˜์š”?

A. ์ผ๋ฐ˜์ ์œผ๋กœ ์†Œ์ˆ˜์  3์ž๋ฆฌ๊นŒ์ง€๋งŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. CSS๋Š” ์†Œ์ˆ˜์  ์ดํ•˜ ๊ฐ’๋„ ์ •ํ™•ํžˆ ๋ Œ๋”๋งํ•˜์ง€๋งŒ, 0.0625rem์ฒ˜๋Ÿผ ๋ณต์žกํ•œ ๊ฐ’์€ ๊ฐ€๋…์„ฑ์„ ์œ„ํ•ด ๋ฐ˜์˜ฌ๋ฆผํ•ด ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.