๐ช Programming
[Git] SSH ๊ณต๊ฐํค ๋ง๋ค๊ธฐ / Credential ์ธ์ฆ ์์คํ
[Git] SSH ๊ณต๊ฐํค ๋ง๋ค๊ธฐ / Credential ์ธ์ฆ ์์คํ
2024.04.26Credential ์ ์ฅ์ / HTTPS ํ๋กํ ์ฝGit ๋ฆฌ๋ชจํธ ์ ์ฅ์์ ํต์ ํ ๋ ์ฌ์ฉํ๋ ํ๋กํ ์ฝ์ Git(๊ธฐ๋ณธ ํ๋กํ ์ฝ), SSH, HTTPS ๋ฐฉ์์ด ์๋ค. Git ๊ธฐ๋ณธ ํ๋กํ ์ฝ์ ์ธ์ฆ ๊ธฐ๋ฅ์ด ๋ฏธ์ฝํ์ฌ ๊ฑฐ์ ์ฌ์ฉํ์ง ์๊ณ , ์ฃผ๋ก SSH๋ HTTPS๋ฅผ ์ฌ์ฉํ๋ค. HTTPS ํ๋กํ ์ฝ์ ์ฌ์ฉํ๋ฉด ๋งค๋ฒ ์ฌ์ฉ์ ์ด๋ฆ๊ณผ ์ํธ๋ฅผ ์
๋ ฅํด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์๋๋ฐ Git์ ์ด๋ฅผ ์ํด ์ธ์ฆ ์ ๋ณด๋ฅผ ์ ์ฅํด ๋๊ณ ์๋์ผ๋ก ์
๋ ฅํด ์ฃผ๋ Credential ์์คํ
์ ์ ๊ณตํ๋ค. Credential ๊ธฐ๋ฅ์์ ์ ๊ณตํ๋ ์ต์
์ ์๋ 3๊ฐ์ง๊ฐ ์๋ค. cache ๋ชจ๋ : ์ธ์ฆ์ ๋ณด๋ฅผ ๋ฉ๋ชจ๋ฆฌ์ ์์ ์ ์ฅ(๊ธฐ๋ณธ 15๋ถ)store ๋ชจ๋ : ์ธ์ฆ ์ ๋ณด๋ฅผ ํ
์คํธ ํ์ผ๋ก ๋์คํฌ์ ์ ์ฅ. ์ฌ์ฉ์ ํ ๋๋ ํ ๋ฆฌ์ ์ผ๋ฐ ํ
์คํธ ํ์ผ๋ก ์ ์ฅ๋๋ฏ๋ก ์ธ์ฆ ์ ๋ณด..
[HTML/CSS] focus-within — ์์ ์์๊ฐ ํฌ์ปค์ค ๋์ ๋ ๋ถ๋ชจ ์คํ์ผ ์ง์
[HTML/CSS] focus-within — ์์ ์์๊ฐ ํฌ์ปค์ค ๋์ ๋ ๋ถ๋ชจ ์คํ์ผ ์ง์
2024.04.25focus-within ์ดํด๋ณด๊ธฐ:focus-within์ ํฌ์ปค์ค๋ฅผ ๋ฐ์ ์์ ํน์ ํฌ์ปค์ค๋ฅผ ๋ฐ์ ์์(์ฃผ๋ก input ํ๊ทธ)๋ฅผ ํฌํจํ๋ ๋ถ๋ชจ ์์๋ฅผ ๊ฐ๋ฆฌํจ๋ค. input ๊ฐ์ ํ์ ์์๊ฐ focus ๋์ ๋ ๋ถ๋ชจ ์์์ ์คํ์ผ์ ๋ณ๊ฒฝํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ฉด ์ ์ฉํ๋ค. ์๋ ์์ ์์ input ํ๊ทธ๋ฅผ ์์์ผ๋ก ํฌํจํ๋ .wrapper ํด๋์ค ์ด๋ฆ์ ๋ถ๋ชจ ์์๊ฐ ์๋ค. Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Choose text color input ํ๊ทธ๋ฅผ ์ ํํด์ ํ์ฑํ๋๋ฉด(ํฌ์ปค์ค๋ฅผ ๋ฐ์ผ๋ฉด), ํด๋น input ํ๊ทธ๋ฅผ ํฌํจํ๋ ๋ถ๋ชจ ์์์ธ .wrapper ํด๋์ค์ focus-within ์์ฌ ํด..
[JS] ์ด๋ฒคํธ ์ ํ(์บก์ฒ๋ง, ๋ฒ๋ธ๋ง) / ์ด๋ฒคํธ ์์ / ๋ฐ์ดํฐ ์์ฑ
[JS] ์ด๋ฒคํธ ์ ํ(์บก์ฒ๋ง, ๋ฒ๋ธ๋ง) / ์ด๋ฒคํธ ์์ / ๋ฐ์ดํฐ ์์ฑ
2024.04.25์ค์ต์ฉ CodePen๐ก ์ด๋ฒคํธ ๋ฒ๋ธ๋ง/์บก์ฒ๋ง, stopPropagation(), preventDefault()๊น์ง ๋ชจ๋ ์ค์ตํ ์ ์๋๋ก ์์ฑํด๋ . "> ์ด๋ฒคํธ ์ ํ | Event Propagation๋ฒ๋ธ๋ง Bubbling / ์บก์ฒ๋ง Capturing์ ์ฝ๋ํ ์์ ์์ ํ๋จ์ ์๋ span ํ๊ทธ๋ฅผ ํด๋ฆญํ๋ฉด โ "span ์์ญ" → โ "p ์์ญ" → โ "div" ์์ญ ์์ผ๋ก ์ฝ์์ด ์ฐํ๋ค. span ์์ญ์ ํด๋ฆญํ ์๊ฐ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํด์ ์ต์์์ ์๋ ์์๊น์ง ์ด๋ฒคํธ๊ฐ ์ ๋ฌ๋๋ ๊ฒ. ์ด๊ฒ์ ์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค. ์ด๋ฒคํธ ์บก์ฒ๋ง์ ๋ฒ๋ธ๋ง ๋ฐ๋๋ฐฉํฅ์ผ๋ก ์งํ๋๋ค. addEventListener() 3๋ฒ์งธ ์ธ์์ true๋ฅผ ๋ช
์ํ๋ฉด ๋๋ค. ์ด๋ { capture: true } ๋ฅผ ๋ช
์ํ ..
[HTML/CSS] ์๋งจํฑ ํ๊ทธ Semantic Tag
[HTML/CSS] ์๋งจํฑ ํ๊ทธ Semantic Tag
2024.04.25Semantic(่ฏญไน)์ "์๋ฏธ๊ฐ ์๋"์ด๋ผ๋ ๋ป. ๋ฌผ์ ๋ง์๋ "์ปต", ๋ฌธ์ ์ฌ๋ "์์ก์ด"์ฒ๋ผ ์ผ์์ํ์์ ์ฝ๊ฒ ๋ณผ ์ ์๋ ์ฌ๋ฌผ๋ค์ด ๊ฐ๊ฐ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ ๊ฒ์ฒ๋ผ HTML์ ์ฌ๋ฌ ํ๊ทธ๋ค๋ ๊ฐ๊ฐ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ์๋งจํฑ ํ๊ทธ์ ์ฅ์ SEO : ์ ๋ชฉ , ๋ถ์ ๋ชฉ ๊ฐ์ ์๋ฉํฑ ํ๊ทธ๋ฅผ ์ ์ ํ๊ฒ ์ฌ์ฉํ๋ฉด ๊ฒ์ ์์ง์ด ํด๋น ์ฌ์ดํธ๋ฅผ ๋ ์ ์ดํดํ ์ ์๊ธฐ ๋๋ฌธ์ ๊ฒ์ ์ต์ ํ์ ์ ๋ฆฌํ๋ค.Accessbility(์น์ ๊ทผ์ฑ) : ์๋งจํฑ ํ๊ทธ๋ฅผ ์ ์ฌ์ฉํ๋ฉด ์คํฌ๋ฆฐ ๋ฆฌ๋(์นํ์ด์ง๋ฅผ ์์ฑ์ผ๋ก ์ฝ์ด์ฃผ๋)๋ ํค๋ณด๋๋ง ์ฌ์ฉํด์ ์น์ฌ์ดํธ๋ฅผ ์ด์ฉํ๋ ์ฌ๋๋ค๋ ํฐ ๋ฌธ์ ์์ด ์ฌ์ฉํ ์ ์๋ค.Maintainability : ํ๊ทธ๋ง ์ฌ์ฉํด์ ๊ฐ๋ฐํ ์น์ฌ์ดํธ๋ณด๋ค ํ๋์ ์์๋ณด๊ธฐ ์ฌ์ด ์๋งจํฑ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๋ค๋ ์ ์ง๋ณด์ํ๊ธฐ ..
[JS] ์๋ฉด ์ ์ฉํ ์๋ฐ์คํฌ๋ฆฝํธ ์ต์ ๋ฌธ๋ฒ
[JS] ์๋ฉด ์ ์ฉํ ์๋ฐ์คํฌ๋ฆฝํธ ์ต์ ๋ฌธ๋ฒ
2024.04.25Numeric Separators์ซ์๋ฅผ ์
๋ ฅํ ๋ ์ธ๋์ค์ฝ์ด _๋ฅผ ์ด์ฉํด ์ซ์๋ฅผ ๊ตฌ๋ถํด์ ๊ฐ๋
์ฑ์ ๋์ผ ์ ์๋ค. KRW ํํ์ฒ๋ผ ์๋ฆฌ์๊ฐ ๋ง์ ์ซ์๋ฅผ ์์ฑํ ๋ ์ ์ฉconst cost = 100_000_000;console.log(cost); // 100000000 _ ์ธ๋๋ฐ ํ๊ฐ๋ง ์ฌ์ฉ ๊ฐ๋ฅ ex) 100__000 โ์ซ์ ๋ง์ง๋ง์ ์ฌ์ฉ ๋ถ๊ฐ ex) 100_; โ๊ฐ์ฅ ์ ์ซ์๊ฐ 0์ผ๋ ์ฌ์ฉ ๋ถ๊ฐ ex) 0_1; โ replaceAllreplaceAll(substr, newSubstr)replaceAll(substr, replacerFunction) ๋ฌธ์์ด์์ ์ํ๋ ๋ถ๋ถ์ "๋ชจ๋" ์ง์ ํ ๋ฌธ์๋ก ๋ณ๊ฒฝํ ์ ์๋ค. ์ ๊ท์๋ ์ฌ์ฉ ๊ฐ๋ฅ.const sayHello = 'Hello, John';sayHell..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ต์
๋ ์ฒด์ด๋
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ต์ ๋ ์ฒด์ด๋
2024.04.25์ต์
๋ ์ฒด์ด๋ ๋ฑ์ฅ ๋ฐฐ๊ฒฝ๋น๊ต์ ์๋ก ์ถ๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ผ๋ก ํ๋กํผํฐ๊ฐ ์๋ ์ค์ฒฉ ๊ฐ์ฒด๋ฅผ ์๋ฌ ์์ด ์ ๊ทผํ ๋ ์ฌ์ฉํ๋ค. ์ ์ ์ ๋ณด๋ฅผ ๋ด์๋๋ user ๊ฐ์ฒด์ ์๋ฌด๋ฐ ์ ๋ณด๊ฐ ์๋ ์ํ์์ address ์์ฑ์ ์ ๊ทผํ๋ ค๊ณ ํ๋ฉด ์๋์ฒ๋ผ ํ์
์๋ฌ๊ฐ ๋ฐ์ํ๋ค.const user = {};console.log(user.address.street);// TypeError: Cannot read property 'street' of undefined React๋ Vue์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ธ ๋ ์์ง ์คํ ์ด์ ์๋ ์ ๋ณด๋ฅผ ๋ค ๋ถ๋ฌ์ค์ง ์์ ์์ ์์ ๊ฐ์ฒด์ ์์ฑ์ ์ ๊ทผํ ๋๋ ๋น์ทํ ํ์
์๋ฌ๊ฐ ๋ฐ์ํ๋ค.// selectedMall์ ์คํ ์ด์์ ๋ถ๋ฌ์ฌ ์ ๋ณด// ์์ง ์คํ ์ด์์ selectedMall ์ ๋ณด๋ฅผ ..
[Git] ๋ณ๊ฒฝํ ์ํ ์์ ์ ์ฅ ํ ๋ธ๋์น ์ด๋ ๋ฐฉ๋ฒ — Git Stash
[Git] ๋ณ๊ฒฝํ ์ํ ์์ ์ ์ฅ ํ ๋ธ๋์น ์ด๋ ๋ฐฉ๋ฒ — Git Stash
2024.04.25ํน์ ๋ธ๋์น์์ ํ์ผ์ ์์ ํ๊ณ git checkout ๋ช
๋ น์ด๋ก ์ ์ ๋ค๋ฅธ ๋ธ๋์น๋ก ์ด๋ํ๋ ค๊ณ ํ๋ฉด ์๋ ๋ฉ์์ง๊ฐ ๋์จ๋ค.Please commit your changes or stash them before you switch branches. ๋ณ๊ฒฝํ ๋ด์ฉ์ commitํ๊ฑฐ๋ stash ํด์ผ๋ง ๋ค๋ฅธ ๋ธ๋์น๋ก ์ด๋ํ ์ ์๋ค๋ ๋ฉ์์ง๋ค. ์์ง ์๋ฃํ์ง ์์ ์์
์ commitํ๊ธฐ ๊ป๋๋ฌ์ธ ๋ stash ๋ช
๋ น์ด๋ฅผ ํ์ฉํ ์ ์๋ค. ๋ง๋ฌด๋ฆฌํ์ง ์์ ์์
์ stash ์คํ์ ์์ ์ ์ฅํ ํ ๋ค๋ฅธ ๋ธ๋์น๋ก ์ด๋ํ ์ ์๋ค. Stash ๋ช
๋ น์ดstashํ๋ ๋ธ๋์น๊ฐ ์๋์ด๋(๋ค๋ฅธ ๋ธ๋์น์์๋) stash์ ์ ์ฅํ ๋ด์ฉ์ ๋ณต์(์ ์ฉ)ํ ์ ์๋ค stash ์คํ์ ์ ์ฅ# ํ์ฌ ์ํ ์์ ์ ์ฅ โญ๏ธgit stash st..
[JS] console.log ์ฝ์ ๋ก๊ทธ ๋ ์ ์ฌ์ฉํ๊ธฐ
[JS] console.log ์ฝ์ ๋ก๊ทธ ๋ ์ ์ฌ์ฉํ๊ธฐ
2024.04.25console.log๋ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ console API์ค ํ๋. console ๊ฐ์ฒด์๋ log ์ธ์๋ ๋ค์ํ ๋ฉ์๋๋ค์ด ์กด์ฌํ๋ค. log ๋ ๋ฒจ ์ข
๋ฅ์ ๋ง ํ์ํ ์ ๋ณด๊ฐ ์๋๋ฉด log์ info๋ ์ ํ ๋ฐฐํฌ ๋จ๊ณ์์ ์ถ๋ ฅ๋์ง ์๋๋ก ํ๋ค. ๋ฐฐํฌํ ๋ log๋ info๋ ์ถ๋ ฅํ์ง ์๋๋ก ํ๊ฑฐ๋ ๋คํธ์ํฌ ์์ฒญ์ด ๋ฐ์ํ์ง ์๋๋ก ํ๋ ๋ฑ์ ์ค์ ์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ค์๋ ๋ ๋ฒจ์ ๋ง๋ console ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ค์ํ๋ค. console.logconst dog = { type: "๐ถ", name: "์ธ์ธ", owner: { name: "John" } };console.log("logging", dog); ๊ฐ์ฅ ์์ฃผ ์ฌ์ฉํ๋ console ๋ฉ์๋๋ก ๊ฐ๋ฐ ๋์ค ํ์ํ ๋ฐ์ดํฐ๋ฅผ ์ถ๋ ฅํ๊ณ ์ถ์ ๋..
[React] ๋ฆฌ์กํธ์์ SVG ์ฌ์ฉ๋ฒ
[React] ๋ฆฌ์กํธ์์ SVG ์ฌ์ฉ๋ฒ
2024.04.25๐ก SVG๋ ์์, ํฌ๊ธฐ ๋ฑ์ ๋์ ์ผ๋ก ์กฐ์ ํ ์ ์๋ ์ฅ์ ์ด ์๋ค ๋ฐฉ๋ฒ 1 — src ์์ฑ์ svg ๊ฒฝ๋ก ์
๋ ฅ ๐ก ํ์ผ ๊ฒฝ๋ก ์ง์ ์ฐธ๊ณ ๋ด์ฉJSX ์๋ฆฌ๋จผํธ ์์ฑ์ ๋ฃจํธ ๊ธฐ์ค์ public ํด๋. ๋ง์ฝ ํ๊ทธ์ src ์์ฑ(JSX ํ๊ทธ ์์ฑ)์ src ํด๋์ ์๋ ์ด๋ฏธ์ง ํ์ผ์ ์ง์ ํ๋ ค๋ฉด…ํ์ผ ์ต์๋จ์์ ๋ถ๋ฌ์จ ์ด๋ฏธ์ง ํ์ผ์ src ์์ฑ์ ํ ๋นํ๊ฑฐ๋,src ์์ฑ ์์์ require() ์ฌ์ฉ ์: CSS ํ์ผ ๋ฃจํธ ํด๋ ๊ธฐ์ค์ src ํด๋ํ์ผ ์ต์๋จ import ๊ตฌ๋ฌธ์์ src ํด๋๋ง ์ฒ๋ฆฌ ๊ฐ๋ฅ(public ํด๋์ ์๋ ํ์ผ์ ๋ถ๊ฐ) ํ๊ทธ์ src ์์ฑ์ svg ํ์ผ ๊ฒฝ๋ก๋ฅผ ์ ์ด์ค๋ค. ๊ฒฝ๋ก๋ฅผ ์ ์ ๋ public ํด๋์ ์๋ ํ์ผ์ public ๊ฒฝ๋ก๋ช
์ ์ ์ง ์์๋ ๋๋ค. ๊ฐํธํ๊ธด ํ์ง๋ง ์ํฉ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ์ค๋ณต ์์ ์ ๊ฑฐ ๋ฐฉ๋ฒ ๋ชจ์
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ์ค๋ณต ์์ ์ ๊ฑฐ ๋ฐฉ๋ฒ ๋ชจ์
2024.04.25๋ฐฉ๋ฒ 1 — Set ์ด์ฉ โญ๏ธSet์ ์ด์ฉํด ์ค๋ณต ์์๋ฅผ ์ ๊ฑฐํ๋ ๋ฐฉ์์ ์ฑ๋ฅ์ด ๊ฐ์ฅ ์ข๋ค Set์ ์ ๋ํฌํ ๊ฐ๋ง ์ ์ฅํ ์ ์๊ธฐ ๋๋ฌธ์ new Set() ์ธ์์ ๋ค์ด์จ ๋ฐฐ์ด์ ์ค๋ณต ์์๋ ์๋์ผ๋ก ์ ๊ฑฐ๋๋ค. Array.from์ โ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด๋ โ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๋ฅผ ์๊ฒ ๋ณต์ฌํด ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ๋ค. ์ ๊ฐ๋ฌธ๋ฒ์ ์ฌ์ฉํด๋ ๊ฒฐ๊ณผ๋ ๋์ผ.const arr = ["A", "B", "A", "D", "B", "F"];const deDuplicated = [...new Set(arr)];// const deDuplicated = Array.from(new Set(arr))console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ] Set, Map ๊ด๋ จ ๋ ์์ธํ ๋ด์ฉ์ Ma..
[HTML/CSS] CSS ํ์
์ ๋๋ฉ์ด์
๋ง๋ค๊ธฐ
[HTML/CSS] CSS ํ์ ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ
2024.04.25์์ ์จ๊น ๋ฐฉ์ ์ฐจ์ด์ ๋ ๋ ํธ๋ฆฌ๋ฆฌํ๋ก์ฐ๋ฆฌํ์ธํธ์ด๋ฒคํธ ํธ๋ค๋ฌDOM ํธ๋ฆฌdisplay: none์ ์ธ๋ฐ์๋ฐ์๋นํ์ฑ์ ์งvisibility: hidden์ ์ง๋ฐ์ ์ํจ๋ฐ์๋นํ์ฑ์ ์งopacity: 0์ ์ง๋ฐ์ ์ํจ๋ฐ์ํ์ฑ์ ์ง display: none๋ ๋ ํธ๋ฆฌ : ์ ์ธ๋ฆฌํ๋ก์ฐ : ๋ฐ์ (๋ ๋ํธ๋ฆฌ ์ํ๊ฐ ๋ณ๊ฒฝ๋์ผ๋ฏ๋ก)๋ฆฌํ์ธํธ : ๋ฐ์ (๋ฆฌํ๋ก์ฐ ๋ฐ์์ ๋ฆฌํ์ธํธ๋ ํจ๊ป ๋ฐ์)์ด๋ฒคํธ ํธ๋ค๋ฌ : ๋นํ์ฑDOM ํธ๋ฆฌ : ์ ์ง (์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ ๊ฐ๋ฅ)visibility: hidden๋ ๋ ํธ๋ฆฌ : ์ ์ง (ํ๋ฉด์์ ์๋ณด์ด์ง๋ง ๊ณต๊ฐ์ ์ฐจ์งํจ)๋ฆฌํ๋ก์ฐ : ๋ฐ์ ์ํจ (๋ ์ด์์์ ์ํฅ์ ๋ฏธ์น์ง ์์ผ๋ฏ๋ก)๋ฆฌํ์ธํธ : ๋ฐ์ (์์๊ฐ ๋ณด์ด์ง ์๋๋ก ๋ณ๊ฒฝํ์ผ๋ฏ๋ก)์ด๋ฒคํธ ํธ๋ค๋ฌ : ๋นํ์ฑDOM ํธ๋ฆฌ : ์ ์ง (์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ ๊ฐ๋ฅ)opaci..
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ์์ ์
๋ ฅ์ฐฝ ์๋ํ๋ ๋ฐฉ์ง
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ์์ ์ ๋ ฅ์ฐฝ ์๋ํ๋ ๋ฐฉ์ง
2024.04.25, , ํ๊ทธ๋ฅผ ๋ชจ๋ฐ์ผ์์ ํฐ์นํ๋ฉด(ํฌ์ปค์คํ๋ฉด) ํ๋ฉด์ด ์๋์ผ๋ก ํ๋๋ ๋๊ฐ ์๋ค. ์
๋ ฅ์ฐฝ์ ํฐํธ ํฌ๊ธฐ๊ฐ 16px๋ณด๋ค ์์ผ๋ฉด ์๋์ผ๋ก ํ๋๋๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ๋ ํ์. ๋ํ์ ์ผ๋ก ์๋ 3๊ฐ์ง ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์๋ค. ํ๋ ๊ธ์ง — ๋ชจ๋ฐ์ผ์ฉ์ผ๋ก ์ ์ ํ๊ฒ ๋์์ธ๋ ๊ฒฝ์ฐํฐํธ ํฌ๊ธฐ๋ฅผ 16px ์ด์์ผ๋ก ๋ณ๊ฒฝ — ์ถ์ฒํฐํธ ํฌ๊ธฐ๋ฅผ 16px๋ก ๋ณ๊ฒฝํ๊ณ transform: scale()์ ์ด์ฉํด ์ํ๋ ๋งํผ ์ค์ด๋ ๋ฐฉ๋ฒ — ๋ณต์กํจ ๋ฐฉ๋ฒ1 — ํ๋ ๊ธ์งhtml ํ์ผ ๋ฉํ ํ๊ทธ์ content ์์ฑ์ ์ต๋ ํ๋ ๋ฐฐ์จ์ 1๋ฐฐ์๋ง ํ์ฉํ๊ณ , ๋จ๋ง๊ธฐ ํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง ๋ชปํ๋๋ก ๋ช
์ํ๋ ๋ฐฉ๋ฒ. ์์ ๊ธ์จ๋ฅผ ์ ๋ณด์ง ๋ชปํ๋ ์ฌ๋๋ค์ ํ๋ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ ๊ทผ์ฑ์ด ๋จ์ด์ง๋ ๋จ์ ์ด ์๋ค. initial-scale ์ด๊ธฐ ํ๋ฉด ๋ฐฐ์จmaxi..