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 ์คํ์ผ๋ก ์ฝ๋ ๋ธ๋ญ ์์
์ฐธ๊ณ ํ๋๋ฐ.. ๋ญ๊ฐ ์คํจ(?)
[ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ํ ๋ง] - 1. ์ฝ๋ ๋ธ๋ก ๋์์ธ์ mac ์ฝ๋ ์คํ์ผ๋ก ๋ฐ๊พธ๊ธฐ
๊ธ์ ์ฝ๊ธฐ ์ ๋ฏธ๋ฆฌ ๋ณด๋ ์์ฑ๋ณธ์ ๋ค์๊ณผ ๊ฐ๋ค. ์ด๋ป๊ฒ ๋ง๋ค์๊ณ ์ ์ฉํ๋์ง ๊ถ๊ธํ์ ๋ถ๋ค์ ์๋๋ก ์คํฌ๋กค! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. ๋ฐ๋จ ์ฌ๋ ๋ ๊ณผ ๋ค๋ฆ์์ด ํ์ฌ
guiyomi.tistory.com
์ํํ ๊ฒ
- js ํ์ผ ์ถ๊ฐ
- css์ ์ฝ๋ ์ถ๊ฐ
- html์ body ํ๊ทธ ํ๋จ์ <script></script> js ํ์ผ ์ฐ๊ฒฐ ์ฝ๋ ์ถ๊ฐ
๋ฐฐ๊ฒฝ์ ๊ฒ์์์ผ๋ก ํ๊ณ ์ถ์๋๋ฐ.. ์ฐ์ ์ฌ๊ธฐ๊น์ง~!
Reference
[Tistory] hELLO ์คํจ ํฐํธ ๋ฐ๊พธ๊ธฐ(๋ชจ๋ฐ์ผ ํฌํจ) โ
๊ธฐ๋ณธ์ผ๋ก ์ค์ ๋ ๋ธ๋ก๊ทธ ํฐํธ๊ฐ ๋ง์ ์๋ค์ด์ ๋ฐ๊ฟ๋ณด์๋ค. ๋ฐฉ๋ฒ์ ๊ฐ๋จํ์ง๋ง ์กฐ๊ธ ๊ท์ฐฎ์ ์์ ์ด์๋ค..ใ ๐ ์์ ๋ฐ๊พธ๊ณ ์ถ์ ํฐํธ ๋ค์ด๋ฐ๊ธฐ ๋ธ๋ก๊ทธ ์ด๋๋ฏผ ์ฌ์ดํธ -> ์ฌ์ด๋๋ฐ ๋ฉ๋ด์์ ์ค
easyhomputer.tistory.com
[ํฐ์คํ ๋ฆฌ ๊พธ๋ฏธ๊ธฐ] ํฐ์คํ ๋ฆฌ ๊ธ๊ผด ๋ฐ๊พธ๊ธฐ ๋ฐ ๊ธ๊ผด ์ถ์ฒ ( ๋ด๊ฐ ์ํ๋ ๊ตต๊ธฐ๋ก ๊ธฐ๋ณธ์ธํ ํ๊ธฐ )
[ํฐ์คํ ๋ฆฌ ๊พธ๋ฏธ๊ธฐ] ํฐ์คํ ๋ฆฌ ๊ธ๊ผด ๋ฐ๊พธ๊ธฐ ๋ฐ ๊ธ๊ผด ์ถ์ฒ( ๋ด๊ฐ ์ํ๋ ๊ตต๊ธฐ๋ก ๊ธฐ๋ณธ์ธํ ํ๊ธฐ ) ๋ค์ด๋ฒ ๋ธ๋ก๊ทธ๋ฅผ ์ฌ์ฉํ๋ค๊ฐ ํฐ์คํ ๋ฆฌ๋ฅผ ๋์ด์ค๋ ํ๋๋ถํฐ ์ด๊น์ง ๋ชจ๋ ๊ฒ์ ๋ด๊ฐ ์ธํ ํด์ผ ๋๋ค๋
wodudgha.tistory.com
2021.11.21 - hELLO. ์คํจ ๋ณ๊ฒฝ
๊ธฐ์กด์ ์คํจ์ด ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋ ๊ฒ ๊ฐ์ ์คํจ์ ๋ณ๊ฒฝํ๋ ค๊ณ ํ๋ค.๊ธฐ๋ณธ์ผ๋ก ์ฃผ๋ ์คํจ์ ๋ง ๋ณ๊ฒฝํด๋ณด๋ค๊ฐ ๋ง์์ ๋๋ ๊ฒ์ด ์์ด ๊ทธ๋ฅ ์๋ ์ฐ๋ ์คํจ์ ์ฌ์ฉํ๋ ค๊ณ ํ๋ค. ๊ทผ๋ฐ ๋ธ๋ก๊ทธ ์ฒ์์
happybplus.tistory.com
[ํฐ์คํ ๋ฆฌ] ๋ณธ๋ฌธ ํญ์ ๋ฒ์ด๋๋ ์ด๋ฏธ์ง ๋ฌธ์ ํด๊ฒฐ ( ์์ )
ํด๋น๊ธ์ hello ์คํจ์ ๊ธฐ์ค์ผ๋ก ์์ฑ๋์์ต๋๋ค. ์๋ก ๋ธ๋ก๊ทธ์ ์คํจ์ ๋ฐ๊พธ๋ฉด ํฌ์คํธ์ ์ด๋ฏธ์ง์ ๋ณธ๋ฌธ ํญ์ด ์ ๋ง๋ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. ์ด๋ฐ ์์ผ๋ก ์ด๋ฏธ์ง๊ฐ ๋ณธ๋ฌธํญ์ ๋ฒ์ด๋ ๋ ํฌ๊ฒ ๋์์
naado.tistory.com
[ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ํ ๋ง] - 1. ์ฝ๋ ๋ธ๋ก ๋์์ธ์ mac ์ฝ๋ ์คํ์ผ๋ก ๋ฐ๊พธ๊ธฐ
๊ธ์ ์ฝ๊ธฐ ์ ๋ฏธ๋ฆฌ ๋ณด๋ ์์ฑ๋ณธ์ ๋ค์๊ณผ ๊ฐ๋ค. ์ด๋ป๊ฒ ๋ง๋ค์๊ณ ์ ์ฉํ๋์ง ๊ถ๊ธํ์ ๋ถ๋ค์ ์๋๋ก ์คํฌ๋กค! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. ๋ฐ๋จ ์ฌ๋ ๋ ๊ณผ ๋ค๋ฆ์์ด ํ์ฌ
guiyomi.tistory.com
'๊ธฐํ > ๊ฟTip' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Tistory] ํฐ์คํ ๋ฆฌ ์คํจ hELLO!! ํฐํธ ์์ , ๊ตต๊ธฐ ๋ณ๊ฒฝ (2) (0) | 2024.06.13 |
|---|---|
| [๊ฐ์] ๊ฐ๋ฐ์๊ฐ ์์์ผํ ์ฉ์ด (0) | 2024.06.12 |
| [Python] ์ด์ฌ์ ์ํ ์ฌ์ดํธ (๋ฌธ๋ฒ๋ง ์์๋ ์ฌ์ด ์ฝ๋ฉ) (0) | 2022.07.27 |
