CSS @charset์ ๋น๋ฐ์ ํํค์ณ ๋ณด์ธ์. ์คํ์ผ์ํธ์ ๋ฌธ์ ์ธ์ฝ๋ฉ์์ @charset์ ์ค์ํ ์ญํ ์ ๋ฐฐ์ฐ๊ณ , ์ ์ธ๊ณ ๋ค์ํ ์ธ์ด์ ์คํฌ๋ฆฝํธ์์ ํ ์คํธ ๊นจ์ง ์์ด ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๋๋ก ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ๋ชจ๋ ์น ๊ฐ๋ฐ์์๊ฒ ํ์์ ์ ๋๋ค.
CSS @charset: ๊ธ๋ก๋ฒ ํ ์คํธ ํ์์ ๋ณด์ด์ง ์๋ ์ค๊ณ์
๋ชจ๋ ํฝ์
๊ณผ ๋ฌธ์๊ฐ ์๋ง์ ๊ธฐ๊ธฐ์ ๋ฌธํ๊ถ์์ ์๋ฒฝํ๊ฒ ๋ ๋๋ง๋์ด์ผ ํ๋ ๋ณต์กํ ์น ๊ฐ๋ฐ์ ์ธ๊ณ์์๋, ๋ฌธ์ ๊ฐ ๋ฐ์ํ๊ธฐ ์ ๊น์ง๋ ๋์ ๋์ง ์๋ ๋ฏธ๋ฌํ์ง๋ง ์ค์ํ ์ธ๋ถ ์ฌํญ๋ค์ด ์ข
์ข
์์ต๋๋ค. ๊ฒฌ๊ณ ํ ๊ตญ์ ์ ์น ์กด์ฌ๊ฐ์ ๊ธฐ์ด๊ฐ ๋๋ ๊ทธ๋ฌํ ์ธ๋ถ ์ฌํญ ์ค ํ๋๊ฐ ๋ฐ๋ก ๋ฌธ์ ์ธ์ฝ๋ฉ์
๋๋ค. ํนํ CSS์ ๊ฒฝ์ฐ, ์ด๋ @charset ๊ท์น๊ณผ ๊ด๋ จ์ด ์์ต๋๋ค. ์ฌ์ํด ๋ณด์ผ ์ ์์ง๋ง, @charset์ ์ดํดํ๊ณ ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌํํ๋ ๊ฒ์ ์คํ์ผ์ํธ๊ฐ ์ฝํ
์ธ ์ ๋์ผํ ์ธ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ํ
์คํธ๋ฅผ ์๋ฒฝํ๊ฒ ํ์ํ๋๋ก ๋ณด์ฅํ๋ ๋ฐ ๊ฐ์ฅ ์ค์ํฉ๋๋ค.
์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋์์๋ ์น์์์ ๋ฌธ์ ์ธ์ฝ๋ฉ์ด๋ผ๋ ๋ ๋์ ํ๊ฒฝ ๋ด์์ @charset์ ์ค์์ฑ์ ๋ํด ๊น์ด ํ๊ณ ๋ญ๋๋ค. ์ ๊ทธ๊ฒ์ด ์ค์ํ์ง, ๋ค๋ฅธ ์ธ์ฝ๋ฉ ์ ์ธ๊ณผ ์ด๋ป๊ฒ ์ํธ ์์ฉํ๋์ง, ์ฌ์ฉ ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ํผํด์ผ ํ ์ผ๋ฐ์ ์ธ ํจ์ ๋ค์ ์ง์ ํ ๊ธ๋ก๋ฒ ์น ๊ฒฝํ์ ๋ง๋๋ ๊ด์ ์์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ดํด: ๊ธฐ์ด
@charset์ ๊ฐ์น๋ฅผ ์์ ํ ์ดํดํ๊ธฐ ์ ์, ๋จผ์ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ๊ฐ๋
์ ํ์
ํด์ผ ํฉ๋๋ค. ํต์ฌ์ ์ผ๋ก ๋ฌธ์ ์ธ์ฝ๋ฉ์ ๋ฌธ์(๊ธ์, ์ซ์, ๊ธฐํธ, ์ฌ์ง์ด ์ด๋ชจํฐ์ฝ๊น์ง)์ ๊ณ ์ ํ ์ซ์ ๊ฐ์ ํ ๋นํ์ฌ ๋์งํธ ๋ฐฉ์์ผ๋ก ์ ์ฅ, ์ ์ก ๋ฐ ํ์ํ ์ ์๊ฒ ํ๋ ์์คํ
์
๋๋ค. ์ผ๊ด๋ ์ธ์ฝ๋ฉ์ด ์๋ค๋ฉด ๋ฐ์ดํธ ์ํ์ค๋ ๋จ์ง ๋ฐ์ดํฐ์ผ ๋ฟ์ด์ง๋ง, ์ธ์ฝ๋ฉ์ด ์์ผ๋ฉด ๊ทธ ๋ฐ์ดํธ๋ค์ ์๋ฏธ ์๋ ํ
์คํธ๋ก ๋ณํ๋ฉ๋๋ค.
๋ฌธ์ ์งํฉ์ ๋ฐ์
- ASCII (American Standard Code for Information Interchange): ๊ฐ์ฅ ์ด๊ธฐ์ด์ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์ธ์ฝ๋ฉ ํ์ค์ ๋๋ค. ASCII๋ ์ฃผ๋ก ์์ด ์ํ๋ฒณ, ์ซ์ ๋ฐ ๊ธฐ๋ณธ ๊ตฌ๋์ ์ ํฌํจํ์ฌ 128๊ฐ์ ๋ฌธ์(0-127)๋ฅผ ๋งคํํฉ๋๋ค. ๊ทธ ๋จ์์ฑ์ ํ๋ช ์ ์ด์์ง๋ง, ์ปดํจํ ์ด ์ ์ธ๊ณ๋ก ํ์ฅ๋จ์ ๋ฐ๋ผ ๊ทธ ์ ํ๋ ๋ฒ์๋ ๊ธ๋ฐฉ ์ฅ๋ฒฝ์ด ๋์์ต๋๋ค.
- ISO-8859-1 (Latin-1): ASCII์ ํ์ฅ์ผ๋ก, รฉ, รผ, รง์ ๊ฐ์ ๋ถ์ ๋ถํธ(์ ์ผํธ, ์๋ผ์ฐํธ)๊ฐ ์๋ ๋ฌธ์๋ฅผ ํฌํจํ์ฌ ์์ ๋ฝ ์ธ์ด๋ฅผ ์ง์ํ๊ธฐ ์ํด 128๊ฐ์ ๋ฌธ์(128-255)๋ฅผ ์ถ๊ฐํ์ต๋๋ค. ์๋นํ ์ง์ ์ด์์ง๋ง, ํค๋ฆด ๋ฌธ์, ์๋ ๋ฌธ์ ๋๋ ๋์์์ ๋ฌธ์์ ๊ฐ์ด ์์ ํ ๋ค๋ฅธ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ์ธ์ด์๋ ์ฌ์ ํ ๋ถ์กฑํ์ต๋๋ค.
- ๋ฒ์ฉ ์ธ์ฝ๋ฉ์ ํ์์ฑ: ์ธํฐ๋ท์ด ์ ์ธ๊ณ์ ์ธ ํ์์ด ๋๋ฉด์, ๋จ์ผ ๋ฐ์ดํธ ์ธ์ฝ๋ฉ์ ํ๊ณ๊ฐ ๋ช ๋ฐฑํด์ก์ต๋๋ค. ์ฌ๋ฌ ์ธ์ด๋ก ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๊ฑฐ๋ ๋ค์ํ ์ธ์ด ๊ณต๋์ฒด๋ฅผ ๋์์ผ๋ก ํ๋ ์น์ฌ์ดํธ๋ ๊ทน๋ณตํ ์ ์๋ ๋ฌธ์ ์ ์ง๋ฉดํ์ต๋๋ค. ๋ชจ๋ ์ธ๊ฐ ์ธ์ด์ ๋ชจ๋ ๋ฌธ์์ ์ฌ์ง์ด ๋ง์ ๋น์ธ๊ฐ ๊ธฐํธ๊น์ง ํํํ ์ ์๋ ๋ฒ์ฉ ์ธ์ฝ๋ฉ์ด ํ์ํ์ต๋๋ค.
UTF-8: ๊ธ๋ก๋ฒ ํ์ค
๋ฐ๋ก ์ด๋ UTF-8 (Unicode Transformation Format - 8-bit)์ด ๋ฑ์ฅํ์ต๋๋ค. ์ค๋๋ ์น์์ ์ง๋ฐฐ์ ์ธ ๋ฌธ์ ์ธ์ฝ๋ฉ์ด๋ฉฐ, ๊ทธ๋ด ๋งํ ์ด์ ๊ฐ ์์ต๋๋ค. UTF-8์ ์ ๋์ฝ๋ ํ์ค์ ๋ชจ๋ ๋ฌธ์๋ฅผ ํํํ ์ ์๋ ๊ฐ๋ณ ํญ ์ธ์ฝ๋ฉ์ ๋๋ค. ์ ๋์ฝ๋๋ ์ ์ธ๊ณ ๋ชจ๋ ๋ฌธ์ ์ฒด๊ณ์ ๋ชจ๋ ๋ฌธ์๋ฅผ ํฌํจํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ ๊ฑฐ๋ํ ๋ฌธ์ ์งํฉ์ ๋๋ค. UTF-8์ ๊ฐ๋ณ ํญ ํน์ฑ์ ๋ค์์ ์๋ฏธํฉ๋๋ค:
- ์ผ๋ฐ์ ์ธ ASCII ๋ฌธ์๋ ๋จ์ผ ๋ฐ์ดํธ๋ก ํํ๋๋ฏ๋ก, ํ์ ํธํ์ด ๊ฐ๋ฅํ๊ณ ์์ด ํ ์คํธ์ ํจ์จ์ ์ ๋๋ค.
- ๋ค๋ฅธ ์คํฌ๋ฆฝํธ(์: ๊ทธ๋ฆฌ์ค์ด, ํค๋ฆด์ด, ์๋์ด, ์ค๊ตญ์ด, ์ผ๋ณธ์ด, ํ๊ตญ์ด, ํ๋์ด, ํ๊ตญ์ด)์ ๋ฌธ์๋ 2, 3 ๋๋ 4๋ฐ์ดํธ๋ก ํํ๋ฉ๋๋ค.
- ๋จ์ผ ๋ฐ์ดํธ ๋ฌธ์์ ๊ณต๊ฐ์ ๋ญ๋นํ์ง ์์ผ๋ฏ๋ก ํผํฉ ์คํฌ๋ฆฝํธ ์ฝํ ์ธ ์ ๋งค์ฐ ํจ์จ์ ์ ๋๋ค.
- ๋ณต์๋ ฅ์ด ๋ฐ์ด๋๊ณ ๋ธ๋ผ์ฐ์ , ์ด์ ์ฒด์ ๋ฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด ์ ๋ฐ์ ๊ฑธ์ณ ๋๋ฆฌ ์ง์๋ฉ๋๋ค.
๋ชจ๋ ์๋ก์ด ์น ์ฝํ ์ธ ์ ๋ํด UTF-8์ ์ฌ์ฉํ๋ ๊ฒ์ด ์๋์ ์ผ๋ก ๊ถ์ฅ๋ฉ๋๋ค. ์ด๋ ๊ฐ๋ฐ์ ๋จ์ํํ๊ณ , ์ต๋์ ํธํ์ฑ์ ๋ณด์ฅํ๋ฉฐ, ๊ธ๋ก๋ฒ ๋๋ฌ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
CSS @charset ๊ท์น: ์ฌ์ธต ๋ถ์
๋ฌธ์ ์ธ์ฝ๋ฉ์ ๋ํ ์ดํด๋ฅผ ๋ฐํ์ผ๋ก ์ด์ CSS @charset ๊ท์น์ ์ง์คํ ์ ์์ต๋๋ค. ์ด ๊ท์น์ ์คํ์ผ์ํธ ์์ฒด์ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ง์ ํ๋ ๋จ ํ๋์ ์ค์ํ ๋ชฉ์ ์ ์ํํฉ๋๋ค.
๊ตฌ๋ฌธ ๋ฐ ๋ฐฐ์น
@charset์ ๊ตฌ๋ฌธ์ ๊ฐ๋จํฉ๋๋ค:
@charset "UTF-8";
๋๋, ์ค๋๋์ด ๋ ๊ถ์ฅ๋๋ ์ธ์ฝ๋ฉ์ ๊ฒฝ์ฐ:
@charset "ISO-8859-1";
๋ฐฐ์น์ ๊ดํ ์ค์ํ ๊ท์น์ด ์์ต๋๋ค:
- ์คํ์ผ์ํธ์ ๋ฐ๋์ ๋งจ ์ฒซ ๋ฒ์งธ ์์์ฌ์ผ ํฉ๋๋ค. ์ฃผ์, ๊ณต๋ฐฑ(์ ํ์ ๋ฐ์ดํธ ์์ ํ์(BOM) ์ ์ธ), ๋ค๋ฅธ CSS ๊ท์น์ด๋ at-๊ท์น์ด ๊ทธ ์์ ์ฌ ์ ์์ต๋๋ค.
- ์ฒซ ๋ฒ์งธ ์์๊ฐ ์๋ ๊ฒฝ์ฐ, CSS ํ์๋ ์ด๋ฅผ ๋ฌด์ํ๊ฒ ๋์ด ์ ์ฌ์ ์ธ ์ธ์ฝ๋ฉ ๋ฌธ์ ๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค.
- ์ ์ธ๋ ์คํ์ผ์ํธ์๋ง ์ ์ฉ๋ฉ๋๋ค. ์ฌ๋ฌ ๊ฐ์ CSS ํ์ผ์ด ์๋ ๊ฒฝ์ฐ, ๊ฐ ํ์ผ์ ์ธ์ฝ๋ฉ์ด ๊ธฐ๋ณธ ๋๋ ์ถ๋ก ๋ ์ธ์ฝ๋ฉ๊ณผ ๋ค๋ฅผ ์ ์๋ค๋ฉด ๊ฐ ํ์ผ์ ๊ณ ์ ํ
@charset๊ท์น์ด ํ์ํฉ๋๋ค.
์ ํ์ํ๊ฐ?
CSS ํ์ผ์ ํน์ ๋ฌธ์ ๋ฒ์๋ฅผ ๊ฐ์ง ์ฌ์ฉ์ ์ ์ ๊ธ๊ผด์ด ํฌํจ๋์ด ์๊ฑฐ๋, ํน์ ๊ธฐํธ๊ฐ ์๋ content ์์ฑ์ ์ฌ์ฉํ๊ฑฐ๋, ๋นASCII ๋ฌธ์๋ฅผ ํฌํจํ๋ ํด๋์ค ์ด๋ฆ์ ์ ์ํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค(ํด๋์ค ์ด๋ฆ์๋ ์ผ๋ฐ์ ์ผ๋ก ๊ถ์ฅ๋์ง ์์ง๋ง ๊ฐ๋ฅํจ). ๋ธ๋ผ์ฐ์ ๊ฐ CSS ํ์ผ์ ๋ฐ์ดํธ๋ฅผ ์ ์ฅ๋ ๋ฐฉ์๊ณผ ๋ค๋ฅธ ์ธ์ฝ๋ฉ์ผ๋ก ํด์ํ๋ฉด, ํด๋น ๋ฌธ์๋ "๋ชจ์ง๋ฐ์ผ"(ไนฑใๆๅญ - ์ผ๋ณธ์ด๋ก "๊นจ์ง ๋ฌธ์")๋ก ์๋ ค์ง ์์๋ณผ ์ ์๋ ํ ์คํธ๋ก ๋ํ๋ฉ๋๋ค.
@charset ๊ท์น์ ๋ธ๋ผ์ฐ์ ์ "์ด๋ด, ์ด CSS ํ์ผ์ ์ด ํน์ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ฌ์ฉํ์ฌ ์์ฑ๋์์ด. ๊ทธ์ ๋ฐ๋ผ ๋ฐ์ดํธ๋ฅผ ํด์ํด ์ค."๋ผ๊ณ ๋ช
์์ ์ผ๋ก ์๋ ค์ค๋๋ค. ์ด ๋ช
์์ ์ ์ธ์ ํนํ ๋ค๋ฅธ ์ธ์ฝ๋ฉ ์ ์ธ์ ์ถฉ๋์ด๋ ๋ชจํธ์ฑ์ด ์์ ๋ ์คํด๋ฅผ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์ธ์ฝ๋ฉ ์ ์ธ์ ๊ณ์ธต ๊ตฌ์กฐ
๋ธ๋ผ์ฐ์ ๊ฐ CSS ํ์ผ์ ์ธ์ฝ๋ฉ์ ๊ฒฐ์ ํ๋ ๋ฐฉ๋ฒ์ด @charset ๊ท์น๋ฟ๋ง์ด ์๋๋ผ๋ ์ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฐ๋ฅด๋ ํน์ ์ฐ์ ์์ ๊ณ์ธต์ด ์์ต๋๋ค:
-
HTTP
Content-Typeํค๋: ๊ฐ์ฅ ๊ถ์ ์๊ณ ์ ํธ๋๋ ๋ฐฉ๋ฒ์ ๋๋ค. ์น ์๋ฒ๊ฐ CSS ํ์ผ์ ์ ๋ฌํ ๋,charset๋งค๊ฐ๋ณ์๊ฐ ํฌํจ๋HTTP Content-Typeํค๋๋ฅผ ํฌํจํ ์ ์์ต๋๋ค(์:Content-Type: text/css; charset=UTF-8). ์ด ํค๋๊ฐ ์กด์ฌํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ๋ค๋ฅธ ๋ชจ๋ ๊ฒ๋ณด๋ค ์ด๋ฅผ ์ฐ์ ์ ์ผ๋ก ์กด์คํฉ๋๋ค.์ด ๋ฐฉ๋ฒ์ ์๋ฒ์ ์ํด ์ค์ ๋๊ธฐ ๋๋ฌธ์ ๊ฐ๋ ฅํ๋ฉฐ, ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ผ์ ์ฝํ ์ธ ๋ฅผ ํ์ฑํ๊ธฐ ์์ํ๊ธฐ ์ ์๋ ์ผ๊ด์ฑ์ ๋ณด์ฅํฉ๋๋ค. ์ด๋ ์ข ์ข ์๋ฒ ์์ค(์: Apache, Nginx) ๋๋ ์๋ฒ ์ธก ์คํฌ๋ฆฝํ (์: PHP, Node.js) ๋ด์์ ๊ตฌ์ฑ๋ฉ๋๋ค.
-
๋ฐ์ดํธ ์์ ํ์(BOM): BOM์ ํ์ผ์ ์์ ๋ถ๋ถ์ ์๋ ํน์ ๋ฐ์ดํธ ์ํ์ค๋ก, ์ธ์ฝ๋ฉ์ ๋ํ๋
๋๋ค(ํนํ UTF-8, UTF-16๊ณผ ๊ฐ์ UTF ์ธ์ฝ๋ฉ์ ๊ฒฝ์ฐ). UTF-8 BOM์ ๊ธฐ์ ์ ์ผ๋ก ์ ํ ์ฌํญ์ด๋ฉฐ ๋๋๋ก ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ง๋ง(์: ์ค๋๋ ๋ธ๋ผ์ฐ์ /์๋ฒ์์ ์ถ๊ฐ ๊ณต๋ฐฑ ๋ฐ์), ๊ทธ ์กด์ฌ๋ ๋ธ๋ผ์ฐ์ ์ "์ด ํ์ผ์ UTF-8๋ก ์ธ์ฝ๋ฉ๋์์ต๋๋ค"๋ผ๊ณ ์๋ ค์ค๋๋ค. BOM์ด ์๋ ๊ฒฝ์ฐ
@charset๊ท์น๋ณด๋ค ์ฐ์ ํฉ๋๋ค.UTF-8์ ๊ฒฝ์ฐ BOM ์ํ์ค๋
EF BB BF์ ๋๋ค. ๋ง์ ํ ์คํธ ํธ์ง๊ธฐ๋ "UTF-8 with BOM"์ผ๋ก ์ ์ฅํ ๋ ์๋์ผ๋ก BOM์ ์ถ๊ฐํฉ๋๋ค. ์ ์ฌ์ ์ธ ๋ ๋๋ง ๊ฒฐํจ์ด๋ ํ์ ๋ฌธ์ ๋ฅผ ํผํ๊ธฐ ์ํด ์น ์ฝํ ์ธ ์ฉ UTF-8 ํ์ผ์ ์ผ๋ฐ์ ์ผ๋ก BOM ์์ด ์ ์ฅํ๋ ๊ฒ์ด ์ข์ต๋๋ค. -
@charset๊ท์น: HTTPContent-Typeํค๋๋ BOM์ด ์๋ ๊ฒฝ์ฐ, ๋ธ๋ผ์ฐ์ ๋ CSS ํ์ผ์ ์ฒซ ๋ฒ์งธ ๋ฌธ์ฅ์ผ๋ก@charset๊ท์น์ ์ฐพ์ต๋๋ค. ๋ฐ๊ฒฌ๋๋ฉด ํด๋น ์ ์ธ๋ ์ธ์ฝ๋ฉ์ ์ฌ์ฉํฉ๋๋ค. -
์์ ๋ฌธ์ ์ธ์ฝ๋ฉ: ์์ ์ด๋ ๊ฒ๋ ์ง์ ๋์ง ์์ ๊ฒฝ์ฐ, ๋ธ๋ผ์ฐ์ ๋ ์ผ๋ฐ์ ์ผ๋ก CSS ํ์ผ์ ์ฐ๊ฒฐ๋ HTML ๋ฌธ์์ ์ธ์ฝ๋ฉ์ผ๋ก ๋์ฒด๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, HTML ๋ฌธ์์
<meta charset="UTF-8">๊ฐ ์๊ณ CSS์ ๋ํ ๋ค๋ฅธ ์ธ์ฝ๋ฉ ํํธ๊ฐ ์๋ ๊ฒฝ์ฐ, ๋ธ๋ผ์ฐ์ ๋ CSS๋ UTF-8์ด๋ผ๊ณ ๊ฐ์ ํฉ๋๋ค. - ๊ธฐ๋ณธ ์ธ์ฝ๋ฉ: ์ตํ์ ์๋จ์ผ๋ก, ์ด๋ค ์์ค์์๋ ๋ช ์์ ์ธ ์ธ์ฝ๋ฉ ์ ๋ณด๋ฅผ ์ฌ์ฉํ ์ ์๋ ๊ฒฝ์ฐ, ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๋ณธ ์ธ์ฝ๋ฉ์ ์ ์ฉํฉ๋๋ค(์ด๋ ๋ค์ํ์ง๋ง ํ๋ ๋ธ๋ผ์ฐ์ ์์๋ ์ข ์ข UTF-8์ด๊ณ , ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์๋ ๋ก์ผ์ผ ํน์ ์ธ์ฝ๋ฉ์ผ ์ ์์). ์ด๋ ๊ฐ์ฅ ์ํํ ์๋๋ฆฌ์ค์ด๋ฉฐ, ๋ชจ์ง๋ฐ์ผ์ ๊ฐ์ฅ ํํ ์์ธ์ด๋ฏ๋ก ๋ฐ๋์ ํผํด์ผ ํฉ๋๋ค.
์ด ๊ณ์ธต ๊ตฌ์กฐ๋ ๋๋๋ก ๋ช
์์ ์ธ @charset ๊ท์น ์์ด๋ CSS ํ์ผ์ด ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๋ ์ด์ ๋ฅผ ์ค๋ช
ํฉ๋๋ค. ํนํ ์๋ฒ๊ฐ ์ผ๊ด๋๊ฒ UTF-8 ํค๋๋ฅผ ๋ณด๋ด๊ฑฐ๋ HTML ๋ฌธ์๊ฐ UTF-8์ ์ ์ธํ๋ ๊ฒฝ์ฐ์ ๊ทธ๋ ์ต๋๋ค.
์ธ์ , ์ @charset์ ์ฌ์ฉํด์ผ ํ๋๊ฐ
๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ๊ณ ๋ คํ ๋, @charset์ด ํญ์ ํ์ํ์ง ๊ถ๊ธํ ์ ์์ต๋๋ค. ๋ต์ ๋ฏธ๋ฌํ์ง๋ง, ์ผ๋ฐ์ ์ผ๋ก ํน์ ์๋๋ฆฌ์ค์์๋ ์ข์ ์ต๊ด์
๋๋ค:
-
๊ฐ๋ ฅํ ๋์ฒด ์๋จ์ผ๋ก์: ์๋ฒ๊ฐ
UTF-8ํค๋๋ฅผ ๋ณด๋ด๋๋ก ๊ตฌ์ฑ๋์ด ์๋๋ผ๋, CSS ํ์ผ ์๋จ์@charset "UTF-8";๋ฅผ ํฌํจํ๋ ๊ฒ์ ๋ช ์์ ์ธ ๋ด๋ถ ์ ์ธ ์ญํ ์ ํฉ๋๋ค. ์ด๋ ์๋ฒ ๊ตฌ์ฑ์ด ์ผ๊ด๋์ง ์์ ์ ์๋ ๊ฐ๋ฐ ํ๊ฒฝ์ด๋ ์๋ฒ ์์ด ๋ก์ปฌ์์ ํ์ผ์ ๋ณผ ๋ ํนํ ์ ์ฉํฉ๋๋ค. - ์ผ๊ด์ฑ๊ณผ ๋ช ํ์ฑ์ ์ํด: ๊ฐ๋ฐ์, ์ฝํ ์ธ ๊ด๋ฆฌ์, ํ์งํ ์ ๋ฌธ๊ฐ ๋ฑ ํ์ผ์ ์ฌ๋ ๋ชจ๋ ์ฌ๋์๊ฒ CSS ํ์ผ์ ์ธ์ฝ๋ฉ์ ๋ช ์์ ์ผ๋ก ๋ง๋ญ๋๋ค. ์ด ๋ช ํ์ฑ์ ํนํ ๊ตญ์ ํ ๊ฐ์ ํ์ ์ค์ ๋ชจํธ์ฑ๊ณผ ์ ์ฌ์ ์ค๋ฅ๋ฅผ ์ค์ฌ์ค๋๋ค.
-
๋ ๊ฑฐ์ ์์คํ
๋ง์ด๊ทธ๋ ์ด์
๋๋ ์ฒ๋ฆฌ ์: ๋ค๋ฅธ ์ธ์ฝ๋ฉ(์: ISO-8859-1 ๋๋ Windows-1252)์ผ๋ก ์์ฑ๋์์ ์ ์๋ ์ค๋๋ CSS ํ์ผ์ ์์
ํ๊ณ ์๊ณ , ๋ง์ด๊ทธ๋ ์ด์
๋จ๊ณ ์ค์ด๋ ์ผ์์ ์ผ๋ก ํด๋น ์ธ์ฝ๋ฉ์ ๋ณด์กดํด์ผ ํ๋ ๊ฒฝ์ฐ,
@charset์ ํด๋น ํ์ผ์ ์ฌ๋ฐ๋ฅด๊ฒ ํด์ํ๋ ๋ฐ ํ์์ ์ ๋๋ค. -
CSS์์ ๋นASCII ๋ฌธ์ ์ฌ์ฉ ์: ๊ฐ๋
์ฑ๊ณผ ์ ์ง๋ณด์์ฑ ์ธก๋ฉด์์ ์ผ๋ฐ์ ์ผ๋ก ๊ถ์ฅ๋์ง๋ ์์ง๋ง, CSS๋ ์ด์ค์ผ์ดํ ์ฒ๋ฆฌ๋๊ฑฐ๋ ํ์ผ ์ธ์ฝ๋ฉ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋ ๊ฒฝ์ฐ ์๋ณ์(ํด๋์ค ์ด๋ฆ์ด๋ ๊ธ๊ผด ์ด๋ฆ ๋ฑ)์ ๋นASCII ๋ฌธ์๋ฅผ ํฌํจํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ฅผ
font-family: "Libre Baskerville Cyrillic";๋ก ์ ์ํ๊ฑฐ๋content์์ฑ์์ ํน์ ๋ฌธ์ ๊ธฐํธ(์ ๋ก ๊ธฐํธ์ ๊ฒฝ์ฐcontent: '€';๋๋ ์ง์ content: 'โฌ';)๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, CSS ํ์ผ์ ์ธ์ฝ๋ฉ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ธ๋์๋์ง ํ์ธํ๋ ๊ฒ์ด ๋งค์ฐ ์ค์ํฉ๋๋ค.@charset "UTF-8"; .currency-symbol::before { content: "โฌ"; /* UTF-8 ์ ๋ก ๊ธฐํธ */ } .multilingual-text::after { content: "์๋ ํ์ธ์"; /* ํ๊ตญ์ด ๋ฌธ์ */ }์ฌ๋ฐ๋ฅธ
@charset(๋๋ ๋ค๋ฅธ ๊ฐ๋ ฅํ ์ธ์ฝ๋ฉ ํํธ)์ด ์์ผ๋ฉด ์ด๋ฌํ ๋ฌธ์๋ ๋ฌผ์ํ๋ ๋ค๋ฅธ ์๋ชป๋ ๊ธฐํธ๋ก ๋ ๋๋ง๋ ์ ์์ต๋๋ค. -
๋ค๋ฅธ ๋๋ฉ์ธ์ ์ธ๋ถ ์คํ์ผ์ํธ: ์ผ๋ฐ์ ์ธ ์์ฐ์๋ ๋ ์ผ๋ฐ์ ์ด์ง๋ง, ์์ ํ ๋ค๋ฅธ ๋๋ฉ์ธ์์ ํธ์คํ
๋๋ CSS ํ์ผ์ ์ฐ๊ฒฐํ๋ ๊ฒฝ์ฐ ์๋ฒ ๊ตฌ์ฑ์ด ํฌ๊ฒ ๋ค๋ฅผ ์ ์์ต๋๋ค. ๋ช
์์ ์ธ
@charset์ ์์์น ๋ชปํ ์ธ์ฝ๋ฉ ๋ถ์ผ์น์ ๋ํ ์ถ๊ฐ์ ์ธ ๊ฒฌ๊ณ ์ฑ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
๋ณธ์ง์ ์ผ๋ก, UTF-8์ด ๋ณดํธ์ ์ผ๋ก ๊ถ์ฅ๋๋ ์ธ์ฝ๋ฉ์ด๊ณ ์๋ฒ ํค๋๊ฐ ๊ฐ์ฅ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ด์ง๋ง, @charset "UTF-8";๋ ์คํ์ผ์ํธ ๋ด์์ ํ๋ฅญํ ์์ ์ฅ์น์ด์ ๋ช
ํํ ์๋ ์ ์ธ ์ญํ ์ ํ์ฌ ์ด์์ฑ์ ํฅ์์ํค๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ์ธ์ฝ๋ฉ ๊ด๋ จ ๋ฌธ์ ์ ๊ฐ๋ฅ์ฑ์ ์ค์ฌ์ค๋๋ค.
๊ธ๋ก๋ฒ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
์ํํ๊ณ ์ ์ธ๊ณ์ ์ผ๋ก ์ ๊ทผ ๊ฐ๋ฅํ ์น ๊ฒฝํ์ ๋ณด์ฅํ๋ ค๋ฉด ๋ชจ๋ ์น ์์ฐ์ ๊ฑธ์ณ ์ผ๊ด๋ ์ธ์ฝ๋ฉ ์ ๋ต์ ์ค์ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. @charset์ด ์ ์ญํ ์ ํ๋ ๋ชจ๋ฒ ์ฌ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
1. ๋ชจ๋ ๊ณณ์์ UTF-8๋ก ํ์คํ
์ด๊ฒ์ด ํฉ๊ธ๋ฅ ์ ๋๋ค. ๋ค์ ํญ๋ชฉ์ ๋ํด UTF-8์ ๊ธฐ๋ณธ ๋ฐ ๋ฒ์ฉ ์ธ์ฝ๋ฉ์ผ๋ก ๋ง๋์ญ์์ค:
- ๋ชจ๋ HTML ๋ฌธ์: HTML์
<head>์น์ ๋ด์<meta charset="UTF-8">๋ฅผ ๋ช ์์ ์ผ๋ก ์ ์ธํ์ญ์์ค. ์ด๊ฒ์ ๋งจ ์ฒ์ ๋ฉํ ํ๊ทธ ์ค ํ๋์ฌ์ผ ํฉ๋๋ค. - ๋ชจ๋ CSS ์คํ์ผ์ํธ: ๋ชจ๋
.cssํ์ผ์ UTF-8๋ก ์ ์ฅํ์ญ์์ค. ๋ํ, ๋ชจ๋ CSS ํ์ผ์ ์ฒซ ์ค์@charset "UTF-8";๋ฅผ ํฌํจํ์ญ์์ค. - ๋ชจ๋ JavaScript ํ์ผ:
.jsํ์ผ์ UTF-8๋ก ์ ์ฅํ์ญ์์ค. JavaScript์๋@charset๊ณผ ๋๋ฑํ ๊ฒ์ด ์์ง๋ง ์ผ๊ด์ฑ์ด ํต์ฌ์ ๋๋ค. - ์๋ฒ ๊ตฌ์ฑ: ์น ์๋ฒ(Apache, Nginx, IIS ๋ฑ)๋ฅผ ๊ตฌ์ฑํ์ฌ ๋ชจ๋ ํ
์คํธ ๊ธฐ๋ฐ ์ฝํ
์ธ ๋ฅผ
Content-Type: text/html; charset=UTF-8๋๋Content-Type: text/css; charset=UTF-8ํค๋์ ํจ๊ป ์ ๊ณตํ๋๋ก ํ์ญ์์ค. ์ด๊ฒ์ด ๊ฐ์ฅ ๊ฒฌ๊ณ ํ๊ณ ์ ํธ๋๋ ๋ฐฉ๋ฒ์ ๋๋ค. - ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ธ์ฝ๋ฉ: ๋ฐ์ดํฐ๋ฒ ์ด์ค(์: MySQL, PostgreSQL)๊ฐ UTF-8(ํนํ MySQL์ ๊ฒฝ์ฐ ๋ชจ๋ ์ ๋์ฝ๋ ๋ฌธ์, ์ด๋ชจํฐ์ฝ ํฌํจ,๋ฅผ ์๋ฒฝํ๊ฒ ์ง์ํ๊ธฐ ์ํด
utf8mb4)์ ์ฌ์ฉํ๋๋ก ๊ตฌ์ฑ๋์๋์ง ํ์ธํ์ญ์์ค. - ๊ฐ๋ฐ ํ๊ฒฝ: ํ ์คํธ ํธ์ง๊ธฐ, IDE ๋ฐ ๋ฒ์ ๊ด๋ฆฌ ์์คํ ์ UTF-8๋ก ๊ธฐ๋ณธ ์ค์ ํ์ญ์์ค. ์ด๋ ๊ฒ ํ๋ฉด ์ค์๋ก ๋ค๋ฅธ ์ธ์ฝ๋ฉ์ผ๋ก ์ ์ฅ๋๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
์ ์ฒด ์คํ์ ๊ฑธ์ณ ์ผ๊ด๋๊ฒ UTF-8์ ์ฌ์ฉํจ์ผ๋ก์จ ์ธ์ฝ๋ฉ ๊ด๋ จ ๋ฌธ์ ์ ๊ฐ๋ฅ์ฑ์ ๊ทน์ ์ผ๋ก ์ค์ด๊ณ , ๋ชจ๋ ์ธ์ด์ ์คํฌ๋ฆฝํธ์ ํ ์คํธ๊ฐ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์๋ํ ๋๋ก ํ์๋๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
2. ํญ์ ํ์ผ์ UTF-8(BOM ์์)๋ก ์ ์ฅ
๋๋ถ๋ถ์ ์ต์ ํ ์คํธ ํธ์ง๊ธฐ(VS Code, Sublime Text, Atom, Notepad++ ๋ฑ)์์๋ ์ ์ฅํ ๋ ์ธ์ฝ๋ฉ์ ์ง์ ํ ์ ์์ต๋๋ค. ํญ์ "UTF-8" ๋๋ "UTF-8 without BOM"์ ์ ํํ์ญ์์ค. ์ธ๊ธํ๋ฏ์ด BOM์ ์ธ์ฝ๋ฉ์ ์๋ฆฌ๋ ์ ํธ์ด์ง๋ง ๋๋ก๋ ์ฌ์ํ ํ์ฑ ๋ฌธ์ ๋ ๋ณด์ด์ง ์๋ ๋ฌธ์๋ฅผ ์ ๋ฐํ ์ ์์ผ๋ฏ๋ก ์น ์ฝํ ์ธ ์์๋ ์ผ๋ฐ์ ์ผ๋ก ํผํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค.
3. ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐ ํ ์คํธ
- ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ: ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ CSS ํ์ผ์ HTTP ํค๋๋ฅผ ๊ฒ์ฌํ์ญ์์ค.
Content-Typeํค๋์charset=UTF-8์ด ํฌํจ๋์ด ์๋์ง ํ์ธํ์ญ์์ค. - ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ๋ฐ ํฌ๋ก์ค ๋๋ฐ์ด์ค ํ ์คํธ: ๋ค์ํ ๋ธ๋ผ์ฐ์ (Chrome, Firefox, Safari, Edge)์ ์ด์ ์ฒด์ (๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ ํฌํจ)์์ ์น์ฌ์ดํธ๋ฅผ ํ ์คํธํ์ฌ ๋ ๋๋ง ๋ถ์ผ์น๋ฅผ ์ก์๋ด์ญ์์ค.
- ๊ตญ์ ํ๋ ์ฝํ ์ธ ํ ์คํธ: ์ฌ์ดํธ๊ฐ ์ฌ๋ฌ ์ธ์ด๋ฅผ ์ง์ํ๋ ๊ฒฝ์ฐ, ๋ค๋ฅธ ์คํฌ๋ฆฝํธ(์: ์๋์ด, ๋ฌ์์์ด, ์ค๊ตญ์ด, ๋ฐ๋ฐ๋๊ฐ๋ฆฌ)์ ์ฝํ ์ธ ๋ก ํ ์คํธํ์ฌ ๋ชจ๋ ๋ฌธ์๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํ์ญ์์ค. ํน์ ์ด๋ชจํฐ์ฝ๊ณผ ๊ฐ์ด ๊ธฐ๋ณธ ๋ค๊ตญ์ด ํ๋ฉด(BMP)์ ๋ฒ์ด๋ ์ ์๋ ๋ฌธ์์ ํนํ ์ฃผ์ํ์ญ์์ค. ์ด๋ฌํ ๋ฌธ์๋ UTF-8์์ 4๋ฐ์ดํธ๊ฐ ํ์ํฉ๋๋ค.
4. ๊ตญ์ ๋ฌธ์๋ฅผ ์ํ ๋์ฒด ๊ธ๊ผด ๊ณ ๋ ค
๋ฌธ์ ์ธ์ฝ๋ฉ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฐ์ดํธ๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ํด์ํ๋๋ก ๋ณด์ฅํ์ง๋ง, ํด๋น ๋ฌธ์๋ฅผ ํ์ํ๋ ๊ฒ์ ์ฌ์ฉ์์ ์์คํ
์ ํ์ํ ๊ธ๋ฆฌํ๋ฅผ ํฌํจํ๋ ๊ธ๊ผด์ด ์๋์ง ์ฌ๋ถ์ ๋ฌ๋ ค ์์ต๋๋ค. ์ฌ์ฉ์ ์ ์ ์น ๊ธ๊ผด์ด ํน์ ๋ฌธ์๋ฅผ ์ง์ํ์ง ์์ผ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ์์คํ
๊ธ๊ผด๋ก ๋์ฒด๋ฉ๋๋ค. ๊ธ๊ผด ์คํ์ด ๊ฒฌ๊ณ ํ๊ณ ๊ธฐ๋ณธ ์น ๊ธ๊ผด์ ์๋ ๋ฌธ์๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ ๋์ฒด ์๋จ์ผ๋ก ์ผ๋ฐ ๊ธ๊ผด ๊ณ์ด(sans-serif, serif ๋ฑ)์ ํฌํจํ๋์ง ํ์ธํ์ญ์์ค.
์ผ๋ฐ์ ์ธ ํจ์ ๊ณผ ๋ฌธ์ ํด๊ฒฐ
๋ชจ๋ฒ ์ฌ๋ก์๋ ๋ถ๊ตฌํ๊ณ ์ธ์ฝ๋ฉ ๋ฌธ์ ๊ฐ ๋๋๋ก ๋ฐ์ํ ์ ์์ต๋๋ค. @charset ๋ฐ ๋ฌธ์ ์ธ์ฝ๋ฉ๊ณผ ๊ด๋ จ๋ ์ผ๋ฐ์ ์ธ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
1. @charset์ ์๋ชป๋ ๋ฐฐ์น
๊ฐ์ฅ ๋น๋ฒํ ์ค๋ฅ๋ @charset์ ์ฒซ ๋ฒ์งธ ์ค์ด ์๋ ๋ค๋ฅธ ๊ณณ์ ๋ฐฐ์นํ๋ ๊ฒ์
๋๋ค. ๊ทธ ์์ ์ฃผ์, ๋น ์ค ๋๋ ๋ค๋ฅธ ๊ท์น์ด ์์ผ๋ฉด ๋ฌด์๋ฉ๋๋ค.
/* ๋ด ์คํ์ผ์ํธ */
@charset "UTF-8"; /* ์ด๊ฒ์ ์ฌ๋ฐ๋ฆ
๋๋ค */
/* ๋ด ์คํ์ผ์ํธ */
@charset "UTF-8"; /* ์๋ชป๋จ: ์์ ๊ณต๋ฐฑ์ด ์์ */
/* ๋ด ์คํ์ผ์ํธ */
@import url("reset.css");
@charset "UTF-8"; /* ์๋ชป๋จ: @import๊ฐ ์์ ์์ */
ํด๊ฒฐ์ฑ
: ํญ์ @charset์ด CSS ํ์ผ์ ์ ๋์ ์ธ ์ฒซ ๋ฒ์งธ ์ ์ธ์ธ์ง ํ์ธํ์ญ์์ค.
2. ํ์ผ ์ธ์ฝ๋ฉ๊ณผ ์ ์ธ๋ ์ธ์ฝ๋ฉ์ ๋ถ์ผ์น
CSS ํ์ผ์ด ISO-8859-1๋ก ์ ์ฅ๋์์ง๋ง @charset "UTF-8";๋ฅผ ์ ์ธํ๋ฉด ASCII ๋ฒ์๋ฅผ ๋ฒ์ด๋ ๋ฌธ์๊ฐ ์๋ชป ๋ ๋๋ง๋ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค. ํ์ผ์ด UTF-8์ด์ง๋ง ์ด์ ์ธ์ฝ๋ฉ์ผ๋ก ์ ์ธ๋ ๊ฒฝ์ฐ์๋ ๋ง์ฐฌ๊ฐ์ง์
๋๋ค.
ํด๊ฒฐ์ฑ : ํญ์ ์ ์ธํ๋ ์ธ์ฝ๋ฉ(๊ฐ๊ธ์ UTF-8)์ผ๋ก ํ์ผ์ ์ ์ฅํ๊ณ ์๋ฒ ํค๋ ๋ฐ HTML ๋ฉํ ํ๊ทธ์์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ์ญ์์ค. ํ์ํ ๊ฒฝ์ฐ ํ ์คํธ ํธ์ง๊ธฐ์ "๋ค๋ฅธ ์ด๋ฆ์ผ๋ก ์ ์ฅ..." ๋๋ "์ธ์ฝ๋ฉ ๋ณ๊ฒฝ" ์ต์ ์ ์ฌ์ฉํ์ฌ ํ์ผ์ ๋ณํํ์ญ์์ค.
3. ์๋ฒ ๊ตฌ์ฑ์ด @charset์ ์ฌ์ ์
์๋ฒ๊ฐ @charset ๊ท์น๊ณผ ๋ค๋ฅธ ์ธ์ฝ๋ฉ์ ์ง์ ํ๋ HTTP Content-Type ํค๋๋ฅผ ๋ณด๋ด๋ฉด ์๋ฒ์ ํค๋๊ฐ ์ฐ์ ํฉ๋๋ค. ์ด๋ก ์ธํด @charset์ด ์ฌ๋ฐ๋ฅด๋๋ผ๋ ์๊ธฐ์น ์์ ๋ชจ์ง๋ฐ์ผ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ
: ์น ์๋ฒ๋ฅผ ๊ตฌ์ฑํ์ฌ ๋ชจ๋ CSS ํ์ผ์ ๋ํด ํญ์ Content-Type: text/css; charset=UTF-8์ ๋ณด๋ด๋๋ก ํ์ญ์์ค. ์ด๊ฒ์ด ๊ฐ์ฅ ์ ๋ขฐํ ์ ์๋ ์ ๊ทผ ๋ฐฉ์์
๋๋ค.
4. UTF-8 BOM ๋ฌธ์
์ต์ ๋๊ตฌ์์๋ ๋ ์ผ๋ฐ์ ์ด์ง๋ง, ์์น ์๋ UTF-8 BOM์ด ํนํ ์ค๋๋ ๋ธ๋ผ์ฐ์ ๋ฒ์ ์ด๋ ์๋ฒ ์ค์ ์์ ํ์ฑ์ ๋ฐฉํดํ์ฌ ํ์ผ ์์ ๋ถ๋ถ์ ๋ณด์ด์ง ์๋ ๋ฌธ์๋ ๋ ์ด์์ ์ด๋์ ์ ๋ฐํ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ๋ชจ๋ UTF-8 ํ์ผ์ BOM ์์ด ์ ์ฅํ์ญ์์ค. ๋ง์ ํ ์คํธ ํธ์ง๊ธฐ์์ ์ด ์ต์ ์ ์ ๊ณตํฉ๋๋ค. ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฉด ํฅ์ค ํธ์ง๊ธฐ๋ ์จ๊ฒจ์ง ๋ฌธ์๋ฅผ ํ์ํ ์ ์๋ ํน์ ํ ์คํธ ํธ์ง๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ BOM์ด ์๋์ง ํ์ธํ์ญ์์ค.
5. ์ ํ์/์ฝํ ์ธ ์ ํน์ ๋ฌธ์์ ๋ํ ์ด์ค์ผ์ดํ ์ฒ๋ฆฌ
CSS ์๋ณ์(ํด๋์ค ์ด๋ฆ ๋ฑ, ๊ธ๋ก๋ฒ ํ๋ก์ ํธ์๋ ๊ถ์ฅ๋์ง ์์)๋ ๋ฌธ์์ด ๊ฐ(๊ฐ์ ์์์ content ๋ฑ) ๋ด์์ ๋นASCII ๋ฌธ์๋ฅผ ์ง์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ, CSS ์ด์ค์ผ์ดํ(\ ๋ค์ ์ ๋์ฝ๋ ์ฝ๋ ํฌ์ธํธ๋ฅผ ๋ถ์)๋ฅผ ์ฌ์ฉํ ์๋ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ ๋ก ๊ธฐํธ๋ content: "\20AC";์
๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ํ์ผ ์ธ์ฝ๋ฉ์ ๊ด๊ณ์์ด ํธํ์ฑ์ ๋ณด์ฅํ์ง๋ง, ์คํ์ผ์ํธ์ ๊ฐ๋
์ฑ์ ๋จ์ด๋จ๋ฆฝ๋๋ค.
.euro-icon::before {
content: "\20AC"; /* ์ ๋ก ๊ธฐํธ์ ์ ๋์ฝ๋ ์ด์ค์ผ์ดํ */
}
.korean-text::after {
content: "\C548\B155\D558\C138\C694"; /* '์๋
ํ์ธ์'์ ์ ๋์ฝ๋ ์ด์ค์ผ์ดํ */
}
ํ์ผ์ด UTF-8๋ก ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ฅ๋ ๊ฒฝ์ฐ, @charset "UTF-8";๋ฅผ ์ฌ์ฉํ๊ณ ๋ฌธ์๋ฅผ ์ง์ ํฌํจํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ผ๋ก ๊ฐ๋
์ฑ ๋ฉด์์ ์ ํธ๋ฉ๋๋ค. ์ด์ค์ผ์ดํ ์ฒ๋ฆฌ๋ ํน์ ์๋๋ฆฌ์ค๋ ์ ๋์ ์ธ ํ์ค์ฑ์ด ์๊ตฌ๋ ๋ ๊ฒฌ๊ณ ํ ๋์์
๋๋ค.
์ฌ๋ฐ๋ฅธ ์ธ์ฝ๋ฉ์ ๊ธ๋ก๋ฒ ์ํฅ
๋ฌธ์ ์ธ์ฝ๋ฉ์ด๋ผ๋ ๊ธฐ์ ์ ์ธ ์ธ๋ถ ์ฌํญ๊ณผ ๊ทธ ์ฐ์ฅ์ ์์ ์๋ @charset ๊ท์น์ ์น ์ฝํ
์ธ ์ ๊ธ๋ก๋ฒ ๋๋ฌ ๋ฒ์์ ์ ๊ทผ์ฑ์ ์ง๋ํ ์ํฅ์ ๋ฏธ์นฉ๋๋ค:
- ์ ์ธ๊ณ์ ์ผ๋ก "๋ชจ์ง๋ฐ์ผ" ๋ฐฉ์ง: ๊นจ์ง ํ ์คํธ๋งํผ ์ฌ์ฉ์ ๊ฒฝํ์ ํด์น๋ ๊ฒ์ ์์ต๋๋ค. ๋ฉ๋ด ํญ๋ชฉ์ด๋ , ์คํ์ผ์ด ์ ์ฉ๋ ์ฝํ ์ธ ๋ , ๋ฒํผ ๋ ์ด๋ธ์ด๋ , ์๋ชป๋ ์ธ์ฝ๋ฉ์ ํ ์คํธ๋ฅผ ์ฝ์ ์ ์๊ฒ ๋ง๋ค์ด ๋ค๋ฅธ ์ธ์ด๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ๋น๋ผํด ๋ฌธ์๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์๋ฅผ ์ฆ์ ์์ธ์ํฌ ์ ์์ต๋๋ค. ์ฌ๋ฐ๋ฅธ ์ธ์ฝ๋ฉ์ ๋ณด์ฅํ๋ฉด ๋ชจ๋ ๊ณณ์ ์ฌ์ฉ์์ ๋ํด ์ด๋ฌํ "ํ ์คํธ ์์"์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
- ์ง์ ํ ๊ตญ์ ํ(i18n) ํ์ฑํ: ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ์ค๊ณ๋ ์น์ฌ์ดํธ์ ๊ฒฝ์ฐ, ๊ฒฌ๊ณ ํ ๊ตญ์ ํ๋ ํ์์ ์ฌ์ง๊ฐ ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ์ฌ๋ฌ ์ธ์ด, ๋ค๋ฅธ ๋ ์ง/์๊ฐ ํ์, ํตํ ๊ธฐํธ ๋ฐ ํ ์คํธ ๋ฐฉํฅ(์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ, ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ) ์ง์์ด ํฌํจ๋ฉ๋๋ค. ์ ์ ํ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ด๋ฌํ ๋ชจ๋ ๊ตญ์ ํ ๋ ธ๋ ฅ์ ๊ธฐ๋ฐ์ ๋๋ค. ์ด๊ฒ์ด ์์ผ๋ฉด ๊ฐ์ฅ ์ ๊ตํ ๋ฒ์ญ ์์คํ ๋ ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋์ง ์์ต๋๋ค.
- ์ง์ญ ๊ฐ ๋ธ๋๋ ์ผ๊ด์ฑ ์ ์ง: ๋ธ๋๋์ ์๊ฐ์ ์ ์ฒด์ฑ์ ํ ์คํธ๊ฐ ์ด๋ป๊ฒ ๋ณด์ด๋์ง๊น์ง ํ์ฅ๋ฉ๋๋ค. ๋ธ๋๋ ์ด๋ฆ์ด๋ ์ฌ๋ก๊ฑด์ ๊ณ ์ ํ ๋ฌธ์๊ฐ ํฌํจ๋๊ฑฐ๋ ๋น๋ผํด ๋ฌธ์๋ก ํ์๋๋ ๊ฒฝ์ฐ, ์ฌ๋ฐ๋ฅธ ์ธ์ฝ๋ฉ์ ์ฌ์ฉ์์ ์์น๋ ์์คํ ์ค์ ์ ๊ด๊ณ์์ด ๋ธ๋๋์ ์ค์ํ ์ธก๋ฉด์ด ์ผ๊ด๋๊ณ ์ ๋ฌธ์ ์ผ๋ก ํ์๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ๊ธ๋ก๋ฒ ๊ฒ์์ ์ํ SEO ๊ฐ์ : ๊ฒ์ ์์ง์ ์ฝํ ์ธ ๋ฅผ ์ธ๋ฑ์ฑํ๊ธฐ ์ํด ์ฌ๋ฐ๋ฅด๊ฒ ํด์๋ ํ ์คํธ์ ํฌ๊ฒ ์์กดํฉ๋๋ค. ์ธ์ฝ๋ฉ ๋ฌธ์ ๋ก ์ธํด ๋ฌธ์๊ฐ ๊นจ์ง๋ฉด ๊ฒ์ ์์ง์ด ์ฝํ ์ธ ๋ฅผ ์ ๋๋ก ์ดํดํ๊ณ ๋ถ๋ฅํ๋ ๋ฐ ์ด๋ ค์์ ๊ฒช์ ์ ์์ผ๋ฉฐ, ์ด๋ ๊ธ๋ก๋ฒ ๊ฒ์ ์์ง ์์ ๋ฐ ๊ฒ์ ๊ฐ๋ฅ์ฑ์ ํด๋ฅผ ๋ผ์น ์ ์์ต๋๋ค.
- ์ ๊ทผ์ฑ ํฅ์: ๋ณด์กฐ ๊ธฐ์ (์คํฌ๋ฆฐ ๋ฆฌ๋, ๋๋ณด๊ธฐ)์ ์์กดํ๋ ์ฌ์ฉ์์๊ฒ ์ฌ๋ฐ๋ฅธ ํ ์คํธ ๋ ๋๋ง์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ๊นจ์ง ํ ์คํธ๋ ์ฌ๋์ ๋์ผ๋ก ์ฝ์ ์ ์์ ๋ฟ๋ง ์๋๋ผ ์ ๊ทผ์ฑ ๋๊ตฌ์๋ ๋ง์ฐฌ๊ฐ์ง์ด๋ฏ๋ก, ์ ์ธ๊ณ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ์๋น ๋ถ๋ถ์ ์ฝํ ์ธ ๊ฐ ์ ๊ทผ ๋ถ๊ฐ๋ฅํ๊ฒ ๋ฉ๋๋ค.
์ธํฐ๋ท์ด ์ง๋ฆฌ์ ๊ฒฝ๊ณ๋ฅผ ์ด์ํ๋ ์ธ์์์ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ๋ฌด์ํ๋ ๊ฒ์ ์์ด์ผ ํ ๊ณณ์ ์ธ์ด ์ฅ๋ฒฝ์ ์ธ์ฐ๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค. ๊ฒธ์ํ @charset ๊ท์น์ ์ฌ๋ฐ๋ฅด๊ฒ ์ดํดํ๊ณ ๊ตฌํ๋ ๋ ์ด๋ฌํ ์ฅ๋ฒฝ์ ํ๋ฌผ๊ณ ์ง์ ์ผ๋ก ๊ธ๋ก๋ฒํ๊ณ ํฌ์ฉ์ ์ธ ์ธํฐ๋ท์ ์ก์ฑํ๋ ๋ฐ ํฌ๊ฒ ๊ธฐ์ฌํฉ๋๋ค.
๊ฒฐ๋ก : ์์ ๊ท์น์ด ๊ฐ์ง ํฐ ์ํฅ
CSS @charset ๊ท์น์ ๊ด๋ํ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ์์ ์ธ๋ถ ์ฌํญ์ฒ๋ผ ๋ณด์ด์ง๋ง, ์คํ์ผ์ํธ์ ๊ธ๋ก๋ฒ ํธํ์ฑ๊ณผ ์ฌ๋ฐ๋ฅธ ๋ ๋๋ง์ ๋ณด์ฅํ๋ ๋ฐ ๋ถ๊ท ํ์ ์ผ๋ก ํฐ ์ญํ ์ ํฉ๋๋ค. ์ด๋ HTTP ํค๋, BOM ๋ฐ HTML ๋ฉํ ํ๊ทธ์ ํ๋ ฅํ์ฌ ๋ฐ์ดํธ์ ์ธ์ด๋ฅผ ๋ธ๋ผ์ฐ์ ์ ์ ๋ฌํ๋ ๋ฌธ์ ์ธ์ฝ๋ฉ ํผ์ฆ์ ๊ธฐ๋ณธ ์กฐ๊ฐ์
๋๋ค.
HTML๊ณผ CSS์์ JavaScript ๋ฐ ์๋ฒ ๊ตฌ์ฑ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ชจ๋ ์น ์์ฐ์์ UTF-8์ ๋ณดํธ์ ์ธ ์ธ์ฝ๋ฉ ํ์ค์ผ๋ก ์ฑํํ๊ณ , ์คํ์ผ์ํธ์ ๋งจ ์ฒ์์ @charset "UTF-8";๋ฅผ ์ผ๊ด๋๊ฒ ์ ์ฉํจ์ผ๋ก์จ, ์ฌ๋ฌ๋ถ์ ์ง์ ํ ๊ตญ์ ์ ์น ์กด์ฌ๋ฅผ ์ํ ๊ฒฌ๊ณ ํ ๊ธฐ๋ฐ์ ๋ง๋ จํ๋ ๊ฒ์
๋๋ค. ์ด๋ฌํ ์ธ์ฌํ ์ฃผ์๋ ๋ต๋ตํ "๋ชจ์ง๋ฐ์ผ"๋ฅผ ๋ฐฉ์งํ๊ณ , ์ฌ๋ฌ๋ถ์ ์ฝํ
์ธ , ๋์์ธ ๋ฐ ๋ธ๋๋ ์ ์ฒด์ฑ์ด ์ ์ธ๊ณ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ๊ทธ๋ค์ ๋ชจ๊ตญ์ด๋ ์คํฌ๋ฆฝํธ์ ๊ด๊ณ์์ด ์๋ฒฝํ๊ฒ ์ ์๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
์น์ ๊ณ์ ๊ตฌ์ถํด ๋๊ฐ๋ฉด์ ๋ชจ๋ ๋ฌธ์๊ฐ ์ค์ํ๋ค๋ ๊ฒ์ ๊ธฐ์ตํ์ญ์์ค. CSS์ ๊ฒธ์ํ @charset ๊ท์น์ด ์ด๋๋ ์ผ๊ด๋๊ณ ๋ช
ํํ ๋ฌธ์ ์ธ์ฝ๋ฉ ์ ๋ต์ ๋จ์ง ๊ธฐ์ ์ ์ธ ํ์์ผ ๋ฟ๋ง ์๋๋ผ, ์ง์ ์ผ๋ก ๊ธ๋ก๋ฒํ๊ณ ์ ๊ทผ ๊ฐ๋ฅํ๋ฉฐ ์ฌ์ฉ์ ์นํ์ ์ธ ์ธํฐ๋ท์ ๋ํ ์ฝ์์
๋๋ค.