๐ช Programming
[HTML/CSS] width ์์ฑ ์๋ ๋งค์ปค๋์ฆ
[HTML/CSS] width ์์ฑ ์๋ ๋งค์ปค๋์ฆ
2024.05.05์๋ฆฌ๋จผํธ์ ๋๋น๋ฅผ ์ ์ดํ๊ธฐ ์ํด CSS์ width ์์ฑ์ ์ฌ์ฉํ๋ค. ํ์์ ์์ฃผ ์ฌ์ฉํ๋ ์์ฑ์ด์ง๋ง ์ข
์ข
์๊ฐํ๋๋ก ์๋ํ์ง ์์ ๋๊ฐ ์๋ค. width๋ โ์ ๋๊ฐ โ์๋๊ฐ โํค์๋ ํฌ๊ฒ 3๊ฐ์ง ์ค์ ์ผ๋ก ๊ตฌ๋ถ๋๋ฉฐ, ๊ฐ ์ค์ ์ ๋ฐ๋ผ ๋๋น๊ฐ ๋ค๋ฅด๊ฒ ๊ฒฐ์ ๋๋ค. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ์ ๋๊ฐsection { width: 200px; height: 200px; border: 1px solid gray;} /* ๋ถ๋ชจ */p { width: 300px; background: Khaki; mar..
[TS] ํ์
์คํฌ๋ฆฝํธ ๋งต๋ ํ์
/ ์ ํธ๋ฆฌํฐ ํ์
/ Enum
[TS] ํ์ ์คํฌ๋ฆฝํธ ๋งต๋ ํ์ / ์ ํธ๋ฆฌํฐ ํ์ / Enum
2024.05.05ํ์
์คํฌ๋ฆฝํธ์ ๋งต๋ ํ์
(Mapped Types)์ ๊ธฐ์กด ํ์
์ ์๋ก์ด ํ์
์ผ๋ก ๋ณํํด์ฃผ๋ ๋ฌธ๋ฒ์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ map ๋ฐฐ์ด ๋ฉ์๋๋ฅผ ํ์
์ ์ ์ฉํ ๊ฒ๊ณผ ๋น์ทํ๋ค(๊ทธ๋์ ์ด๋ฆ์ด Mapped Types๋ค). ๋งต๋ ํ์
๊ฐ๋
ํบ์๋ณด๊ธฐ์๋ ๋๋ฐ์ด์ค ๋ธ๋๋๋ฅผ ๋ํ๋ด๋ ์ ๋์จ ํ์
Devices๊ฐ ์๋ค. ์ฌ๊ธฐ์ ๊ฐ ๋๋ฐ์ด์ค ๋ธ๋๋์ ๊ฐ๊ฒฉ ์ ๋ณด๊ฐ ํฌํจ๋ ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ ๋งต๋ ํ์
์ ํ์ฉํ ์ ์๋ค.type Devices = 'APPLE' | 'OPPO' | 'XIAOMI'; // ๋๋ฐ์ด์ค ๋ธ๋๋๋ฅผ ๋ํ๋ด๋ ์ ๋์จ ํ์
type DevicePrices = { [P in Devices]: number }; // ๋๋ฐ์ด์ค ๋ธ๋๋ ํ์
์ ์ํํด์ key๋ก ์ ์๋๋ ๋งต๋ ํ์
const deviceInfo: Devi..
[TS] ํ์
์คํฌ๋ฆฝํธ - ํ์
ํธํ
[TS] ํ์ ์คํฌ๋ฆฝํธ - ํ์ ํธํ
2024.05.04ํ์
ํธํ Type Compatibility๐ก ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด ๋ฆฌํฐ๋ด์ด๋ ์ต๋ช
ํจ์ ๋ฑ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋ช
์์ ์ผ๋ก ํ์
์ ์ง์ ํ๋ ๊ฒ๋ณด๋ค ์ฝ๋์ ๊ตฌ์กฐ ๊ด์ ์์ ํ์
์ ์ง์ ํ๋๊ฒ ๋ ์ ์ด์ธ๋ฆด ์๋ ์๋ค. ํ์
์คํฌ๋ฆฝํธ์์ ๋ค๋ฅธ ํ์
๊ฐ์ ํธํ ์ฌ๋ถ๋ฅผ ์ ๊ฒํ๋ ๊ฒ์ ํ์
ํธํ์ด๋ผ๊ณ ํ๋ค. ์๋ Avengers ํด๋์ค๋ Ironman ์ธํฐํ์ด์ค๋ฅผ ์์๋ฐ์ ๊ตฌํํ ๊ฒ ์๋๋ฐ๋ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๋๋ค. ํ์
์คํฌ๋ฆฝํธ์์ ํ์
์ ์ ์๋์ด ์๋ ์์ฑ์ ํ์
์ ๊ฐ์ง๊ณ ์ฝ๋๊ฐ ํธํ๋๋์ง ํ์ธํ๊ธฐ ๋๋ฌธ์ด๋ค.interface Ironman { name: string;}class Avengers { name: string;}let ironMan: Ironman;ironMan = new Avengers(); // ok..
[DevTools] ์ธ๋ถ์์ ๋ก์ปฌ ์๋ฒ ์ ์ํ๊ธฐ — ngrok
[DevTools] ์ธ๋ถ์์ ๋ก์ปฌ ์๋ฒ ์ ์ํ๊ธฐ — ngrok
2024.05.04๋ก์ปฌ ์๋ฒ๋ฅผ ๋์๋๊ณ ์์
์ค์ธ ๋ด์ฉ์ด ์ธ๋ถ ๋คํธ์ํฌ์์ ์ด๋ป๊ฒ ์๋ํ๋์ง ํ
์คํธํ๊ณ ์ถ์ ๋๊ฐ ์๋ค. ์ธ๋ถ์์ ์ ์ํ๋ ค๋ฉด ๋ก์ปฌ ์๋ฒ์์ ์ฌ์ฉํ๋ ํฌํธ๋ฅผ(3000, 8080 ๋ฑ...) ์ด์ด์ผ ๋๋๋ฐ ๋ณด์์ ์ข์ง ์๊ณ , AWS์ ์ฌ๋ฆฌ์๋ ๋ฒ๊ฑฐ๋กญ๋ค. ์ด๋ ngrok๋ผ๋ ์๋น์ค๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ngrok๋ ๋ฐฉํ๋ฒฝ ๋ท๋จ์ ์๋ ๋ก์ปฌ ์๋ฒ๋ฅผ ๋ณด์ ํฐ๋์ ํตํด ๊ณต์ฉ ์ธํฐ๋ท์ ๋
ธ์ถ๋๋๋ก ํด์ค๋ค. Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels. ์คํ ๋ฐฉ๋ฒโถ ngrok ํ์๊ฐ์
๋ฐ Authtoken ๋ณต์ฌ(๋์๋ณด๋ ์ข์ธก Getting Started → Your Authtoken) โท ngrok ์ค..
[React] Blur ํจ๊ณผ๋ฅผ ํ์ฉํ ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ Image Lazy Loading
[React] Blur ํจ๊ณผ๋ฅผ ํ์ฉํ ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ Image Lazy Loading
2024.05.04์นํ์ด์ง์์ ์ฑ๋ฅ์ ์ํฅ์ ๊ฐ์ฅ ๋ง์ด ์ฃผ๋ ๋ถ๋ถ์ด ์ด๋ฏธ์ง / ๋น๋์ค ๊ฐ์ ๋ฏธ๋์ด ์์๋ค. ํนํ ์ด๋ฏธ์ง๋ ๋ฐฐ๋, ์ ํ ์ฌ์ง, ๋ก๊ณ ๋ฑ ํ์ด์ง ๊ตฌ์๊ตฌ์์์ ์ฌ์ฉํ๋ค. HTTP Archive Data์ ๋ฐ๋ฅด๋ฉด ์ ์ฒด ์นํ์ด์ง ์ฉ๋์ 45%๋ฅผ ์ด๋ฏธ์ง๊ฐ ์ฐจ์งํ๋ค๊ณ ํ๋ค. ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ง ์๋๊ฑด ๋ถ๊ฐ๋ฅํ์ง๋ง, ํ๋ฉด์ ๋
ธ์ถ๋ ๋๋ง ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ผ๋ก ํ์ด์ง ๋ก๋ฉ ์๊ฐ์ ๋จ์ถ์ํฌ ์ ์๋ค. ์ด๋ฐ ๋ฐฉ์์ Lazy Loading์ด๋ผ๊ณ ํ๋ค. Lazy Loading ๊ตฌํ ๋ฐฉ๋ฒ๐ก Lazy Loading์ด ์ ์ฉ๋ ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ์ ๊ทผ์ ํด์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ๋ฉด ์ฝํ
์ธ ๊ฐ ๋ฐ๋ ค๋๋ ํ์์ด ๋ฐ์ํ๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๋ ค๋ฉด ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ธ๋ ์ปจํ
์ด๋ ์์์ ๋์ด / ๋๋น๋ฅผ ์ง์ ํ๋ฉด ๋๋ค. Lazy Loading์ ํฌ๊ฒ Chrome Na..
[React] ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฌดํ ์คํฌ๋กค Infinite Scroll
[React] ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฌดํ ์คํฌ๋กค Infinite Scroll
2024.05.041) ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ ๋ฐฉ๋ฒ๋ฌดํ ์คํฌ๋กค์ ํ์ฌ ํ์ด์ง์์ ์คํฌ๋กค๋ฐ๊ฐ ๋ง์ง๋ง ์ฝํ
์ธ ์ง์ ์ ์์ ๋ ๋ค์ ์ฝํ
์ธ ๋ฅผ ์๋์ผ๋ก ๋ถ๋ฌ์ค๋ ๊ตฌํ ๋ฐฉ์์ ๋งํ๋ค. โ์คํฌ๋กคํด์ ๊ฐ๋ ค์ง ์์ญ์ ๋์ด์ โํ์ฌ ํ๋ฉด(๋ทฐํฌํธ)์ ๋์ด๋ฅผ ๋ํ ๊ฐ์ด โ์ ์ฒด ๋ฌธ์์ ๋์ด์ ๊ฐ๋ค๋ฉด ํ์ฌ ์คํฌ๋กค์ด ๊ฐ์ฅ ํ๋จ ๋์ ๋๋ฌํ๋ค๋ ๊ฑธ ์ ์ ์๋ค. ์์์ผ ํ ๊ธฐํ ํ๋กํผํฐ โถ ์คํฌ๋กคํด์ ๊ฐ๋ ค์ง ์ฝํ
์ธ ์์ญ์ ๋์ด : document.documentElement.scrollTop โท ํ์ฌ ํ๋ฉด(๋ทฐํฌํธ)์ ๋์ดwindow.innerHeight : ์คํฌ๋กค๋ฐ ํฌํจdocument.documentElement.clientHeight : ์คํฌ๋กค๋ฐ ์ ์ธ โธ ์ ์ฒด ๋ฌธ์์ ๋์ด// ๋ฌธ์์ ์ ํํ ์ ์ฒด ๋์ด๋ฅผ ๊ตฌํ๊ธฐ ์ํ ์ฝ๋const scrollHei..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ํ๊ฐ ์์์ ๊ฒฐํฉ์ฑ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ํ๊ฐ ์์์ ๊ฒฐํฉ์ฑ
2024.05.03ํํ์์ ํ๊ฐ ์์let foo = { n: 1 };let bar = foo; // foo ๊ฐ์ฒด์ ์ฐธ์กฐ ์ฃผ์๊ฐ bar ๋ณ์์ ํ ๋น๋จfoo.x = foo = { n: 2 }; // ๊ฐ์ ๋ฐํํ๋ ํ ๋น ์ฐ์ฐ์console.log(foo.x); // ? ์ ๋ฌธ์ ๋ฅผ ์ผํ๋ณด๋ฉด foo.x์ ๊ฒฐ๊ณผ๋ { n: 2 }์ผ ๊ฒ ๊ฐ์ง๋ง ์๋๋ค. foo.x๋ undefined๋ฅผ ์ถ๋ ฅํ๋ค. ์ ์ฝ๋์ ์ฐ์ฐ ๊ณผ์ ์ ํ๋ํ๋ ํ์ด๋ณด๋ฉด ์๋์ ๊ฐ๋ค. ์ผ์ชฝ ํํ์ ํ๊ฐ์ฐ์ธก ํํ์์ด ํ๊ฐํ ๊ฐ์ด ํ ๋น๋ ๊ณณ์ ๊ฒฐ์ ํ๊ธฐ ์ํด foo.x๊ฐ ํ์ฌ ์ฐธ์กฐํ๋ ๊ฐ์ฒด { n: 1 } ํ์ธ์ค๋ฅธ์ชฝ ํํ์ ํ๊ฐํ ๋น๋ ๊ณณ์ ๊ฒฐ์ ํ๊ธฐ ์ํด foo ๋ณ์๊ฐ ํ์ฌ ์ฐธ์กฐํ๋ ๊ฐ์ฒด { n: 1 } ํ์ธ์๋ก์ด ๊ฐ์ฒด { n: 2 }๊ฐ foo ๋ณ์์ ํ ๋น๋๊ณ ํด๋น ๊ฐ์ฒด ๋ฐํ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ ์ดํฐ Generator ์ด ์ ๋ฆฌ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ ์ดํฐ Generator ์ด ์ ๋ฆฌ
2024.05.03์ ๋๋ ์ดํฐ๋ ES6์ ๋์
๋ ํน์ํ ํจ์๋ค. ํจ์ ํธ์ถ์๊ฐ ํจ์ ์คํ์ ์ ์ดํ ์ ์๊ณ , ํจ์ ํธ์ถ์์ ํจ์ ์ํ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์๋ ์๋ค. ์ด๋ฐ ํน์ง ๋๋ฌธ์ ์ ๋๋ ์ดํฐ ํจ์์์ ์ฝ๋ ๋ธ๋ก์ ์คํ์ ์ ์ ๋ฉ์ท๋ค๊ฐ ํ์ํ ์์ ์ ์ฌ๊ฐํ ์ ์๋ค. ์ผ๋ฐ ํจ์๋ 0~1๊ฐ ๊ฐ๋ง ๋ฐํํ ์ ์์ง๋ง, ์ ๋๋ ์ดํฐ ํจ์๋ ์ฌ๋ฌ๊ฐ์ ๊ฐ์ ํ์์ ๋ฐ๋ผ ํ๋์ฉ ๋ฐํํ ์ ์๋ค. ์ ๋๋ ์ดํฐ ํจ์์ ํน์งํจ์ ํธ์ถ์์๊ฒ ํจ์ ์คํ์ ์ ์ด๊ถ์ ์๋(yield)ํ ์ ์๋ค์ผ๋ฐ ํจ์ : ํจ์ ํธ์ถ์(caller)๋ ํจ์๋ฅผ ํธ์ถํ ์ดํ ํจ์ ์คํ์ ์ ์ดํ ์ ์๋ค.์ ๋๋ ์ดํฐ ํจ์ : ํจ์ ํธ์ถ์๊ฐ ํจ์ ์คํ์ ์ ์ดํ ์ ์๋ค(ํจ์ ์คํ ์ผ์ ์ ์ง / ์ฌ๊ฐ)ํจ์ ํธ์ถ์์ ํจ์ ์ํ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ค์ผ๋ฐ ํจ์ : ๋งค๊ฐ๋ณ์๋ฅผ ํตํด ๊ฐ์ ์ ๋ฌ๋ฐ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ดํฐ๋ฌ๋ธ Iterable ์ด ์ ๋ฆฌ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ดํฐ๋ฌ๋ธ Iterable ์ด ์ ๋ฆฌ
2024.05.03TL;DR โญ๏ธSymbol.iterator ๋ฉ์๋๊ฐ ๊ตฌํ๋์ด ์๋ ๊ฐ์ฒด๋ฅผ ์ดํฐ๋ฌ๋ธ(iterable)์ด๋ผ๊ณ ํ๋ค. ๊ฐ๋จํ ๋งํ๋ฉด ์ดํฐ๋ฌ๋ธ์ ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๋ค. ๋ฐฐ์ด, ๋ฌธ์์ด์ Symbol.iterator ๋ฉ์๋๊ฐ ์ด๋ฏธ ๊ตฌํ๋์ด ์๋ ๋ํ์ ์ธ ๋ด์ฅ ์ดํฐ๋ฌ๋ธ์ด๋ค. ์ดํฐ๋ฌ๋ธ์ ์ฌ์ฉํ๋ฉด ์ด๋ค ๊ฐ์ฒด๋ โfor of ๋ฐ๋ณต๋ฌธ โ์ ๊ฐ ๋ฌธ๋ฒ โ๋ฐฐ์ด ๊ตฌ์กฐ๋ถํด ํ ๋น์ ๋์์ผ๋ก ์ฌ์ฉํ ์๋ ์๋ค. โถ for of ๋ฌธ์ ์ฌ์ฉํ ์ ์๋ ๊ฐ์ฒด๋ฅผ ์ดํฐ๋ฌ๋ธ์ด๋ผ๊ณ ํ๋ค โท ์ดํฐ๋ฌ๋ธ์ Symbol.iterator ๋ฉ์๋(ํน์ ํ๋กํ ํ์
์ฒด์ธ์ ์ํด ์์)๊ฐ ๊ตฌํ๋์ด ์์ด์ผ ํ๋ค.Symbol.iterator๋ for of์ ์ํด ์๋์ผ๋ก ํธ์ถ๋๋ฉฐ, ๋ช
์์ ์ผ๋ก ํธ์ถํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋คSymbol.iterator ๋ฉ์๋๊ฐ ๋ฐํํ๋ ๊ฐ์ฒด๋ “์ด..
[React] ๋ฆฌ์กํธ ํ์๊ธฐ(TypeWriter) ํจ๊ณผ ๊ตฌํํ๊ธฐ feat.์ ๋๋ ์ดํฐ
[React] ๋ฆฌ์กํธ ํ์๊ธฐ(TypeWriter) ํจ๊ณผ ๊ตฌํํ๊ธฐ feat.์ ๋๋ ์ดํฐ
2024.05.03๊ธฐ๋ณธ ๋ก์งํ์๊ธฐ๋ก ํ ๊ธ์์ฉ ์
๋ ฅํ๋ ํจ๊ณผ(Typewriter Effect)๋ ์ด๋ฏธ ์ ๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ง๋ง, setInterval ํ์ด๋จธ API๋ฅผ ์ด์ฉํด์ ์ง์ ๊ตฌํํ ์ ์๋ค. ์๋ ๋ฌธ์ฅ(ํ
์คํธ)์ ํ ๊ธ์์ฉ ์๋ฅธ ํ ๊ฐ์ฅ ์์ ๊ธ์๋ถํฐ ํ๋์ฉ ์ด์ด ๋ถ์ด๋ ๋ฐฉ์์ด๋ค. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i ๊น๋นก์ด๋ ์ปค์ ํจ๊ณผ๋ | ์ฝํ
์ธ ๋ฅผ ๊ฐ๋ ..
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ 100vh ์ด์ ํด๊ฒฐ
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ 100vh ์ด์ ํด๊ฒฐ
2024.05.03iOS์ ์ฌํ๋ฆฌ์์ 100vh ์์ฑ ๊ฐ์ด ๋ค์ ๋ค๋ฅด๊ฒ ์๋ํ๋ค. ๋ฐ์คํฌํ ํฌ๋กฌ์์ 100vh๋ ํ์ฌ ํ๋ฉด์ ๋ณด์ฌ์ง๋ ๋ทฐํฌํธ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ์ง๋ง, iOS์ ์ฌํ๋ฆฌ์์ ํ๋จ ์ฃผ์์ฐฝ ์์ญ๊น์ง ํฌํจํ๋ค. ๋ทฐํฌํธ๋ฅผ ๊ธฐ์ค์ผ๋ก ์๋ ๋น์จ๋ก ํ๋ฉด์ ๋๋ด๋ค๋ฉด ์์ดํฐ ์ฌํ๋ฆฌ์์ footer ์ผ๋ถ๋ถ์ ํ๋จ ์ฃผ์์ฐฝ ๋๋ฌธ์ ๊ฐ๋ ค์ง๋ค.header : 15%main : 70%footer : 15% ํด๊ฒฐ ๋ฐฉ๋ฒ๋คํํ ์ด ๋ฌธ์ ๋ ์์ CSS๋ง์ผ๋ก ํด๊ฒฐํ ์ ์๋ค. -webkit-fill-available ์์ฑ์ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค. ๊ธฐ๋ฅ ์ฟผ๋ฆฌ(@supports) ์ธ์์ ๋ช
์ํ -webkit-touch-callout์ iOS์์๋ง ์ง์ํ๋ ์์ฑ์ด๋ค. ๋ฐ๋ผ์ ์์ดํฐ ์ฌํ๋ฆฌ์์ ์ ์ํ ๋ -webkit-fill-available ์คํ์ผ ๊ฐ์ด ์ ..
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ ํ
๋ง ์ปฌ๋ฌ ๋ณ๊ฒฝ ๋ฐฉ๋ฒ
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ ํ ๋ง ์ปฌ๋ฌ ๋ณ๊ฒฝ ๋ฐฉ๋ฒ
2024.05.03์์ดํฐ iOS 15 ๋ถํฐ ์ฌํ๋ฆฌ ๋ธ๋ผ์ฐ์ ํญ ๋ง๋์ ํ
๋ง ์์์ ์ถ๊ฐํ ์ ์๋ค. ํญ ๋ง๋ ์์์ ์ฝํ
์ธ ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์๋ ์ ํ๋์ง๋ง ํ๊ทธ๋ฅผ ์ด์ฉํด์ ์ํ๋ ์์์ผ๋ก ๋ณ๊ฒฝํ ์ ์๋ค. ์ฐธ๊ณ ๋ก content ์์ฑ ๊ฐ์ ์ปฌ๋ฌ์ฝ๋ ๋์ CSS ๋ณ์๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. e.g. content="var(--bg-black)" ํ
๋ง ์์ ๋ณ๊ฒฝ ์ โผ ํ
๋ง ์์ ๋ณ๊ฒฝ ํ โผ Light/Dark ๋ชจ๋ ์ปฌ๋ฌ๋ผ์ดํธ/๋คํฌ ๋ชจ๋์์ ๊ฐ๊ฐ ๋ค๋ฅธ ์์ ๋ณด์ด๊ณ ์ถ์ผ๋ฉด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ์๋ ์์์์ ๋ผ์ดํธ ๋ชจ๋์ผ ๋ ํญ ๋ง๋ ์์์ #ffffff(ํ์์), ๋คํฌ ๋ชจ๋์ผ ๋ #28231c ์์ผ๋ก ํ์๋๋ค. ๋ ํผ๋ฐ์คSafari 15 Theme ColorMeta Theme Color and Trickery | CSS-Tr..