hELLO ์คํจ์ ๊ฐ์ฌํ ์ฌ์ฉํ๊ณ ์์ง๋ง, ๋์ฑ ๋ด๊ฐ ์ํ๋ ์คํ์ผ๋ก ์กฐ๊ธ ๋ณ๊ฒฝํด๋ณด๊ณ ์ ํ๋ค.
1. ๋คํฌ๋ชจ๋ ์ ๊ฑฐ
๋คํฌ๋ชจ๋๋ฅผ ์ ๊ฑฐํ๊ณ ์ถ์ง ์์์ง๋ง...
ํ ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ๊ณ ํ ๋ ๋ณต์ฌ+๋ถ์ฌ๋ฃ๊ธฐ๋ฅผ ํ ๊ฒฝ์ฐ๊ฐ ์๋ค. ์ด๋ ๋ฐฐ๊ฒฝ์ด ํฐ์/๊ฒ์์ ์ผ๋ก ๊ฐ์ด ๋ถ์ฌ๋ฃ๊ธฐ๋๊ณ ์์ ์ด ์ ๋๋ ๊ฒฝ์ฐ๊ฐ ์๋ค.
๊ทธ๋์ ๋คํฌ๋ชจ๋๋ฅผ ์ ๊ฑฐํ๊ธฐ๋ก ํ๋ค. ๋ผ์ดํธ ๋ชจ๋๋ก๋ง ๊ฐ๋ฅํ๋๋ก ํ๋ค.
(html ํ์ผ์์ ๋คํฌ๋ชจ๋ ๋ฒํผ ๋ถ๋ถ์ ์ฃผ์์ฒ๋ฆฌํด๋ ๋๋ค.)
# 1. html ํ์ผ ์๋จ์ <script> ๋ธ๋ก์์ ๋คํฌ๋ชจ๋ ๊ด๋ จ ์คํฌ๋ฆฝํธ๋ฅผ ์ญ์ ํฉ๋๋ค.
<script>
if (!('TTDARK' in localStorage)) {
localStorage.TTDARK = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Y' : 'N'
}
window.TTDARK = localStorage.TTDARK === 'Y'
document.documentElement.classList.toggle('dark', TTDARK)
</script>
# 2. ๊ทธ๋ฆฌ๊ณ <body> ํ๊ทธ ๋ด๋ถ์์ ๋คํฌ๋ชจ๋ ๊ด๋ จ ํด๋์ค๋ฅผ ์ ๊ฑฐํฉ๋๋ค.
<body class="min-w-xs overflow-x-hidden bg-h-100 text-h-900 dark:bg-h-800 dark:text-h-200" id="tt-body-page">
# 3. ์์ ์ฝ๋๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ๋ณ๊ฒฝํฉ๋๋ค.
<body class="min-w-xs overflow-x-hidden bg-h-100 text-h-900" id="tt-body-page">
2. ๋ณธ๋ฌธ ํญ์ ์ด๋ฏธ์ง ๋ง์ถ๊ธฐ
๋ณธ๋ฌธ ํญ์ ์ด๋ฏธ์ง๊ฐ ๋ฒ์ด๋์ ๊ฑฐ์ฌ๋ ธ๋ค.
์ด๋ฅผ ์์ ํ๋ค.
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
๋ณ๊ฒฝ ํ, ๋ณธ๋ฌธ ํญ๊ณผ ์ด๋ฏธ์ง ํฌ๊ธฐ๊ฐ ์ผ์นํ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
3. Mac ์คํ์ผ๋ก ์ฝ๋ ๋ธ๋ญ ์์
์ฐธ๊ณ ํ๋๋ฐ.. ๋ญ๊ฐ ์คํจ(?)
์ํํ ๊ฒ
- js ํ์ผ ์ถ๊ฐ
- css์ ์ฝ๋ ์ถ๊ฐ
- html์ body ํ๊ทธ ํ๋จ์ <script></script> js ํ์ผ ์ฐ๊ฒฐ ์ฝ๋ ์ถ๊ฐ
๋ฐฐ๊ฒฝ์ ๊ฒ์์์ผ๋ก ํ๊ณ ์ถ์๋๋ฐ.. ์ฐ์ ์ฌ๊ธฐ๊น์ง~!
Reference
'๊ธฐํ > ๊ฟTip' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Tistory] ํฐ์คํ ๋ฆฌ ์คํจ hELLO!! ํฐํธ ์์ , ๊ตต๊ธฐ ๋ณ๊ฒฝ (2) (0) | 2024.06.13 |
---|---|
[๊ฐ์] ๊ฐ๋ฐ์๊ฐ ์์์ผํ ์ฉ์ด (0) | 2024.06.12 |
[Python] ์ด์ฌ์ ์ํ ์ฌ์ดํธ (๋ฌธ๋ฒ๋ง ์์๋ ์ฌ์ด ์ฝ๋ฉ) (0) | 2022.07.27 |