๐ง ๋คํฌ๋ชจ๋์์ ๊น๋ฐํ๋ ๊ฒ
์ต๊ทผ ์น ๊ฐ๋ฐ์ ํ์ํ ์ค ํ๋๋ ๋คํฌ๋ชจ๋๋ค.
์ฌ๋ฌ๊ฐ์ง ์น/์ฑ์ ์ฌ์ฉํ๋ฉด์ ๋คํฌ๋ชจ๋๊ฐ ์ง์๋์ง ์๋ ์๋น์ค๋ฅผ ์ฐพ์๋ณด๊ธฐ ๋๋ฌผ์๋ค.
๋คํฌ๋ชจ๋๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์๋ ์ฌ๋ฌ๊ฐ์ง ๊ธฐ์ ์ด ์์ง๋ง ๊ณตํต์ ์ด ์๋ค.
๋ชจ๋ ์ปฌ๋ฌ๋ฅผ ์๋์ผ๋ก ์์ฑํด์ผ ํ๋ค๋ ์ ์ด๋ค.
div, Button, Input, Textarea ๋ฑ๋ฑ ๋์๋ณด์ด๋ ๋ชจ๋ ๋ถ๋ถ์ ์์์ด ์ฌ์ ์ ๋์ด์ผ ํ๋ค.
๊ทธ๋ฌ๋ค๋ณด๋ ๋์น๊ธฐ ์ฌ์ด ๋ถ๋ถ์ด ์๋๋ฐ ๋ฐ๋ก ์คํฌ๋กค๋ฐ๋ค.
๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ณธ css๊ฐ ์ ์๋์ด ์๋ ํญ๋ชฉ์ด ์ฌ๋ฟ ์์ง๋ง ๊ฐ์ฅ ๋ํ์ ์ธ ๋ถ๋ถ์ Input, Button, ์คํฌ๋กค ๋ฐ ์์ญ์ด๋ค.
์ด ์น๊ตฌ๋ค์ ๋ธ๋ผ์ฐ์ ๋ง๋ค ๋ณด์ด๋ ์คํ์ผ์ด ๋ค๋ฅด๋ค.
๊ทธ๋๋ ๋๋ถ๋ถ์ ์๋น์ค์์ input๊ณผ button์ ์คํ์ผ ์์๋ก ์ทจ๊ธํด ๋์์ธ์ ๋ณ๊ฒฝํ์ฌ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๋์ผํ๊ฒ ๋ณด์ด๋๋ก ์์ ํ๋ ๊ฒฝํฅ์ด ์์ง๋ง ์ ๋ํ ์คํฌ๋กค๋ฐ๋ ๋์์ธํ์ง ์๊ณ ๊ธฐ๋ณธ ์คํ์ผ์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ํํ๋ค.
๊ทธ๋ฌ๋ค๋ณด๋ ๋คํฌ๋ชจ๋์์๋ ๊ฐ๊ณผํ์ฌ ๋์์ธ(์์)์ด ๋ณํ์ง ์๋๋ค.
๊ทธ๋ ๋ค๋ฉด ์ด๋ป๊ฒ ํด์ผ ํ ๊น?
์คํฌ๋กค๋ฐ๊น์ง๋ ๋์์ธํด์ ์ ์ฉํด์ผ ํ๋๊ฑธ๊น?
๊ทธ์น๋ง ๊ทธ๋ ๊ฒ๊น์ง ํ๊ธด ๊ท์ฐฎ๋ค ๐คฃ
(์คํฌ๋กค๋ฐ๋ฅผ ์คํ์ผ๋งํ๋ ค๋ฉด ์์ฌ์ ํ์๋ก ๋ก์น ํด์ผ ํ๋ค!)
๐คซ ๋ฐฉ๋ฒ์ด ์๋ค.
๋ฐ๋ก color-scheme๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
์ด ์น๊ตฌ๋ฅผ dark light๋ก ์ง์ ํ๋ฉด ๋ธ๋ผ์ฐ์ ์๊ฒ ๋คํฌ๋ชจ๋์ ๋ผ์ดํธ๋ชจ๋๋ฅผ ๋ชจ๋ ํ๋ค๊ณ ์๋ ค์ฃผ๊ฒ ๋๋ค.
๊ทธ๋ฌ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์์์ Form ์ปจํธ๋กค๊ณผ ์คํฌ๋กค๋ฐ ์์ญ์ ์์์ ๋ฐ๊ฟ์ค๋ค.
๋ฌธ์ ์ ์ฒด์ ์ ์ฉํ๋ ค๋ฉด meta ํ๊ทธ๋ฅผ ์ฌ์ฉํด๋ ๋๊ณ , CSS๋ก ๊ฐ์ ๋ฃ์ด๋ ๋๋ค.
<meta name="color-scheme" content="light dark">
<!-- ↑ light dark ๋ ๊ฐ์ ๋ชจ๋ ๋ฃ์ผ๋ฉด ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ์ค์ ์ ๋ฐ๋ผ ์๋์ผ๋ก ๋ณ๊ฒฝ๋๋ค -->
:root {
color-scheme: dark light;
/* ↑ light dark ๋ ๊ฐ์ ๋ชจ๋ ๋ฃ์ผ๋ฉด ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ์ค์ ์ ๋ฐ๋ผ ์๋์ผ๋ก ๋ณ๊ฒฝ๋๋ค */
}
meta ํ๊ทธ๋ก ๊ฐ์ ์ง์ ํ๋ฉด css๋ฅผ ๋ก๋ํ๊ธฐ ์ ์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ ค์ค ์ ์๋ค๋ ์ฅ์ ์ด ์๋ค.
ํ์ง๋ง CSS๋ก ๋ฃ๋๋ค๋ฉด ๊ฐ๋ณ์ ์ผ๋ก ์ปจํธ๋กค ํ ์ ์๋ค๋ ์ฅ์ ์ด ์๋ค.
๋ง์ ์ฌ์ดํธ์์ ๋คํฌ๋ชจ๋๋ฅผ ๊ตฌํํ ๋ ๊ธฐ๋ณธ ์ค์ ๊ณผ ๋ณ๊ฐ๋ก ๋ชจ๋๋ฅผ ๋ฐ๊ฟ ์ ์๊ฒ ํ๊ธฐ ์ํด์ body์ dark ๊ฐ์ ์์์ ํด๋์ค๋ฅผ ๋ฃ๊ณ ๊ทธ ํด๋์ค ํ์๋ก ์์์ ์ง์ ํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค.
์ด๋ด๋๋ has ์ ํ์๋ฅผ ์ด์ฉํด์ CSS๋ก ์ปจํธ๋กคํ๋๊ฒ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฌ์ค ์ ์๋ค.
:root:has(body.light) {
color-scheme: light;
}
:root:has(body.dark) {
color-scheme: dark;
}
:root:has(body.lightdark) {
color-scheme: light dark;
}
โ ์ฐธ๊ณ
https://bejamas.io/blog/modern-css-properties-your-website-must-have/
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
'๊ฐ๋ฐ > Frontend' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Vue] pinia store๋ก ํ ๋ง ๊ด๋ฆฌํ๊ธฐ (0) | 2024.04.28 |
---|---|
JavaScript๋ก ์๋์ฐ ํ์๊ธฐ์ฒ๋ผ ์ ๋ ฌํ๊ธฐ (1) | 2019.10.16 |