๐ช Programming
[Git] Github ๋งํฌ๋ค์ด์ ๊ฐ์ฃผ ๋ฌ๊ธฐ
[Git] Github ๋งํฌ๋ค์ด์ ๊ฐ์ฃผ ๋ฌ๊ธฐ
2024.04.29๊ฐ์ฃผ ์ฌ์ฉ๋ฒ21๋
10์๋ถํฐ Github์๋ Markdown ๊ฐ์ฃผ๋ฅผ ์ง์ํ๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒ๋ ๊ฐ๋จํ๋ค. ๊ฐ์ฃผ๋ฅผ ๋ฌ๊ณ ์ถ์ ๋ฌธ์ฅ์ ๋๊ดํธ๋ฅผ ์ด๊ณ [^๋ฒํธ|์ ๋ชฉ] ํํ๋ก ์
๋ ฅํ๋ฉด ๋๋ค. ex) [^1] [^memo] ๊ฐ์ฃผ ์ ๋ชฉ์ ์์ด๋ง ์ง์ํ๋ ๋ฏ ํ๋ค. ํ๋ฆฌ๋ทฐ ํ๋ฉด์์ ์ ๋ชฉ์ผ๋ก ์
๋ ฅํ์ด๋ ํญ์ ๋ฒํธ๋ก ๋์จ๋ค. ์์ฝ๊ฒ๋ ๊ฐ์ฃผ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ๊ฐ์ฃผ ์ค๋ช
์ด ๋ณด์ด๋ ํดํ ๊ธฐ๋ฅ์ ์ง์ํ์ง ์๋๋ค. ๊ฐ์ฃผ์ ๋ํ ์ค๋ช
์ [^๋ฒํธ|์ ๋ชฉ]: ์ค๋ช
ํํ๋ก ์
๋ ฅํ๋ฉด ๋๋ค. ๊ฐ์ฃผ ์ค๋ช
์ ์ด๋์ ์
๋ ฅํ๋ ์๊ด์์ด ํญ์ ํ๋จ์ ์์นํ๊ฒ ๋๋ค. ๋งํฌ๋ค์ด ํ๋ฆฌ๋ทฐ ํ๋ฉด์์ [^1] ๊ฐ์ฃผ๋ฅผ ํด๋ฆญํ๋ฉด ํ๋จ์ ์๋ ๊ฐ์ฃผ ์ค๋ช
์ผ๋ก ์ด๋ํ๋ค. ๊ฐ์ฃผ ์ค๋ช
์์ ↵ ์์ด์ฝ์ ๋๋ฅด๋ฉด ๋ค์ ํด๋น ๊ฐ์ฃผ๊ฐ ๋ฌ๋ ค์๋ ๋ฌธ์ฅ์ผ๋ก ์ด๋ํ๋ค.JavaScript๋ ํด..
[React] ๋ฆฌ์กํธ ์์ ๋๋๊ทธ์ค๋๋กญ ๊ตฌํ
[React] ๋ฆฌ์กํธ ์์ ๋๋๊ทธ์ค๋๋กญ ๊ตฌํ
2024.04.28TL;DR๋๋๊ทธํ ์ ์๋ ์์๋ก ๋ณ๊ฒฝ — draggable={true}๋๋๊ทธ ์์ — onDragStart ์ด๋ฒคํธ ํธ๋ฆฌ๊ฑฐ๋๋๊ทธํ๊ณ ์๋ ์์์ ์ธ๋ฑ์ค ์ ๋ณด ์ ์ฅ — state.draggedFrom๋๋๊ทธ ์ํ true๋ก ๋ณ๊ฒฝ — state.isDragging์ด๋ฒคํธ ํธ๋ฆฌ๊ฑฐ ์์ ์ ์๋ฆฌ๋จผํธ ๋ฆฌ์คํธ ์ ์ฅ — state.originalOrder๋ง์ฐ์ค ์ปค์๊ฐ ๋๋กญ ๊ฐ๋ฅํ ์์ญ์ ์์ ๋ — onDragOver ์ด๋ฒคํธ ํธ๋ฆฌ๊ฑฐdrop ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก dragOver ๊ธฐ๋ณธ ์ด๋ฒคํธ ๋ฐฉ์ง — e.preventDefault()๋ง์ฐ์ค ํฌ์ธํฐ ์์น์ ์๋ ์์์ ์ธ๋ฑ์ค ์ ์ฅ — state.draggedTo์๋ฆฌ๋จผํธ ์์ ๋ณ๊ฒฝ — state.updatedOrder ๋๋๊ทธ์ค์ธ ์์ดํ
์ ๋ง์ฐ์ค ํฌ์ธํฐ ์์น(draggedTo..
[Algorithm] ํน์ ์ ๊น์ง์ ํฉ ๊ตฌํ๊ธฐ / ๋ฑ์ฐจ์์ด (๊ฐ์ฐ์ค ๊ณต์)
[Algorithm] ํน์ ์ ๊น์ง์ ํฉ ๊ตฌํ๊ธฐ / ๋ฑ์ฐจ์์ด (๊ฐ์ฐ์ค ๊ณต์)
2024.04.28ํ๋ก๊ทธ๋๋จธ์ค ๋ฌธ์ ํ๋ก๊ทธ๋๋จธ์ค์ "๋ถ์กฑํ ๊ธ์ก ๊ณ์ฐํ๊ธฐ" ๋ฌธ์ ๋ค. ์๋ 3๊ฐ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฐ๋๋ค. price : ๋์ด๊ธฐ๊ตฌ์ ์ด์ฉ๋ฃmoney : ๊ณ ๊ฐ์ด ๊ฐ์ง๊ณ ์๋ ๊ธ์กcount : ๊ณ ๊ฐ์ด ํด๋น ๋์ด๊ธฐ๊ตฌ๋ฅผ ์ด์ฉํ ํ์ ๋์ด๊ธฐ๊ตฌ๋ฅผ ์ด์ฉํ ํ์๊ฐ ๋์ด๋ ๋๋ง๋ค ํ์ ๋งํผ์ ์ด์ฉ๋ฃ๋ฅผ ๋ ๋ฐ๋๋ค. ๋์ด๊ธฐ๊ตฌ์ ์ด์ฉ๋ฃ price ๊ฐ 100์์ด๋ผ๋ฉด 1๋ฒ ์ด์ฉํ ๋ 100์, 2๋ฒ ์ด์ฉํ ๋ 200์, 3๋ฒ ์ด์ฉํ ๋ 300์์ด ๋๋ค. ๋์ด๊ธฐ๊ตฌ๋ฅผ count ๋ฒ ํ์ ๋ money ๊ธ์ก์์ ์ผ๋ง๋ ๋ชจ์๋ผ๋์ง๋ฅผ ๋ฐํํด์ผ ๋๋ค. ๊ธ์ก์ด ๋ชจ์๋ผ์ง ์์ผ๋ฉด 0์ ๋ฐํํ๋ค. ๋ฐ๋ณต๋ฌธ์ ์ด์ฉํ๋ฉด ์๋์ฒ๋ผ ์ฝ๊ฒ ํ ์ ์๋ค.function solution(price, money, count) { let sum = 0; for (let i..
[CS] ์ง๋ฒ ๊ณ์ฐ ๋ฐฉ๋ฒ — 10์ง์ โ 2์ง์ ๋ณํ
[CS] ์ง๋ฒ ๊ณ์ฐ ๋ฐฉ๋ฒ — 10์ง์ โ 2์ง์ ๋ณํ
2024.04.282์ง๋ฒ์ ์ฌ์ฉํ๋ ์ด์ 2์ง๋ฒ์ 0~1๋ก ์ซ์๋ฅผ ํํํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์ ๊ธฐ ์ ํธ๋ก ์๋ํ๋ ๊ธฐ๊ณ์ธ ์ปดํจํฐ๋ 2์ง๋ฒ์ ๊ธฐ๋ฐ์ผ๋ก ์ค๊ณ๋๋ค. ์ ๊ธฐ์ ์ ํธ๋ก ์๋ฏธ๋ฅผ ์ ๋ฌํ ์ ์๋ ์ต์ ๋จ์๋ ON, OFF์ด๋ค. ์ ๊ธฐ ์ ํธ๊ฐ ์๋ ์ํ๋ฅผ 1, ์๋ ์ํ๋ฅผ 0์ผ๋ก ์ค์ ํ๋ค. ์ด๋ ๊ฒ ๋จ 2๊ฐ์ง ์ํ๋ง 2์ง์๋ก ํํํ๋ ๊ฒ์ด ๊ฐ์ฅ ๊ฐ๋จํ๊ณ ์ ํํ๊ธฐ ๋๋ฌธ์ด๋ค. 2์ง์๋ฅผ ์ฌ์ฉํ๋ฉด 0๊ณผ 1๋ก ๋จ์ํ๊ฒ ์ฒ๋ฆฌํ ์ ์์ด ์๋๊ฐ ๋น ๋ฅด์ง๋ง ์์ ์ซ์๋ ๋งค์ฐ ๊ธธ์ด์ง๋ ๋จ์ ์ด ์๋ค. ๋ ๋ง์ ์ ํธ๋ฅผ ์ฌ์ฉํ ์๋ ์์ง๋ง, 2๊ฐ ์ด์์ ์ ํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ ํํ ์ ํธ๋ฅผ ์ธก์ ํ๋๋ฐ ๋น์ฉ์ด ๋ง์ด ๋ค๊ธฐ ๋๋ฌธ์ ํ์ฌ๊น์ง๋ 2์ง์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ. ๊ฐ ์ง๋ฒ์ ํน์ง2์ง์ : Binary Number | ไบ่ฟๅถ (0~1๋ก ์ซ์๋ฅผ ํํํ๋ ๋ฐฉ๋ฒ)3์ง์ : T..
[React] ๋ฆฌ์กํธ ๋ง์ฐ์ค ๋๋๊ทธ ๊ฐ๋ฅํ ์์ ๋ง๋ค๊ธฐ / ๊ธฐํ ํ๋กํผํฐ
[React] ๋ฆฌ์กํธ ๋ง์ฐ์ค ๋๋๊ทธ ๊ฐ๋ฅํ ์์ ๋ง๋ค๊ธฐ / ๊ธฐํ ํ๋กํผํฐ
2024.04.27์์ ์์์ ์ฝํ
์ธ ๊ฐ ๋ถ๋ชจ ์์๋ณด๋ค ํฌ๋ค๋ฉด, ๋ถ๋ชจ ์์์ ์คํฌ๋กค์ด ์๊ธฐ๊ณ , ๋ง์ฐ์ค ํ ๋ก ์คํฌ๋กคํ ์ ์๋ค. ๋ง์ฐ์ค ํ ์ธ์๋ click / move ์ด๋ฒคํธ๋ฅผ ์ด์ฉํด ๋ง์ฐ์ค ๋๋๊ทธ๋ก ์คํฌ๋กคํ๋๋ก ๋ง๋ค ์ ์๋ค. TL;DRโถ ๋ง์ฐ์ค๋ฅผ ํด๋ฆญํ์ ๋`clientX`, `clientY` (๋ทฐํฌํธ ๊ธฐ์ค)์ขํ์, ์์์ ์คํฌ๋กค ์์น `scrollLeft`, `scrollTop` ์ ์ฅํด๋ฆญ ์ํ `true`๋ก ๋ณ๊ฒฝ(CSS) `cursor: grabbing user-select: none` โท ํด๋ฆญํ ์ํ์์ ๋ง์ฐ์ค๋ฅผ ์ด๋(๋๋๊ทธ)ํ์ ๋โ ์ด๋์ ๋ฉ์ถ ์ง์ (clientX/Y)๊ณผ โก๋ง์ฐ์ค๋ฅผ ํด๋ฆญํ ์ง์ **(clientX/Y)**์ ๋บ ๊ฐ ๊ณ์ฐ — ์คํฌ๋กคํ ๋ฒ์(์์์ ํ์ฌ ์คํฌ๋กค ์์น)์ (์คํฌ๋กคํ ๊ฐ)์ ๋บ ์์น๋ก ์คํฌ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ URL ๊ฐ์ฒด / searchParams
[JS] ์๋ฐ์คํฌ๋ฆฝํธ URL ๊ฐ์ฒด / searchParams
2024.04.27URL ๊ฐ์ฒด ํ์ฌ ํ์ด์ง์ URL์ด ์๋์ ๊ฐ๋ค๊ณ ๊ฐ์ ํ์ ๋... ์ฐธ๊ณ ๋ก %20 ์ ๋น์นธ(space) 1๊ฐhttps://example.com/?name=Jonathan%20Smith&age=18 url ๊ฐ์ฒด์ search ์์ฑ์ ์ด์ฉํด ๋ชจ๋ ์ฟผ๋ฆฌ ์คํธ๋ง ๋ด์ฉ์ ๊ฐ์ ธ์ฌ ์ ์๋คconst url = new URL(window.location.href); // ํ์ฌ urlurl.search; // '?name=Jonathan%20Smith&age=18' name age ๊ฐ์ ํน์ ์ฟผ๋ฆฌ ์คํธ๋ง๋ง ๊ฐ์ ธ์ค๊ณ ์ถ๋ค๋ฉด URLSearchParams ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ฉด ๋๋ค. get์ผ๋ก ๊ฐ์ ์กฐํํ๊ณ append(๊ธฐ์กด ๊ฐ์ ์ด์ด๋ถ์ด๊ธฐ) ํน์ set(๊ธฐ์กด๊ฐ ๊ต์ฒด)์ผ๋ก ์๋ก์ด ๊ฐ์ ์ถ๊ฐํ ์๋ ์๋ค.url.searchPara..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ Map / Set ์๋ฃ๊ตฌ์กฐ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ Map / Set ์๋ฃ๊ตฌ์กฐ
2024.04.27MapMap์ ํญ์ `map` ์ ์ฉ ๋ฉ์๋(`set`, `get` ๋ฑ)๋ฅผ ์ฌ์ฉํ๋ค. `map[key] = 2` ํํ๋ก ์ฌ์ฉํ๋ฉด `map`์ ์ผ๋ฐ ๊ฐ์ฒด๋ก ์ทจ๊ธํ๋ฏ๋ก ๋ง์ ์ ์ฝ์ด ์๊ธด๋ค. TL;DRโถ key-value๋ก ์ด๋ฃจ์ด์ง ์์๊ฐ ์๋ ์ปฌ๋ ์
(์งํฉ) โญ๏ธ โท ์ฝ์
์์ ๊ธฐ์ต โธ ์ค๋ณต key ๋ถ๊ฐ — ์ด๋ฏธ ์กด์ฌํ๋ key์ ๋ํ value๋ฅผ ์ถ๊ฐํ๋ฉด ํด๋น key์ value๋ฅผ ๋ฎ์ด์let map = new Map([['one', 1]]);map.get('one'); // 1map.set('one', 111);map.get('one'); // 111 โน Map ๋ด์ฅ ๋ฉ์๋ forEach ์ง์(๋ฐฐ์ด forEach ๋ฉ์๋์ ์ ์ฌ) / for of ์ํ ๊ฐ๋ฅmap.forEach((value, key, map) ..
[Web] ์ธ์
vs ์ฟ ํค vs ํ ํฐ
[Web] ์ธ์ vs ์ฟ ํค vs ํ ํฐ
2024.04.27TL;DR๐ก Authentication์ ์ธ์ฆ(์๋ฒ์ ์ ์ ์ธ์ง), Authorization์ ๊ถํ๋ถ์ฌ(ํน์ ํ ํ๋ ํ์ฉ) ์ฟ ํค : HTTP ํ๋กํ ์ฝ์ ๋ฌด์ํ์ฑ(Stateless)์ ๋ณด์ํด์ฃผ๋ ๋๊ตฌ๋ค. ์ฟ ํค ์์ฒด๋ ์ธ์ฆ์๋จ์ด ์๋๋ค.์ธ์
: ์๋ฒ๊ฐ(์ธ์
DB) ์ธ์ฆ์ ๋ณด๋ฅผ ๊ฐ์ง๋ค. ํด๋ผ์ด์ธํธ๋ ์๋ฒ๊ฐ ์ฟ ํค์ ๋ด์ ๋ณด๋ด์ฃผ๋ ์ธ์
ID๋ง ๊ฐ์ง๋ค.ํ ํฐ : ํด๋ผ์ด์ธํธ๊ฐ ์ธ์ฆ์ ๋ณด๋ฅผ ๊ฐ์ง๋ค. ์๋ฒ๋ ํ ํฐ์ด ์ ํจํ์ง๋ง ํ์ธํ๋ค.Authentication๊ณผ Authorization ์ฐจ์ด์ Authentication(์ธ์ฆ / ์ ์ํ์ธ) : ํ์ฌ ์ฌ์ฉ์๊ฐ ๋๊ตฌ์ธ์ง ํ์ธํ๋ ๊ณผ์ . ํ์ฌ ๊ฑด๋ฌผ์ ์๋ก๋ค๋ฉด 1์ธต ์๋ด ๋ฐ์คํฌ์์ ๋ฐฉ๋ฌธ์๊ฐ ํด๋น ๊ฑด๋ฌผ์ ์ถ์
ํ ์ ์๋์ง ์ฌ๋ถ๋ฅผ ํ์ธํ๋ ๊ณผ์ .Authorization(ํ๊ฐ / ๊ถํ๋ถ์ฌ)..
[JS] ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ๋ฅผ ํ๋ณํ๋ 6๊ฐ์ง ๋ฐฉ๋ฒ
[JS] ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ๋ฅผ ํ๋ณํ๋ 6๊ฐ์ง ๋ฐฉ๋ฒ
2024.04.27navigator.userAgent๋ธ๋ผ์ฐ์ API์์ ์ ๊ณตํ๋ userAgent ๋ฌธ์์ด์ ํ์ธํ๋ ๋ฐฉ๋ฒ. userAgent๋ ์ ์ ๋๋ฐ์ด์ค์ ์ ๋ณด๋ฅผ ๋ด๊ณ ์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์์ navigator.userAgent ์์ฑ์ผ๋ก ์ ๊ทผํ ์ ์๋ค. userAgent ๋ฌธ์์ด์ด mobi, android iphone ๋ฑ ํค์๋๋ฅผ ๋ด๊ณ ์๋ค๋ฉด ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ๋ก ์ ์ํ๋ค๊ณ ๋ณผ ์ ์๋ค. ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ด์ง๋ง ์ฌ์ฉ์๊ฐ ์ง์ userAgent ๊ฐ์ ์์ ํ ์ ์๊ธฐ ๋๋ฌธ์ 100% ์ ๋ขฐํ ์ ์๋ค.// ๋ฐฉ๋ฒ 1// ์ ๊ท์์ ๊ธฐ๋ณธ์ ์ผ๋ก ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ถํ๋ค. i ํ๋๊ทธ๋ก ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ถํ์ง ์๋๋ก ํ ์ ์๋คif (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // ํ์ฌ ์ฅ์น๋ ๋ชจ๋ฐ..
[JS] ES Modules ๋ชจ๋ (Import / Export ์์คํ
)
[JS] ES Modules ๋ชจ๋ (Import / Export ์์คํ )
2024.04.26Intro1๊ฐ ํ์ผ์ ๋ชจ๋ ์ฝ๋๊ฐ ๋ค์ด๊ฐ ๊ฒ ๋ณด๋ค ์ฝ๋๋ค์ด ์๊ฐ ์ชผ๊ฐ์ ธ ์๋๊ฒ ๋ ์ข๋ค.๋ชจ๋์ ๋ณ์์ ํจ์๋ฅผ ๊ตฌ์ฑํ๋ ๋ ์ข์ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค.๋ชจ๋์ ์ ์์๋๋ฉด ์ฝ๋๋ฅผ ๊น๋ํ๊ฒ ์ ๋ฆฌํ ์ ์๋ค.๋ชจ๋ ๋๋ถ์ ์ฝ๋๋ค์ ์์ ํ์ผ๋ก ๋๋ ์ ์๊ณ , import / export ํ ์ ์๋ค.๋ชจ๋์ ํจ์์ ๋ณ์๋ฅผ ๋ชจ๋ ์ค์ฝํ์ ๋ฃ๊ณ , ๋ชจ๋ ์ค์ฝํ๋ฅผ ํตํด ๋ชจ๋ ํจ์ ์ฌ์ด์์ ๋ณ์๋ฅผ ๊ณต์ ํ ์ ์๋ค.๋ค์ด๋๋ฏน ๋ชจ๋์ ์ด์ฉํ๋ฉด ์ดํ๋ฆฌ์ผ์ด์
๋ก๋ฉ์ ๋ ๋น ๋ฅด๊ฒ ํ ์ ์๋ค. Named Exportimport { name } from "file"; ํ์ผ ํน์ ๋ชจ๋์ด ์ํ๋ ๋งํผ์ named exports๋ฅผ ๊ฐ์ง ์ ์๋คimport ํ๋ ค๋ ์ด๋ฆ์ export ํ๋ ํจ์(๋ณ์) ์ด๋ฆ๊ณผ ๊ฐ์์ผ ํ๋ค // math.jsexport..
[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 ๋ชจ๋ : ์ธ์ฆ ์ ๋ณด๋ฅผ ํ
์คํธ ํ์ผ๋ก Disk์ ์ ์ฅ. ์ฌ์ฉ์ ํ ๋๋ ํ ๋ฆฌ์ ์ผ๋ฐ ํ
์คํธ ํ์ผ๋ก ์ ์ฅ๋๋ฏ๋ก ์ธ์ฆ ์ ๋ณด ๋
ธ..
[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 ์์ฌํด๋..