ํฐ์คํ ๋ฆฌ ๋ถํด๋ฝ ์คํจ ๋ธ๋ ํ ๋ง ๋ณํ ๋ฐ ๋คํฌ๋ชจ๋ ์คํจ ๊ณต์
ํฐ์คํ ๋ฆฌ ๋ถํด๋ฝ ์คํจ์ ์ธ๋ จ๋ ๋ธ๋ ํ ๋ง๋ก ๋ณํํ์ฌ ๋ธ๋ก๊ทธ ๊ฐ๋ ์ฑ์ ๋์ด๋ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ดํฉ๋๋ค. ๋คํฌ๋ชจ๋ CSS ์ฝ๋ ๊ณต์ ๋ถํฐ ์คํจ ํธ์ง ๋ฉ๋ด ํ์ฉ๋ฒ๊น์ง, ๋์ด ํธํ ๋ธ๋ก๊ทธ ๋์์ธ ๊ตฌ์ถ์ ์ํ ํฐ์คํ ๋ฆฌ ์คํจ ์ปค์คํฐ๋ง์ด์ง ๋ ธํ์ฐ๋ฅผ ํ์ธํ์ธ์.
1. ๋ธ๋ก๊ทธ ๋์์ธ์ ์งํ: ์ ๋ธ๋ ํ ๋ง์ธ๊ฐ?
์ต๊ทผ ์น ํธ๋ ๋์์ ๋คํฌ๋ชจ๋๋ ์ ํ์ด ์๋ ํ์ ์์๋ก ์๋ฆฌ ์ก์์ต๋๋ค. ํนํ ํฐ์คํ ๋ฆฌ ๋ถํด๋ฝ ์คํจ์ ํ ์คํธ ์ค์ฌ์ ๋ ์ด์์์ ๊ฐ์ง๊ณ ์์ด, ๋ฐฐ๊ฒฝ์ ๋ธ๋์ผ๋ก ์ ํํ ๊ฒฝ์ฐ ์ฝํ ์ธ ์ง์ค๋๊ฐ ๋น์ฝ์ ์ผ๋ก ์์นํฉ๋๋ค. ์ด๋์ด ๋ฐฐ๊ฒฝ์ ๋์ ํผ๋ก๋ฅผ ๊ฐ์์์ผ ๋ฐฉ๋ฌธ์์ ํ๊ท ์ฒด๋ฅ์๊ฐ(DT)์ ๋๋ฆฌ๋ ๋ฐ ๊ธ์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
๋ธ๋ ํ ๋ง๋ ๋จ์ํ ์์ ๋ณ๊ฒฝ์ ๋์ด ๋ธ๋ก๊ทธ์ ์ ๋ฌธ์ฑ๊ณผ ์ธ๋ จ๋ฏธ๋ฅผ ๋ํด์ค๋๋ค. ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์คํจ ๊พธ๋ฏธ๊ธฐ ๊ธฐ์ ์ ์ตํ๋ฉด ๋๊ตฌ๋ ํด๋ฆญ ๋ช ๋ฒ๋ง์ผ๋ก ๊ฐ์ฑ ์๋ ๋คํฌํ ๋ง ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ ์ ์์ต๋๋ค.
2. ๋ถํด๋ฝ(Book-Club) ์คํจ์ ์ฅ์ ๊ณผ ๋ธ๋ ํ ๋ง ์ ์ฉ ํจ๊ณผ
๋ถํด๋ฝ ์คํจ์ ํฐ์คํ ๋ฆฌ์ ๊ฐ์ฅ ๋ํ์ ์ธ ๋ฐ์ํ ์คํจ์ผ๋ก, ๊ตฌ์กฐ๊ฐ ๋ช ํํ์ฌ CSS ์์ ์ด ์ฉ์ดํฉ๋๋ค. ์๋ ํ๋ ๊ธฐ๋ณธ ํ์ดํธ ํ ๋ง์ ๋ธ๋ ํ ๋ง์ ์ฃผ์ ์ฐจ์ด์ ์ ์์ฝํ ๊ฒ์ ๋๋ค.
| ๋น๊ต ํญ๋ชฉ | ๊ธฐ๋ณธ ํ์ดํธ ํ ๋ง | ์ต์ ํ ๋ธ๋ ํ ๋ง |
|---|---|---|
| ์๊ฐ์ ํผ๋ก๋ | ์ฅ์๊ฐ ๋ ธ์ถ ์ ๋์ด ์ฝ๊ฒ ํผ๋กํจ | ์ ์กฐ๋ ํ๊ฒฝ์์ ๋์ ํธ์ํจ ์ ๊ณต |
| ๋์์ธ ๋ถ์๊ธฐ | ๋ฐ๊ณ ๊น๋ํ ๊ธฐ๋ณธ ๋๋ | ๊ณ ๊ธ์ค๋ฝ๊ณ ์ ๋ฌธ์ ์ธ ๋๋ |
| ์ฝํ ์ธ ๊ฐ๋ ์ฑ | ์ผ๋ฐ์ ์ธ ์น ๋ฌธ์ ๊ฐ๋ ์ฑ | ํ ์คํธ ๋๋น๊ฐ ๊ฐ์กฐ๋์ด ์ง์ค๋ ํฅ์ |
| ๋ฐฐํฐ๋ฆฌ ํจ์จ | ์ผ๋ฐ์ ์์ค | OLED ๋์คํ๋ ์ด ๊ธฐ๊ธฐ์์ ๋ฐฐํฐ๋ฆฌ ์ ์ฝ |
3. ๋คํฌ๋ชจ๋ ์ ์ฉ ๋ถํด๋ฝ CSS ํ์ผ ๊ณต์ ๋ฐ ์ค์น
๋ณต์กํ ์ฝ๋ฉ ์์ด ๋ฐ๋ก ์ ์ฉํ ์ ์๋ ๋ถํด๋ฝ ๋คํฌ๋ชจ๋ ์ ์ฉ CSS ํ์ผ์ ๊ณต์ ํฉ๋๋ค. ์๋ ํ์ผ์ ๋ค์ด๋ก๋ํ์ฌ ์คํจ ํธ์ง ๋ฉ๋ด์ ์ ์ฉํด ๋ณด์ธ์.
3.1 ์คํจ ์ ์ฉ ๋จ๊ณ๋ณ ํ๋ก์ธ์ค
- ํฐ์คํ ๋ฆฌ ๊ด๋ฆฌ ํ์ด์ง ์ ์ ํ ์คํจ ํธ์ง ๋ฉ๋ด๋ฅผ ํด๋ฆญํฉ๋๋ค.
- ์ฐ์ธก ์๋จ์ html ํธ์ง ๋ฒํผ์ ๋๋ฅธ ๋ค CSS ํญ์ผ๋ก ์ด๋ํฉ๋๋ค.
- ๊ธฐ์กด CSS ์ฝ๋๋ฅผ ๋ชจ๋ ์ญ์ ํ๊ฑฐ๋ ๋ฐฑ์ ํ ๋ค, ๊ณต์ ๋ ํ์ผ์ ๋ธ๋ ํ ๋ง ์ฝ๋๋ฅผ ๋ถ์ฌ๋ฃ์ต๋๋ค.
- ์ ์ฅ ๋ฒํผ์ ๋๋ฅด๊ณ ๋ธ๋ก๊ทธ ๋ฉ์ธ ํ๋ฉด์์ ๋ณ๊ฒฝ๋ ๋คํฌ๋ชจ๋ ๋์์ธ์ ํ์ธํฉ๋๋ค.

๋ธ๋ ํ ๋ง ์ธ๋ถ ์ค์ ๋ฐ ๊ณ ๊ธ CSS ํ
๋จ์ํ ๋ฐฐ๊ฒฝ์ ๋ณ๊ฒฝ ์ธ์๋ ๊ฐ๋ ์ฑ ์ข์ ํฐํธ ์์๊ณผ ํ์ดํผ๋งํฌ ๊ฐ์กฐ ์ค์ ์ด ์ค์ํฉ๋๋ค. ์์คํ ์ค์ ์ ๋ฐ๋ผ ์๋์ผ๋ก ๋ณํ๋ ๋ฐ์ํ ๋คํฌ๋ชจ๋๋ฅผ ๊ตฌํํ๋ ค๋ฉด ์๋์ ๊ฐ์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ฝ๋๋ฅผ ํ์ฉํ ์ ์์ต๋๋ค.
/* ์์คํ
์ค์ ์ ๋ฐ์ํ๋ ๋คํฌ๋ชจ๋ ๊ธฐ๋ณธ ๊ตฌ์กฐ */
@media (prefers-color-scheme: dark) {
body { background-color: #222 !important; color: #aaa !important; }
a { color: #eee !important; }
footer, #header { background-color: #333 !important; }
.area_sidebar { background: #333 !important; }
}
์ด ์ฝ๋๋ ์ฌ์ฉ์์ OS๊ฐ ๋คํฌ๋ชจ๋์ผ ๋๋ง ๋ธ๋ก๊ทธ๋ฅผ ๋ธ๋์ผ๋ก ๋ ธ์ถ์ํค๋ฏ๋ก ํจ์ฌ ์ง๋ฅ์ ์ธ ์น ํ๊ฒฝ์ ์ ๊ณตํฉ๋๋ค. ํฐ์คํ ๋ฆฌ ๊ณต์ ์คํจ ๋ฐฉ๋ฒ์์ฐธ๊ณ ํ๋ฉด ๋ณธ๋ฌธ์ ์ ๋ชฉ(h2, h3) ์์๊น์ง ์ธ๋ฐํ๊ฒ ์คํจ ์ต์ ํ๋ฅผ ์งํํ ์ ์์ต๋๋ค.
์ง๋ฌธ 1: ๋ธ๋ ํ ๋ง๋ฅผ ์ ์ฉํ๋ฉด SEO ์ ์๊ฐ ๋จ์ด์ง๋์?
๋ต๋ณ: ์๋์, ์คํ๋ ค ์น ์ ๊ทผ์ฑ์ ์ค์ํ๊ณ ๊ฐ๋ ์ฑ์ ๋์ธ๋ค๋ฉด ์ฌ์ฉ์ ์ฒด๋ฅ์๊ฐ์ด ๋์ด๋ ๊ฒ์ ์์์ ๊ธ์ ์ ์ธ ์ํฅ์ ์ค๋๋ค. ํฐํธ์ ๋ฐฐ๊ฒฝ์ ๋ช ๋ ๋๋น๋ง ์ถฉ๋ถํ ํ๋ณดํ๋ฉด ๋ฉ๋๋ค.
์ง๋ฌธ 2: ๋ชจ๋ฐ์ผ ์ฑ์์๋ ๋ธ๋ ํ ๋ง๊ฐ ์ ์์ ์ผ๋ก ๋ณด์ด๋์?
๋ต๋ณ: ํฐ์คํ ๋ฆฌ ์ฑ ์ ์ฉ ๋ทฐ์ด์์๋ ์ฑ ์ค์ ์ ๋ฐ๋ฅด์ง๋ง, ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ (ํฌ๋กฌ, ์ฌํ๋ฆฌ ๋ฑ)๋ฅผ ํตํด ์ ์ํ ๋๋ ์์ ๋ ๋ฐ์ํ ๋ธ๋ ํ ๋ง๊ฐ ๊ทธ๋๋ก ์ ์ฉ๋ฉ๋๋ค.
์ง๋ฌธ 3: CSS ์์ ํ ์ด๋ฏธ์ง๊ฐ ์ ๋ณด์ผ ๋๋ ์ด๋ป๊ฒ ํ๋์?
๋ต๋ณ: ๋ฐฐ๊ฒฝ์๊ณผ ์ด๋ฏธ์ง์ ๊ฒฝ๊ณ๊ฐ ๋ชจํธํ ๊ฒฝ์ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ด๋ฏธ์ง ํ๊ทธ์ ์ ์ ํ ๋๋ฆฌ(border)๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ๊ทธ๋ฆผ์ ํจ๊ณผ๋ฅผ ์ฃผ๋ฉด ๋คํฌ๋ชจ๋์์๋ ์ด๋ฏธ์ง๋ฅผ ๋๋ ทํ๊ฒ ๊ตฌ๋ถํ ์ ์์ต๋๋ค.
ํฐ์คํ ๋ฆฌ ๋ถํด๋ฝ ์คํจ์ ๋ธ๋ ํ ๋ง๋ก ๋ณํํ๋ ๊ณผ์ ์ ๋ธ๋ก๊ทธ์ ์๋ก์ด ์๋ช ๋ ฅ์ ๋ถ์ด๋ฃ๋ ์์ ์ ๋๋ค. ๋คํฌ๋ชจ๋ CSS ์ ์ฉ์ ์ด๋ณด์๋ ์ฝ๊ฒ ๋ฐ๋ผ ํ ์ ์๋ ๋ธ๋ก๊ทธ ์ปค์คํฐ๋ง์ด์ง์ ์์์ ๋๋ค. ์ค๋ ๊ณต์ ํ ์ ๋ณด๋ฅผ ๋ฐํ์ผ๋ก ์ธ๋ จ๋ ๋์์ธ๊ณผ ํ์ํ ๊ฐ๋ ์ฑ์ ๋ชจ๋ ๊ฐ์ถ ์ต์ ํ ๋ธ๋ก๊ทธ๋ฅผ ์์ฑํด ๋ณด์๊ธฐ ๋ฐ๋๋๋ค.
๋น์ ์ ์ฝํ ์ธ ๊ฐ ๊ฐ์ฅ ๋น๋ ์ ์๋ ์ด๋ , ๋ธ๋ ํ ๋ง๋ก ๋ธ๋ก๊ทธ์ ๊ฐ์น๋ฅผ ๋์ด์ธ์.