2021/1/8 ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป ๋ฐ˜์‘ํ˜• ์›น ๋งŒ๋“ค๊ธฐ ๋”ฐ๋ผํ•˜๊ธฐ ๋„์ „

9rganizedChaosยท2021๋…„ 1์›” 8์ผ
2

HA๊ฐ€ ๋๋‚˜๊ณ  ๊ฐ„๋งŒ์— ์กฐ๊ธˆ ์—ฌ์œ ๋กœ์šด ์‹œ๊ฐ„์ด ์ฃผ์–ด์ ธ์„œ, ๋‹ค์Œ์ฃผ ์›”์š”์ผ๊นŒ์ง€ ์–ด๋–ป๊ฒŒ ์•Œ์ฐจ๊ฒŒ ๋ณด๋‚ด๋ณผ๊นŒ ํ•˜๋‹ค๊ฐ€...
๊ทธ๋™์•ˆ ๋ชฐ์•„์น˜๋Š” ๊ณผ์ œ์— ์‹œ๋„ํ•ด๋ณด์ง€ ๋ชปํ–ˆ๋˜ ์œ ํŠœ๋ธŒ ๋“œ๋ฆผ์ฝ”๋”ฉby์—˜๋ฆฌ ์ฑ„๋„์˜ ์›น์‚ฌ์ดํŠธ ๋”ฐ๋ผ ๋งŒ๋“ค๊ธฐ๋ฅผ ์ง์ ‘ํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค!

์ฒ˜์Œ์— ๋ฉˆ์ถ”๊ณ  ๋”ฐ๋ผํ•ด๋ณด๋ผ๊ณ  ํ•˜์…”์„œ,
๋‚˜๋Š” ์ฃ„๋‹ค divํƒœ๊ทธ๋กœ ๋„๋ฐฐ๋ฅผ ํ–ˆ๋Š”๋ฐ, ์—˜๋ฆฌ๋‹˜๊ป˜์„œ ๋งํ•ด์ฃผ์‹œ๊ธธ, ๋˜๋„๋ก์ด๋ฉด ๋งŒ๋“ค๋ ค๋Š” ์š”์†Œ์˜ ์˜๋ฏธ์™€ ๊ทผ์ ‘ํ•œ ํƒœ๊ทธ๋ฅผ ์“ฐ๋Š” ํŽธ์ด ์ข‹๋‹ค๊ณ  ํ•˜์…จ๋‹ค. ๋‚˜๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”๋„ ์ฒ˜์Œ์—๋Š” div๋กœ ๋Œ€์ถฉ ๊ฐ์ŒŒ๋Š”๋ฐ, ์—˜๋ฆฌ๋‹˜์€ nav ํƒœ๊ทธ๋ฅผ ์“ฐ์…จ๋‹ค...

ํ•จ๊ป˜ ๋”ฐ๋ผํ•ด๋ณด๋ฉด์„œ ์–ป์€ ์ค‘์š”ํ•œ ๋ถ€๋ถ„๋“ค์„ ์ •๋ฆฌํ•ด๋ณธ๋‹ค...

1. ๋ฐ˜์‘ํ˜• ์›น, ๋ฏธ๋””์–ด์ฟผ๋ฆฌ

์ฐฝ์ด ์ž‘์•„์ง€๋ฉด ํ™”๋ฉด ๊ตฌ์„ฑ์ด ๋‹ฌ๋ผ์ง€๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฑธ ํ•ด๋ณด๋ผ๊ณ  ํ–ˆ์„ ๋•Œ, ์ œ์ผ ๋จผ์ € ๋– ์˜ฌ๋ฆฐ ๊ฑด, js์—์„œ ํ™”๋ฉด ๋น„์œจ?์— ๊ด€๋ จ๋œ ์ด๋ฒคํŠธ๋ฅผ ๊ฒ€์ƒ‰ํ•ด์„œ, ์ด๋ฒคํŠธ๊ฐ€ ์‹คํ–‰๋˜๋ฉด ๊ธฐ์กด ํŽ˜์ด์ง€ ๊ตฌ์„ฑ์„ ์‹น ์ง€์šฐ๊ณ , ๊ฑฐ๊ธฐ์— ์ƒˆ๋กœ์šด ๊ตฌ์„ฑ์„ ๋นŒ๋“œ์—…ํ•˜๋„๋ก... ๋ญ ์•”ํŠผ ๊ทธ๋Ÿฐ ์ฝ”๋”ฉ์ดˆ๋ณด๋‹ค์šด ์ƒ๊ฐ์„ ํ–ˆ๋Š”๋ฐ, ๋ง‰์ƒ ์˜์ƒ์„ ๋ณด๋‹ˆ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ž€ ๊ฒƒ์„ ์‚ฌ์šฉํ•˜์…จ๋‹ค...

๊ธฐ์กด์— ํ•˜๋˜๋Œ€๋กœ cssํŒŒ์ผ์„ ์ž‘์„ฑํ•˜๊ณ , ์•„๋ž˜ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์งœ์ฃผ๋‹ˆ!!

๊ฐ€๋ฟ?ํ•˜๊ฒŒ ๋ฐ˜์‘ํ˜• ์›น์˜ ํ‹€์ด ๋งŒ๋“ค์–ด์กŒ๋‹ค.

์›๋ž˜ ์ด๋Ÿฐ ๋ชจ์–‘์ด๋˜ ๋„ค๋น„๊ฒŒ์ด์…˜๋ฐ”๊ฐ€, ์ฐฝ์˜ ๋„“์ด๊ฐ€ ์ข์•„์ง€๋ฉด...

์ด๋ ‡๊ฒŒ ๋ณ€ํ•œ๋‹ค! ("I am the Aespa. I cannot be replaced." ์ด๊ฑฐ ๋ชจ๋ฅด๋Š” ๊ฑฐ ์ ˆ๋Œ€์•„๋‹˜๐Ÿ˜‡ )

๋„˜๋„˜ ๋†€๋ผ์šด ์ผ...
์ฐพ์•„๋ณด๋‹ˆ and, ์‰ผํ‘œ, not ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด ์ข€ ๋” ์„ธ๋ฐ€ํ•œ ์กฐ๊ฑด์„ ๋งŒ์กฑ์‹œํ‚ค๋ฉฐ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.

2. .toggle()

ํ† ๊ธ€์„ ์š”์•ฝํ•˜๋ฉด, '๋ณด์ด๋ฉด ๋ณด์ด์ง€ ์•Š๊ฒŒ, ์•ˆ ๋ณด์ด๋ฉด ๋ณด์ด๊ฒŒ' ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด์ „ ์ƒํƒœ์— ๋”ฐ๋ผ ์ด๋ฒคํŠธ๊ฐ€ ๊ฒฐ์ •๋˜๋Š” ๊ฑฐ๋ผ๊ณ  ์ดํ•ดํ•ด๋„ ๋ ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค. ์Šคํƒ ๋“œ ์Šค์œ„์น˜์ฒ˜๋Ÿผ, ์ผœ์ ธ์žˆ์„ ๋•Œ ๋ˆ„๋ฅด๋ฉด, ๊บผ์ง€๊ณ , ๊บผ์ ธ์žˆ์„ ๋•Œ ๋ˆ„๋ฅด๋ฉด, ์ผœ์ง€๊ณ  ์ด๋Ÿฐ์‹์œผ๋กœ!
์˜ค๋ฅธ์ชฝ ์ƒ๋‹จ์— ํ–„๋ฒ„๊ฑฐ ์•„์ด์ฝ˜์„ ํด๋ฆญํ•˜๋ฉด, ๋ฐ‘์— ๋ฉ”๋‰ด๊ฐ€ ๋ณด์ด๊ณ , ๋‹ค์‹œ ํด๋ฆญํ•˜๋ฉด ์•ˆ๋ณด์ด๊ณ ... ์ด๊ฑธ ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ •์—์„œ, ๋‚˜๋Š” ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๋•Œ ๊ฐ™์ด valid, invalid๋ฅผ ๋”ฐ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์‹์œผ๋กœ ์ ‘๊ทผํ•ด์•ผ ํ•˜๋‚˜ ์ƒ๊ฐํ–ˆ์—ˆ๋‹ค.

toggleBtn.addEventListener('click', () => {
  menu.classList.toggle('active')
  icons.classList.toggle('active')
})

๊ทธ๋Ÿฐ๋ฐ ์ด๋Ÿฐ ์‹์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์‹œ๋Š” ๊ฒƒ์„ ๋ณด์•˜๋‹ค. ํด๋ž˜์Šค๋ฆฌ์ŠคํŠธ์— 'active'๊ฐ€ ์žˆ์œผ๋ฉด, ์—†์• ์ฃผ๊ณ , ์—†์œผ๋ฉด ๋„ฃ์–ด์ฃผ๊ณ ... ์œ ์šฉํ•œ ๊ธฐ๋Šฅ์ธ๋“ฏ ์‹ถ๋‹ค.


์šฐ์ธก ์ƒ๋‹จ์˜ ํ–„๋ฒ„๊ฑฐ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์ด๊ฒŒ ๋ณด์˜€๋‹ค ์•ˆ ๋ณด์˜€๋‹ค๊ฐ€ ๋ฐ˜๋ณต๋œ๋‹ค!

3. flex box (justify-content)

.navigation-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color);
  padding: 8px 12px;
}

์ด ๋ถ€๋ถ„์„ ํฌ๊ฒŒ ๋กœ๊ณ , ๋ฉ”๋‰ด, ์•„์ด์ฝ˜์œผ๋กœ ๋‚˜๋ˆ„๊ณ  ์–ด๋–ป๊ฒŒ ๋น„์œจ์„ ๋‚˜๋ˆ ์•ผ ํ•˜๋‚˜ ์ƒ๊ฐํ•ด์„œ ๋‚˜๋Š” ์ฒ˜์Œ์—, ๊ทธ๋ƒฅ ์ „์ฒด์— ๋””์Šคํ”Œ๋ ˆ์ด ํ”Œ๋ ‰์Šค ๋จน์ด๊ณ  ์„ธ ๋ถ€๋ถ„์— ๊ฐ๊ฐ ํ”Œ๋ ‰์Šค ์š”์†Œ์—์„œ ์ˆซ์ž๋กœ ๋น„์œจ ์ถ”๊ฐ€ํ•ด์ฃผ๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋Š”๋ฐ.
์ €์Šคํ‹ฐํŒŒ์ด ์ฝ˜ํ…์ธ ๋ผ๋Š” ์š”๋งํ•œ ์†์„ฑ์ด ์žˆ์—ˆ๋‹ค.

๋‚˜๋Š” ์›๋ž˜ ํ”Œ๋ ‰์Šค๋นก์Šค๊ฐ€ ๋ญ๊ฐ€ ์œ ์šฉํ•œ์ง€ 1๋„ ๋ชจ๋ฅด๊ฒ ์—ˆ์Œ...
์ฒ˜์Œ์— ์•”๊ฒƒ๋„ ๋ชจ๋ฅด๊ณ  ํŠธ์œ„ํ‹€๋Ÿฌ ๋งŒ๋“ค ๋•Œ ์˜คํžˆ๋ ค ๋‚ด๋ง˜๋Œ€๋กœ ์•ˆ ๋˜๊ธธ๋ž˜ ํ”Œ๋ ‰์Šค๋ฐ•์Šค ๋„˜ ์งœ์ฆ๋‚œ๋‹ค ์ƒ๊ฐํ–ˆ๋Š”๋ฐ...
์ด๋Ÿฐ ๊ฑฐ ๋ณด๋‹ค๋ณด๋‹ˆ ๋ญ”๊ฐ€ ์ข‹์€ ๊ธฐ๋Šฅ์ธ๊ฐ€ ์‹ถ๊ธฐ๋„ ํ•˜๋‹ค...




์ €์Šคํ‹ฐํŒŒ์ด ์ฝ˜ํ…์ธ ๋ผ๋Š” ์†์„ฑ์— ๊ฐ๊ฐ 'flex-start', 'flex-end', 'center', 'space-around'๋ฅผ ์ž…๋ ฅํ•ด์ฃผ๋ฉด ์œ„์™€ ๊ฐ™์ด ์ž๋™์œผ๋กœ ์ •๋ ฌ์ด๋˜๋ฉด์„œ, ๋‹ค์ฑ„๋กœ์šด ๋ฐฉ์‹์œผ๋กœ '์—์ŠคํŒŒ๋Š” ๋‚˜์•ผ ๋‘˜์ด ๋  ์ˆœ ์—†์–ด'๋ฅผ ์ถœ๋ ฅํ•ด์ค€๋‹ค. ๋„˜๋„˜ ์ข‹์€ ๊ธฐ๋Šฅ... ๋งจ ์œ„์—์„œ ๋ณด์—ฌ์ค€, ์—˜๋ฆฌ๋‹˜์ด ์˜์ƒ์—์„œ ์“ฐ์‹œ๋Š” ๊ฒƒ์€ 'space-between' ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์—ฌ๊ธฐ์— ๋“ค์–ด๊ฐ€๋ฉด ๋‚˜์˜จ๋‹ค... ์˜์–ด๋‹ˆ๊นŒ ๋“ค์–ด๊ฐ€์„œ ๊ทธ๋ฆผ ๊ตฌ๊ฒฝ์œ„์ฃผ๋กœ ํ•˜๊ณ  ์˜ค์„ธ์˜ค...๐Ÿ˜‰

4. ์•„์ด์ฝ˜ ๊ฐ€์ ธ์˜ค๊ธฐ

์ด์ „์— ์œ ํšจ์„ฑ ๊ฒ€์‚ฌํ•˜๋ฉด์„œ ์•„์ด์ฝ˜ ์–ด๋–ป๊ฒŒ ๊ฐ€์ ธ์˜ค๋Š” ๊ฑด์ง€ ๋ชฐ๋ผ์„œ ๊ทธ๋ƒฅ ์‹œ๋„๋„ ๋ชปํ•ด๋ณด๊ณ  ํฌ๊ธฐํ–ˆ๋Š”๋ฐ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๋”ฐ๋ผํ•˜๊ธฐ ํ•ด๋ณด๋ฉด์„œ ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

์œ„ ์ด๋ฏธ์ง€์— ๋ณด์ด๋Š” ์–ด๋ฉ”์ด์ง•ํ•œ ์‹ธ์ดํŠธ์— ๋“ค์–ด๊ฐ€์„œ ๊ฐ€์ž…ํ•˜๊ณ , ํ‚คํŠธ๋ฅผ ๊ฐ€์ ธ์™€์„œ

์ด๋ ‡๊ฒŒ ์ž…๋ ฅ์„ ํ•ด์ฃผ๋‹ˆ ์•„์ด์ฝ˜์ด ๋‚˜์˜ค๋”๋ผ๋Š” ๋†€๋ผ์šด ์ด์•ผ๊ธฐ...

5. ๊ทธ ์™ธ

๊ทธ ์™ธ์—๋„ ์‚ฌ์‹ค ์‹œ๊ฐ„์— ์ซ“๊ฒจ์„œ ํ”„๋ฆฌ ์ฝ”์Šค์—์„œ ๋ฐฐ์› ์ง€๋งŒ ์จ๋จน์–ด๋ณด์ง€ ๋ชปํ–ˆ๋˜ ๊ฒƒ๋“ค ์จ๋จน์–ด ๋ณด์•˜๋‹ค. css์—์„œ root๋กœ ์ƒ‰๊น” ๋ณ€์ˆ˜ ์ง€์ •ํ•ด์ฃผ๋Š” ๊ฒƒ, ๊ทธ๋ฆฌ๊ณ  ํฐํŠธ ๊ตฌ๊ธ€์—์„œ ๊ฐ€์ ธ์™€์„œ ์“ฐ๋Š”๊ฑฐ, ์„ฑ๊ตญ๋‹˜์ด ํŽ˜์–ดํ•  ๋•Œ ์•Œ๋ ค์ฃผ์…จ๋˜ VS Code์—์„œ ํƒœ๊ทธ๋งŒ๋“ค๋•Œ ๋‹จ์ถ•ํ‚ค?๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ ๋“ฑ๋“ฑ ์•”ํŠผ ์žผ๋‚ฌ์Œ...

๐Ÿšจ ์•„์ง ๋‹ค ์ดํ•ด ๋ชปํ•œ ๋ถ€๋ถ„

  • ํฌ์ง€์…˜ ์†์„ฑ, ์•ฑ์†”๋ฃจํŠธ, ๋ฆด๋ ˆ์ดํ‹ฐ๋ธŒ ์ด๋Ÿฐ ๋ถ„๋“ค...
  • ํŒจ๋”ฉ๋ง๊ณ  ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ์ˆ˜์ง ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜๋Š” ๊ฒƒ???
profile
๋ถ€์ •ํ™•ํ•œ ์ •๋ณด๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๋Š” ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๋น ๋ฅด๊ฒŒ ์ˆ˜์ •ํ† ๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค, ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

0๊ฐœ์˜ ๋Œ“๊ธ€