6.Global Style & Theme
Reset CSS
CSS ์ฌ์ค์ ๋๋ CSS ์ ๊ทํ๋ผ๊ณ ๋ ํ๋ CSS ์ฌ์ค์ ์ ์ฌ๋ฌ ์น ๋ธ๋ผ์ฐ์ ์์ HTML ์์์ ์คํ์ผ์ ์ง์ ํ๊ธฐ ์ํ ์ผ๊ด๋ ๊ธฐ์ค์ ์ ๊ณตํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ CSS ๊ท์น ๋๋ ์คํ์ผ์ํธ ์งํฉ์ด๋ค. ๋ธ๋ผ์ฐ์ ์์ ์ ์ฉ๋๋ ๊ธฐ๋ณธ ์คํ์ผ์ ๋ถ์ผ์น ๋ฐ ์ฐจ์ด๋ฅผ ์ ๊ฑฐํ์ฌ ์น ๋์์ธ์ ๊ตฌ์ถํ ๋ ๋ณด๋ค ์ผ๊ด๋ ์์์ ์ ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋๋ค.
๋ชฉ์ (Purpose): CSS ์ฌ์ค์ ์ ์ฃผ์ ๋ชฉ์ ์ ๋ธ๋ผ์ฐ์ ์์ HTML ์์์ ์ ์ฉํ ๊ธฐ๋ณธ ์คํ์ผ์ ์ฌ์ค์ ํ๊ฑฐ๋ ๋ฌด๋ ฅํํ๋ ๊ฒ์ด๋ค. ์น ๋ธ๋ผ์ฐ์ ๋ง๋ค ๊ธ๊ผด ํฌ๊ธฐ, ์ฌ๋ฐฑ, ํจ๋ฉ, ์ค ๋์ด ๋ฐ ๊ธฐํ ์๊ฐ์ ์์ฑ์ด ๋ค๋ฅผ ์ ์๋ ๊ณ ์ ํ ๊ธฐ๋ณธ ์คํ์ผ์ด ์๋ค. CSS ์ฌ์ค์ ์ ์ฌ์ฉํ๋ฉด ๊นจ๋ํ ์ฌ๋ ์ดํธ์์ ์์ํ์ฌ HTML ์์์ ๋ชจ์์ ์๊ธฐ์น ์์ ๋ถ์ผ์น๋ฅผ ํผํ๊ณ ๊ณตํํ ๊ฒฝ์์ ์ฅ์ ๋ง๋ค ์ ์๋ค.
์ฌ์ค์ ๋ ์ ๊ทํ(Resets vs. Normalizes): CSS๋ฅผ ์ฌ์ค์ ํ๋ ๋ฐฉ๋ฒ์๋ ์ฌ์ค์ ๊ณผ ์ ๊ทํ๋ผ๋ ๋ ๊ฐ์ง ์ฃผ์ ์ ๊ทผ ๋ฐฉ์์ด ์๋ค.
์ฌ์ค์ (Resets): CSS ์ฌ์ค์ ์ HTML ์์์์ ๋ชจ๋ ๊ธฐ๋ณธ ์คํ์ผ์ ์ ๊ฑฐํ์ฌ ๊ณตํต ๊ธฐ๋ณธ ์คํ์ผ๋ก ์ค์ ํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋น ์บ๋ฒ์ค์์ ์์ํ๋ฉฐ ๊ฐ๋ฐ์๊ฐ ๊ฐ ์์์ ๋ชจ๋ ์คํ์ผ์ ๋ช ์์ ์ผ๋ก ์ ์ํด์ผ ํ๋ค. ๋ชจ์์ ์๋ฒฝํ๊ฒ ์ ์ดํ ์ ์์ง๋ง ์์์ ์คํ์ผ์ ์ฒ์๋ถํฐ ๋ค์ ์ง์ ํ๋ ค๋ฉด ๋ ๋ง์ ์์ ์ด ํ์ํ ์ ์๋ค.
์ ๊ทํ(Normalizes): CSS ์ ๊ทํ๋ ๋ธ๋ผ์ฐ์ ์ ๋ถ์ผ์น๋ฅผ ํด๊ฒฐํ๋ฉด์ ์ ์ฉํ ๊ธฐ๋ณธ ์คํ์ผ์ ๋ณด์กดํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋ค. ๊ธฐ๋ณธ ์คํ์ผ์ ์์ ํ ์ ๊ฑฐํ๋ ๋์ ์ฌ๋ฌ ๋ธ๋ผ์ฐ์ ์์ ์ผ๊ด์ฑ์ ์ ์งํ๋๋ก ์กฐ์ ํ๋ค. ์ ๊ทํ๋ฅผ ์ฌ์ฉํ๋ฉด ์ผ๋ถ ์์์ ๋ํ ๋ช ์์ ์ธ ์คํ์ผ ์ง์ ์ ํ์์ฑ์ ์ค์ฌ์ฃผ์ด ๋ณด๋ค ํ์คํ ์์์ ์ ์ ๊ณตํ ์ ์๋ค.
์ผ๋ฐ์ ์ธ ์ฌ์ค์ ๊ธฐ๋ฒ(Common Reset Techniques)
์ฌ๋ฐฑ๊ณผ ํจ๋ฉ์ 0์ผ๋ก ์ค์ ํ๋ค: ์ด๋ ๊ฒ ํ๋ฉด ๋ธ๋ผ์ฐ์ ์์ ์ ์ฉ๋๋ ๊ธฐ๋ณธ ์ฌ๋ฐฑ์ด๋ ํจ๋ฉ์ ์ ๊ฑฐํ์ฌ ์์ ๊ฐ์ ๊ฐ๊ฒฉ์ ์ผ๊ด๋๊ฒ ์ ์งํ ์ ์๋ค.
๊ธ๊ผด ์คํ์ผ ์ฌ์ค์ : ํฌ๊ธฐ, ๊ตต๊ธฐ, ์ค ๋์ด์ ๊ฐ์ ๊ธ๊ผด ์์ฑ์ ์ผ๊ด๋๊ฒ ์ค์ ํ์ฌ ์ฌ๋ฌ ๋ธ๋ผ์ฐ์ ์์ ์ผ๊ด๋ ํ์ดํฌ๊ทธ๋ํผ๋ฅผ ๋ณด์ฅํ๋ค.
์์ ํฌ๊ธฐ ์ ๊ทํ: ์ง์ ๋ ๋๋น์ ๋์ด ๋ด์์ ํจ๋ฉ๊ณผ ํ ๋๋ฆฌ๋ฅผ ํฌํจํ๋ ์์ ํฌ๊ธฐ: ํ ๋๋ฆฌ ์์; ์์ฑ์ ์ ์ฉํ์ฌ ์ผ๊ด๋ ์์ ๋ชจ๋ธ์ ๋ณด์ฅํ๋ค.
๋ชฉ๋ก ์คํ์ผ ์ฌ์ค์ : ์ ๋ ฌ๋์ง ์์ ๋ชฉ๋ก์ ๊ธ๋จธ๋ฆฌ ๊ธฐํธ ๋ฐ ์ ๋ ฌ๋ ๋ชฉ๋ก์ ๋ฒํธ ๋งค๊ธฐ๊ธฐ์ ๊ฐ์ ๊ธฐ๋ณธ ๋ชฉ๋ก ์คํ์ผ์ ์ ๊ฑฐํ์ฌ ์ผ๊ด๋ ๋ชจ์์ ๋ง๋ญ๋๋ค.
ํ ์คํธ ์ฅ์ ์ ๊ฑฐํ๊ธฐ: ๋งํฌ ๋ฐ ๊ธฐํ ์์์์ ๋ฐ์ค ๋ฐ ๊ธฐํ ํ ์คํธ ์ฅ์์ ์ ๊ฑฐํ์ฌ ๊ฐ๋ฐ์๊ฐ ์คํ์ผ์ ์ฒ์๋ถํฐ ๋ค์ ์ง์ ํ ์ ์๋ค.
์ฌ์ฉ์ ์ง์ ๋ฐ ์ฌ์ฉ(Customization and Usage) ํ๋ก์ ํธ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ CSS ์ฌ์ค์ ์ ์ฌ์ฉ์ ์ง์ ํ ์ ์๋ค. ๊ฐ๋ฐ์๋ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ํน์ ์คํ์ผ์ ์ถ๊ฐํ๊ฑฐ๋ ์ ๊ฑฐํ ์ ์๋ค. ์ผ๋ฐ์ ์ผ๋ก ๊ฐ๋ฐ์๋ ์ฌ์ค์ ๋๋ ์ ๊ทํ ์คํ์ผ์ํธ๋ฅผ ํ๋ก์ ํธ์ ์ฒซ ๋ฒ์งธ CSS ํ์ผ๋ก ํฌํจ์์ผ ๋ค๋ฅธ ์คํ์ผ์ํธ๋ณด๋ค ์ฐ์ ์ ์ผ๋ก ์ ์ฉ๋๋๋ก ํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค. Normalize.css ๋ฐ Meyer's CSS Reset๊ณผ ๊ฐ์ด ๋๋ฆฌ ์ฌ์ฉ๋๋ CSS ์ฌ์ค์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋๋ ํ๋ ์์ํฌ๋ ์น ํ๋ก์ ํธ์ ์ฝ๊ฒ ํฌํจํ ์ ์๋ ๋ฏธ๋ฆฌ ๋น๋๋ ์ฌ์ค์ ๋๋ ์ ๊ทํ ์คํ์ผ์ํธ๋ฅผ ์ ๊ณตํ๋ค. ์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ถฉ๋ถํ ํ ์คํธ๋ฅผ ๊ฑฐ์ณค์ผ๋ฉฐ ๋ธ๋ผ์ฐ์ ๊ฐ ์ผ๊ด์ฑ์ ์ํ ํํํ ๊ธฐ๋ฐ์ ์ ๊ณตํ๋ค.
๊ณ ๋ ค ์ฌํญ(Considerations)
๊ตฌ์ฒด์ฑ ์ฆ๊ฐ(Increased specificity): CSS ์ฌ์ค์ ์ ๋ธ๋ผ์ฐ์ ์์ ์ค์ ํ ๊ธฐ๋ณธ ์คํ์ผ์ ์ฌ์ ์ํ๊ธฐ ์ํด ๋ณด๋ค ๊ตฌ์ฒด์ ์ธ ์ ํ๊ธฐ๋ฅผ ํ์๋ก ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค. ๊ฐ๋ฐ์๋ ์ฌ์ฉ์ ์ ์ ์คํ์ผ์ ์ ์ฉํ ๋ ์ ํ๊ธฐ์ ํน์ด์ฑ์ ์ผ๋์ ๋์ด์ผ ํ๋ค.
์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ(Performance impact): HTML ์์์ ๋ชจ๋ ๊ธฐ๋ณธ ์คํ์ผ์ ์ฌ์ค์ ํ๋ฉด ํ์ผ ํฌ๊ธฐ๊ฐ ์ฆ๊ฐํ๊ณ ์คํ์ผ ์ฒ๋ฆฌ๊ฐ ์ถ๊ฐ๋ ์ ์๋ค. ์ผ๊ด์ฑ์ ์ด์ ๊ณผ ์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ์ ๊ท ํ์ ๋ง์ถ๊ณ ํ๋ก์ ํธ์ ํน์ ์๊ตฌ ์ฌํญ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํ๋ค.
box-sizing
์์ฑ
box-sizing
์์ฑbox-sizing
์ CSS ์์ฑ ์ค ํ๋๋ก, ์์์ ํฌ๊ธฐ ๊ณ์ฐ ๋ฐฉ์์ ์ง์ ํ๋ ๋ฐ ์ฌ์ฉ๋๋ค. ์ด ์์ฑ์ ์ฃผ๋ก ๋ฐ์ค ๋ชจ๋ธ์ ์ ์ฉ๋๋ฉฐ, ๋ฐ์ค์ ์ ์ฒด ํฌ๊ธฐ ๊ณ์ฐ์ padding๊ณผ border๋ฅผ ํฌํจํ ์ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋ค.
box-sizing
์์ฑ์ ๋ค์ ๋ ๊ฐ์ง ๊ฐ ์ค ํ๋๋ฅผ ๊ฐ์ง ์ ์๋ค:
content-box
(๊ธฐ๋ณธ๊ฐ): ์ด ๊ฐ์ ์์์ ํฌ๊ธฐ ๊ณ์ฐ์ padding๊ณผ border๋ฅผ ํฌํจํ์ง ์๋ค. ์ฆ, ์์์ ํฌ๊ธฐ๋ content ์์ญ๋ง์ ๊ธฐ์ค์ผ๋ก ๊ณ์ฐ๋๋ค. padding๊ณผ border๋ ์์์ ํฌ๊ธฐ์ ์ถ๊ฐ์ ์ผ๋ก ๋ํด์ง์ง ์์ผ๋ฉฐ, ๋ฐ์ค์ ํฌ๊ธฐ๋ content ์์ญ์ ํฌ๊ธฐ์ ๋์ผํ๋ค.
border-box
: ์ด ๊ฐ์ ์์์ ํฌ๊ธฐ ๊ณ์ฐ์ padding๊ณผ border๋ฅผ ํฌํจํ๋ค. ์ฆ, ์์์ ํฌ๊ธฐ๋ content ์์ญ์ padding๊ณผ border๋ฅผ ๋ํ ์ ์ฒด ๋ฐ์ค์ ํฌ๊ธฐ๋ก ๊ณ์ฐ๋๋ค. padding๊ณผ border๋ ์์์ ํฌ๊ธฐ์ ์ด๋ฏธ ํฌํจ๋๋ฏ๋ก, content ์์ญ์ ํฌ๊ธฐ๋ ์์์ ํฌ๊ธฐ์ ๋์ผํ๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ๋๋ถ๋ถ์ ์์๋ box-sizing
๊ฐ content-box
๋ก ์ค์ ๋์ด ์์ง๋ง CSS๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ญ์ ์ผ๋ก ๋๋ ํน์ ์์์ ๋ํด ๋ณ๊ฒฝํ ์ ์๋ค. ์๋ฅผ ๋ค์ด ๋ฒ์ฉ ์ ํ๊ธฐ *๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ์์์ box-sizing: border-box
๋ฅผ ์ค์ ํ ์ ์๋ค
word-break
์์ฑ
word-break
์์ฑword-break ์์ฑ์ CSS์์ ์ฌ์ฉ๋๋ ์์ฑ ์ค ํ๋๋ก, ํ ์คํธ ์ค ๋ด์์ ๋จ์ด์ ์ค ๋ฐ๊ฟ์ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ง๋ฅผ ์ง์ ํ๋ค. ์ด ์์ฑ์ ์ฌ์ฉํ์ฌ ๊ธด ๋จ์ด๊ฐ ํ ์คํธ ์์ญ์ ๋ฒ์ด๋์ง ์๋๋ก ์ ์ดํ๊ฑฐ๋, ๋ค๊ตญ์ด ํ ์คํธ์ ์ค ๋ฐ๊ฟ์ ์ ์ ํ๊ฒ ์ฒ๋ฆฌํ ์ ์๋ค.
word-break ์์ฑ์ ๋ค์๊ณผ ๊ฐ์ ๊ฐ๋ค์ ๊ฐ์ง ์ ์๋ค
normal
(๊ธฐ๋ณธ๊ฐ): ์ด ๊ฐ์ ๋จ์ด์ ์ค ๋ฐ๊ฟ์ ๊ธฐ๋ณธ์ ์ธ ๋์์ ๋ฐ๋ผ ์ฒ๋ฆฌํ๋ค. ๊ธด ๋จ์ด๋ ํ์ํ ๊ฒฝ์ฐ ํ ์คํธ ์์ญ์ ๋ฒ์ด๋๊ฑฐ๋ ์ค์ ๋๋์ด ํ์๋ ์ ์๋ค.
break-all
: ์ด ๊ฐ์ ๋จ์ด๋ฅผ ์ค ๋ฐ๊ฟ์ ๋์์ผ๋ก ๊ฐ์ฃผํ๋ฉฐ, ํ์ํ ๊ฒฝ์ฐ ๋จ์ด ๋ด์์ ์ค ๋ฐ๊ฟ์ ์ํํ๋ค. ๋ฐ๋ผ์ ๊ธด ๋จ์ด๊ฐ ํ ์คํธ ์์ญ์ ๋ฒ์ด๋์ง ์๋๋ก ํ๋ค.
keep-all
: ์ด ๊ฐ์ ์ธ์ด์ ์๋ฏธ ๋จ์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ค ๋ฐ๊ฟ์ ์ํํ๋ค. ํ๊ธ, ์ค๊ตญ์ด, ์ผ๋ณธ์ด ๋ฑ์์๋ ๋จ์ด ์ฌ์ด์์ ์ค ๋ฐ๊ฟ์ ํ์ง ์๊ณ ๋จ์ด ์ ์ฒด๋ฅผ ์ ์งํ๋ค. ์ด ๊ฐ์ ๋ค๊ตญ์ด ํ ์คํธ์์ ์์ฐ์ค๋ฌ์ด ์ค ๋ฐ๊ฟ์ ์ํด ์ฌ์ฉ๋ ์ ์๋ค.
break-word
: ์ด ๊ฐ์ break-all๊ณผ ์ ์ฌํ๊ฒ ๋์ํ์ง๋ง, ๊ธด ๋จ์ด๋ฅผ ์ค ๋ฐ๊ฟํ ๋ ๋จ์ด ๋ด์ ํ์ดํ(-)์ ์ฌ์ฉํ์ฌ ๋จ์ด๋ฅผ ๋ถํ ํ๋ค. ์ด๋ฅผ ํตํด ๋จ์ด์ ์๋ฏธ๊ฐ ์ ์ง๋๋ฉด์๋ ํ์ํ ๊ฒฝ์ฐ ๋จ์ด๋ฅผ ํ ์คํธ ์์ญ์ ๋ง์ถฐ ์ค ๋ฐ๊ฟํ ์ ์๋ค.
Theme
์คํ์ผ ์ปดํฌ๋ํธ์์ "ํ ๋ง"๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์์ธ ์์คํ ๊ณผ ์๊ฐ์ ์คํ์ผ์ ์ ์ํ๋ ๋ณ์ ๋ฐ ๊ฐ์ ์งํฉ์ ์๋ฏธํ๋ค. ํ ๋ง๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์คํ์ผ, ์์, ํ์ดํฌ๊ทธ๋ํผ ๋ฐ ๊ธฐํ ๋์์ธ ๊ด๋ จ ์์ฑ์ ์ค์์์ ๊ด๋ฆฌํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค.
์คํ์ผ ์ปดํฌ๋ํธ์ ํ ๋ง๋ ์ผ๋ฐ์ ์ผ๋ก ํค-๊ฐ ์์ ํฌํจํ๋ ๊ฐ์ฒด๋ก ์ ์๋๋ค. ๊ฐ ํค๋ ํน์ ์คํ์ผ ์์ฑ์ ๋ํ๋ด๋ฉฐ, ํด๋น ๊ฐ์ ํด๋น ์์ฑ์ ๊ฐ์ ๋ํ๋ ๋๋ค.
์์ ์์์ ํ ๋ง ๊ฐ์ฒด์๋ ์์๊ณผ ํ์ดํฌ๊ทธ๋ํผ๋ผ๋ ๋ ๊ฐ์ง ์ฃผ์ ์น์ ์ด ํฌํจ๋์ด ์๋ค. ์์ ์น์ ์ ๊ธฐ๋ณธ, ๋ณด์กฐ ๋ฐ ๋ฐฐ๊ฒฝ ์์์ ์ ์ํ๊ณ ํ์ดํฌ๊ทธ๋ํผ ์น์ ์ fontFamily, fontSize ๋ฐ fontWeight์ ๊ฐ์ ๊ธ๊ผด ๊ด๋ จ ์์ฑ์ ์ ์ํ๋ค.
์คํ์ผ ์ปดํฌ๋ํธ์์ ํ ๋ง๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ค๋ฉด ์คํ์ผ ์ปดํฌ๋ํธ์์ ์ ๊ณตํ๋ ThemeProvider ์ปดํฌ๋ํธ๋ฅผ ํตํด ์ ๋ฌํ ์ ์๋ค. ์ด ์ปดํฌ๋ํธ๋ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ๋๋ ์ ํ๋ฆฌ์ผ์ด์ ํธ๋ฆฌ์ ํน์ ๋ถ๋ถ์ ๋ํํ์ฌ ํด๋น ํธ๋ฆฌ ๋ด์ ๋ชจ๋ ์คํ์ผ ์ปดํฌ๋ํธ๊ฐ ํ ๋ง์ ์ก์ธ์คํ ์ ์๋๋ก ํ๋ค.
ThemeProvider
์ด ์์ ์์ ๋ฒํผ ์ปดํฌ๋ํธ๋ ํ ๋ง์ ์์ ๋ฐ ํ์ดํฌ๊ทธ๋ํผ ์์ฑ์ ์ฌ์ฉํ์ฌ ์คํ์ผ์ด ์ง์ ๋์๋ค. ๊ฐ์ ์คํ์ผ์ด ์ง์ ๋ ์ปดํฌ๋ํธ์ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ๊ตฌ๋ฌธ ๋ด์์ props.theme ๊ตฌ๋ฌธ์ ์ฌ์ฉํ์ฌ ์ก์ธ์คํ๋ค.
์คํ์ผ ์ปดํฌ๋ํธ์์ ํ ๋ง๋ฅผ ํ์ฉํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ผ๊ด๋๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋์์ธ ์์คํ ์ ๋ง๋ค ์ ์๋ค. ํ ๋ง๋ฅผ ์ฌ์ฉํ๋ฉด ํ ๋ง์ ๋ํ ๋ณ๊ฒฝ ์ฌํญ์ด ํด๋น ํ ๋ง ์์ฑ์ ์ฌ์ฉํ๋ ๋ชจ๋ ์คํ์ผ ์ปดํฌ๋ํธ์ ์๋์ผ๋ก ์ ํ๋๋ฏ๋ก ์คํ์ผ์ ์ฝ๊ฒ ์ฌ์ฉ์ ์ ์ํ๊ณ ์ ์ง ๊ด๋ฆฌํ ์ ์๋ค.
์ ๋ฐ์ ์ผ๋ก ์คํ์ผ ์ปดํฌ๋ํธ์ ํ ๋ง๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด์ ์ผ๊ด๋ ์คํ์ผ์ ๊ด๋ฆฌํ๊ณ ์ ์ฉํ ์ ์๋ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ๋์์ธ ์์คํ ์ ์ ์ง ๊ด๋ฆฌ ๋ฐ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ์ฑ์ ๋์ฌ์ค๋๋ค.
Last updated