Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

์ œ๋Œ€๋กœ ๋ฐฐ์šฐ๋Š” HTML + CSS: ์ž…๋ฌธ๋ถ€ํ„ฐ ์‹ค์ „๊นŒ์ง€ ์™„๋ฒฝ ์ •๋ณต Part1 - [๊ธฐ์ดˆํŽธ]

โ€œ์ œ๋Œ€๋กœ ๋ฐฐ์šฐ๋Š” HTML + CSS: ์ž…๋ฌธ๋ถ€ํ„ฐ ์‹ค์ „๊นŒ์ง€ ์™„๋ฒฝ ์ •๋ณต Part1โ€ ๊ฐ•์˜๋Š” ์ธํ„ฐ๋„ท๊ณผ ์›น์˜ ์ž‘๋™ ์›๋ฆฌ๋ฅผ ๊นŠ์ด ์ดํ•ดํ•˜๊ณ , ์‹ค์Šต ์œ„์ฃผ์˜ ์ปค๋ฆฌํ˜๋Ÿผ์„ ํ†ตํ•ด HTML/CSS ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํ•˜๊ฒŒ ์ตํžˆ๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜๋งŒ ๋“ค์œผ๋ฉด ์›น ๊ฐœ๋ฐœ์˜ ํ•„์ˆ˜ ๊ฐœ๋…์„ ํ™•์‹คํžˆ ์žก๊ณ , ๋ฐ”๋กœ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

9๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

Thumbnail

์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • HTML & CSS์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ตํžˆ๊ณ , ์›น ํŽ˜์ด์ง€ ๊ตฌ์กฐ์™€ ์Šคํƒ€์ผ๋ง ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.

  • ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด ์ ‘๊ทผ์„ฑ์ด ๋†’์€ ์›น ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

  • ์ธํ„ฐ๋„ทยท์›น์‚ฌ์ดํŠธ ๋™์ž‘ ์›๋ฆฌ ๋ฐ HTTP, DNS ๋“ฑ ํ•ต์‹ฌ ๊ธฐ์ˆ ์˜ ์—ญํ• ์„ ์ดํ•ดํ•˜์—ฌ, ๋” ๊นŠ์ด ์žˆ๋Š” ์›น ์ง€์‹์„ ์Œ“์Šต๋‹ˆ๋‹ค.

  • ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ค์ •๋ถ€ํ„ฐ ๋„๊ตฌ ํ™œ์šฉ(Visual Studio Code, Live Server ๋“ฑ)์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์Šต๋“ํ•ฉ๋‹ˆ๋‹ค.

  • CSS๋กœ ํ…์ŠคํŠธ, ์ƒ‰์ƒ, ๋ฐฐ๊ฒฝ, ๋ ˆ์ด์•„์›ƒ ๋“ฑ์„ ํšจ๊ณผ์ ์œผ๋กœ ์Šคํƒ€์ผ๋งํ•˜๋Š” ๋ฒ•์„ ํ„ฐ๋“ํ•ฉ๋‹ˆ๋‹ค.

  • Normalize.css ๊ฐ™์€ ์œ ์šฉํ•œ ๋„๊ตฌ ์‚ฌ์šฉ๋ฒ•์„ ์ตํ˜€, ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๋ฅผ ์ค„์ž…๋‹ˆ๋‹ค.

  • ๋ฐ•์Šค ๋ชจ๋ธ, ๋””์Šคํ”Œ๋ ˆ์ด ์†์„ฑ ๋“ฑ์„ ํ™œ์šฉํ•ด ์›น ํŽ˜์ด์ง€ ๊ตฌ์กฐ๋ฅผ ์ž์œ ์ž์žฌ๋กœ ์„ค๊ณ„ํ•˜๋Š” ๋Šฅ๋ ฅ์„ ๊ธฐ๋ฆ…๋‹ˆ๋‹ค.

  • ์ดˆ๊ธ‰๋ถ€ํ„ฐ ์‹ฌํ™”๊นŒ์ง€ ๋‹จ๊ณ„์  ํ•™์Šต์œผ๋กœ, ์‹ค๋ฌด ํ”„๋กœ์ ํŠธ์— ์ ์šฉ ๊ฐ€๋Šฅํ•œ ์ง€์‹์„ ์Šต๋“ํ•ฉ๋‹ˆ๋‹ค.

  • ๋‹ค์–‘ํ•œ ์‹ค์Šต ๋ฌธ์ œ๋ฅผ ์ง์ ‘ ํ•ด๊ฒฐํ•˜๋ฉฐ, ์ฝ”๋“œ ์ž‘์„ฑ๊ณผ ๋””๋ฒ„๊น… ์‹ค๋ ฅ์„ ํ‚ค์›๋‹ˆ๋‹ค.

  • ์›น ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ์ง€์‹์„ ์ „๋ฐ˜์ ์œผ๋กœ ํ™•๋ฆฝํ•˜์—ฌ, ์ดํ›„ JavaScript๋‚˜ ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ํ™•์žฅํ•˜๊ธฐ ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค.

์›น ๊ฐœ๋ฐœ, ๋ง‰์—ฐํ•˜๊ฒŒ ๋А๊ปด์ง€์…จ๋‚˜์š”?

์ด ๊ฐ•์˜๋Š” ๋‹จ์ˆœํžˆ HTML/CSS ๋ฌธ๋ฒ•๋งŒ ํ›‘๊ณ  ์ง€๋‚˜๊ฐ€๋Š” ์ž…๋ฌธ ๊ฐ•์˜๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

  • ์ธํ„ฐ๋„ท๊ณผ ์›น์‚ฌ์ดํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€,

  • HTTP๋‚˜ DNS์™€ ๊ฐ™์€ ๊ธฐ์ˆ ์ด ์™œ ์ค‘์š”ํ•œ์ง€,

  • ๋ธŒ๋ผ์šฐ์ €์™€ ์„œ๋ฒ„๊ฐ€ ์–ด๋–ป๊ฒŒ ์†Œํ†ตํ•˜๋Š”์ง€,

์ด๋Ÿฐ ๊ทผ๋ณธ์ ์ธ ์›๋ฆฌ๋ฅผ ๋จผ์ € ํƒ„ํƒ„ํžˆ ์žก์•„ ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๊ธฐ์ดˆ๋ฅผ ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด์•ผ๋ง๋กœ, ๋” ํšจ์œจ์ ์œผ๋กœ ๋ฐฐ์šฐ๊ณ  ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•˜๋Š” ์ง€๋ฆ„๊ธธ์ด๋‹ˆ๊นŒ์š”.

๐Ÿ’ก ์ด ๊ฐ•์˜๋Š” ๋‹ค๋ฅธ โ€˜์ž…๋ฌธ ๊ฐ•์˜โ€™์™€ ๋ฌด์—‡์ด ๋‹ค๋ฅผ๊นŒ์š”?

  1. ์ฒด๊ณ„์ ์ธ ์ปค๋ฆฌํ˜๋Ÿผ

    • HTML/CSS ๋ฌธ๋ฒ•์€ ๋ฌผ๋ก , ์›น์˜ ์ž‘๋™ ์›๋ฆฌ, ๋„คํŠธ์›Œํฌ ๊ธฐ์ดˆ(HTTP, DNS)๊นŒ์ง€ ๊ผผ๊ผผํ•˜๊ฒŒ ์งš์–ด๋“œ๋ฆฝ๋‹ˆ๋‹ค.

    • ์ด๋ ‡๊ฒŒ ์Œ“์€ ๊ธฐ์ดˆ ์ง€์‹์€ ํ›—๋‚  JavaScript, React, Vue ๋“ฑ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ์„ ๋ฐฐ์šธ ๋•Œ๋„ ํฌ๊ฒŒ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

  2. ์‹ค์Šต ์œ„์ฃผ์˜ ์ง„ํ–‰

    • ๊ฐ ์„น์…˜๋งˆ๋‹ค ์—ฐ์Šต๋ฌธ์ œ๋ฅผ ํ†ตํ•ด ์ง์ ‘ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    • ์ดˆ๋ณด์ž๋„ ๋Šฅ๋™์ ์œผ๋กœ ํ•™์Šตํ•˜๋ฉฐ, ์‹ค๋ฌดํ˜• ๊ฐ๊ฐ์„ ๋น ๋ฅด๊ฒŒ ์ตํžˆ๋„๋ก ์„ค๊ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

  3. ์ „๋ฌธ๊ฐ€ ํŒ€์˜ ๋…ธํ•˜์šฐ

    • ํ•ด์™ธ ๋ช…๋ฌธ๋Œ€ ์ปดํ“จํ„ฐ ๊ณตํ•™ ์ „๊ณต & ๊ธ€๋กœ๋ฒŒ IT ๊ธฐ์—… ์ถœ์‹  ๊ฐœ๋ฐœ์ž๋“ค์ด ํ•ฉ์‹ฌํ•ด ๋งŒ๋“  [์šฐ๋ฆฌ ๋™๋„ค ์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค]์˜ ์ฝ˜ํ…์ธ ์ž…๋‹ˆ๋‹ค.

    • ์‰ฝ๊ณ  ์นœ๊ทผํ•œ ์„ค๋ช… ์†์— ์‹ค๋ฌด์—์„œ ๋ฐ”๋กœ ์“ธ ์ˆ˜ ์žˆ๋Š” ๋…ธํ•˜์šฐ๊ฐ€ ๋…น์•„ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š”

์ฒ˜์Œ ์›น ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•˜๋Š” ์™„์ „ ์ž…๋ฌธ์ž

HTML/CSS ๊ธฐ๋ณธ๊ธฐ๋ฅผ ํƒ„ํƒ„ํžˆ ๋‹ค์ง€๊ณ  ์‹ถ์€ ๋ถ„

์ธํ„ฐ๋„ท๊ณผ ์›น์‚ฌ์ดํŠธ์˜ ์ž‘๋™ ์›๋ฆฌ๋ฅผ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์•Œ๊ณ  ์‹ถ์€ ๋ถ„

์ˆ˜๊ฐ• ํ›„์—๋Š”...

  • ์ธํ„ฐ๋„ท & ์›น์‚ฌ์ดํŠธ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ์ œ๋Œ€๋กœ ์ดํ•ดํ•ด, ๋ง‰์—ฐํ•จ์ด ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

  • HTML ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ถ€ํ„ฐ CSS ๋ ˆ์ด์•„์›ƒ(๋ฐ•์Šค ๋ชจ๋ธ, ๋””์Šคํ”Œ๋ ˆ์ด)๊นŒ์ง€ ์ž์œ ์ž์žฌ๋กœ ๋‹ค๋ฃจ์–ด, ๊ตฌ์กฐ์ ์ด๊ณ  ์•„๋ฆ„๋‹ค์šด ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • โ€œHTML/CSS๋Š” ์•Œ๊ธด ์•„๋Š”๋ฐโ€ฆโ€ ํ•˜๊ณ  ๋ง‰์—ฐํ–ˆ๋˜ ๋ถ„๋„, ์ž์‹  ์žˆ๊ฒŒ ํ”„๋กœ์ ํŠธ์— ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ์„ ๋งŒํผ ๊ธฐ์ดˆ๊ฐ€ ํŠผํŠผํ•ด์ง‘๋‹ˆ๋‹ค.

  • Normalize.css๋ฅผ ํ™œ์šฉํ•ด ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ํ˜ธํ™˜์„ฑ ์ด์Šˆ๋ฅผ ์†์‰ฝ๊ฒŒ ํ•ด๊ฒฐํ•˜๊ณ , ๋” ๋‚˜์€ UX๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํ–ฅํ›„ JavaScript๋‚˜ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๋ฐฐ์šธ ๋•Œ๋„ ํ›จ์”ฌ ์ˆ˜์›”ํ•˜๊ฒŒ ์ ์‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์šฐ๋ฆฌ ๋™๋„ค ์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค!

์šฐ๋ฆฌ๋™๋„ค์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค๋Š” ์นด๋„ค๊ธฐ ๋ฉœ๋ก , ์›Œ์‹ฑํ„ด, ํ† ๋ก ํ† , ์›Œํ„ฐ๋ฃจ ๋“ฑ ๋ถ๋ฏธ์˜ ์ฃผ์š” ๋Œ€ํ•™์—์„œ ์ปดํ“จํ„ฐ๊ณตํ•™์„ ์ „๊ณตํ•˜๊ณ , Google, Microsoft, Meta ๋“ฑ ๊ธ€๋กœ๋ฒŒ IT ๊ธฐ์—…์—์„œ ์‹ค๋ฌด ๊ฒฝํ—˜์„ ์Œ“์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ํ•จ๊ป˜ ๋งŒ๋“  ๊ต์œก ๊ทธ๋ฃน์ž…๋‹ˆ๋‹ค.

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

โ€œ์šฐ๋ฆฌ๊ฐ€ ๊ณต๋ถ€ํ•˜๋˜ ์ด ๋ฐฉ์‹, ๊ทธ๋Œ€๋กœ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์—๊ฒŒ๋„ ์ „ํ•˜๋ฉด ์–ด๋–จ๊นŒ?โ€

๊ทธ ๋ฌผ์Œ์ด ๋ฐ”๋กœ ์šฐ๋ฆฌ ๋™๋„ค ์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค์˜ ์ถœ๋ฐœ์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ๋Š” ์•ฝ 40๋ช…์˜ ํ˜„์ง ๊ฐœ๋ฐœ์ž์™€ ์ปดํ“จํ„ฐ๊ณตํ•™ ์ „๊ณต ๋Œ€ํ•™์ƒ๋“ค์ด ๊ฐ์ž์˜ ์ „๋ฌธ ๋ถ„์•ผ๋ฅผ ๋งก์•„, ์ž…๋ฌธ๋ถ€ํ„ฐ ์‹ค์ „๊นŒ์ง€ ์•„์šฐ๋ฅด๋Š” ์ปค๋ฆฌํ˜๋Ÿผ์„ ์ง์ ‘ ์„ค๊ณ„ํ•˜๊ณ  ๊ฐ•์˜ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ์ˆœํ•œ ์ง€์‹ ์ „๋‹ฌ์„ ๋„˜์–ด, ์ง„์งœ ๊ฐœ๋ฐœ์ž์˜ ์‹œ์„ ์œผ๋กœ ๋ฐฐ์šฐ๊ณ  ํ•จ๊ป˜ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

โ€œ์ง„์งœ ๊ฐœ๋ฐœ์ž๋Š”, ์ง„์งœ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋ฐฐ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค.โ€

์ €ํฌ๋Š” ์›น ๊ฐœ๋ฐœ์˜ ์ „ ๊ณผ์ •์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์ฒด๊ณ„์ ์œผ๋กœ ๋‹ค๋ฃจ๋˜, ์ด๋ก ์— ๋จธ๋ฌด๋ฅด์ง€ ์•Š๊ณ  ์‹ค์Šต๊ณผ ์‹ค์ „ ์ค‘์‹ฌ์˜ ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด ์‹ค๋ ฅ์„ ํ‚ค์›Œ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
์ˆ˜๊ฐ•์ƒ ํ•œ ์‚ฌ๋žŒ, ํ•œ ์‚ฌ๋žŒ์˜ ์„ฑ์žฅ์„ ํ•จ๊ป˜ ๊ณ ๋ฏผํ•˜๊ณ  ์ด๋Œ์–ด๊ฐ€๋Š” ๊ฒƒ์ด ์šฐ๋ฆฌ์˜ ์ฒ ํ•™์ž…๋‹ˆ๋‹ค.

์šฐ๋ฆฌ์˜ ์ฒ ํ•™์€ ๋ถ„๋ช…ํ•ฉ๋‹ˆ๋‹ค.
"์ง„์ •ํ•œ ๋ฐฐ์›€์€ ์‹ค์ฒœ์—์„œ ์˜ค๊ณ , ์„ฑ์žฅ์€ ํ•จ๊ป˜ํ•  ๋•Œ ์™„์„ฑ๋œ๋‹ค."

๊ฐœ๋ฐœ์„ ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” ์ž…๋ฌธ์ž๋ถ€ํ„ฐ, ์‹ค๋ฌด ๋Šฅ๋ ฅ์„ ํ‚ค์šฐ๊ณ  ์‹ถ์€ ์ทจ์—… ์ค€๋น„์ƒ, ์ง„๋กœ๋ฅผ ํƒ์ƒ‰ ์ค‘์ธ ์ฒญ์†Œ๋…„๊นŒ์ง€.
์šฐ๋ฆฌ๋™๋„ค์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค๋Š” ๋ชจ๋‘์˜ ์ถœ๋ฐœ์ ์ด์ž, ํ•จ๊ป˜ ๊ฑท๋Š” ๋“ ๋“ ํ•œ ๋™๋ฐ˜์ž๊ฐ€ ๋˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ, ํ˜ผ์ž ๊ณ ๋ฏผํ•˜์ง€ ๋งˆ์„ธ์š”.
์šฐ๋ฆฌ๋™๋„ค์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„์˜ ์„ฑ์žฅ์„ ํ•จ๊ป˜ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.


Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

โ€œWhat if we shared this way of learning with others?โ€

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertiseโ€”designing and delivering a curriculum that spans from foundational knowledge to real-world development.
Weโ€™re not just here to teachโ€”weโ€™re here to help you see through the lens of real developers and grow together.

โ€œTo become a real developer, you must learn from real developers.โ€

Our courses take you through the entire web development journeyโ€”from start to finishโ€”focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learnerโ€™s growth and are committed to supporting your path every step of the way.

Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpadโ€”and your trusted companion on the journey.

You donโ€™t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

์„น์…˜ 1: [์šฐ๋ฆฌ ๋™๋„ค ์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค] ์›น ๊ฐœ๋ฐœ ํ•„์ˆ˜์ง€์‹

  • ์ธํ„ฐ๋„ท & ์›น์‚ฌ์ดํŠธ๊ฐ€ ๋™์ž‘ํ•˜๋Š” ๊ทผ๋ณธ ์›๋ฆฌ

  • HTTP, DNS๊ฐ€ ์›น ๊ฐœ๋ฐœ์—์„œ ์ค‘์š”ํ•œ ์ด์œ 

  • ์‹ค๋ฌด ๋…ธํ•˜์šฐ: ๋„๋ฉ”์ธยท์„œ๋ฒ„ ์—ฐ๊ฒฐ ์‹œ ์™œ ์•Œ์•„์•ผ ํ•˜๋Š”์ง€

์„น์…˜ 2: HTML Level 1

  • HTML ๋ฌธ์„œ ๊ตฌ์กฐ & ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ

  • ํผ(form), ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด, ์ฃผ์„ ๋“ฑ ๋‹ค์–‘ํ•œ HTML ํƒœ๊ทธ

  • ๋ ˆ์ด์•„์›ƒ ์—ฐ์Šต: ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋กœ ๊ตฌ์กฐ์  ์›นํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

์„น์…˜ 3: CSS Level 1 (Part1)

  • CSS ์„ ํƒ์ž์™€ ๋ช…์‹œ๋„

  • ํ…์ŠคํŠธ, ๋ฐฐ๊ฒฝ, ์ƒ‰์ƒ, ํฐํŠธ ์‚ฌ์ด์ฆˆ ๋“ฑ ๊ธฐ๋ณธ ์Šคํƒ€์ผ๋ง

  • ์‹ค์Šต & ์—ฐ์Šต๋ฌธ์ œ: ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉฐ ์Šคํƒ€์ผ์„ ์ง์ ‘ ์ ์šฉํ•ด ๋ณด๊ธฐ

์„น์…˜ 4: CSS Level 1 (Part2)

  • ๋””์Šคํ”Œ๋ ˆ์ด(display), ๋ฐ•์Šค ๋ชจ๋ธ(box model)

  • ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ(overflow)์™€ ๋ฐ•์Šค ์‚ฌ์ด์ง•(box-sizing) ๊ฐœ๋…

  • Normalize.css๋กœ ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ํ˜ธํ™˜์„ฑ ๋งž์ถ”๊ธฐ

  • ์š”์•ฝ PDF๋กœ ํ•ต์‹ฌ ๊ฐœ๋… ๋ณต์Šต

์‹ค์Šต ํ™˜๊ฒฝ

  • Visual Studio Code: ์ดˆ๋ณด์ž๋„ ์‰ฝ๊ฒŒ ์„ค์น˜ & ์‚ฌ์šฉ ๊ฐ€๋Šฅ

  • Live Server: HTML/CSS ์ฝ”๋“œ๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ™•์ธ

  • Normalize.css: ๋ธŒ๋ผ์šฐ์ € ์Šคํƒ€์ผ ์ดˆ๊ธฐํ™”

ํ•™์Šต ์ž๋ฃŒ

  • ๋งค ๊ฐ•์˜๋งˆ๋‹ค PDF ์š”์•ฝ ์ž๋ฃŒ ์ œ๊ณต

  • ์—ฐ์Šต๋ฌธ์ œ ๋ฐ ํ’€์ด ์˜ˆ์‹œ๋กœ ์Šค์Šค๋กœ ์‹ค์Šตยทํ™•์ธ ๊ฐ€๋Šฅ

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์›น ๊ฐœ๋ฐœ ์ž…๋ฌธ์„ ๊ณ ๋ฏผ ์ค‘์ธ ์™„์ „ ์ดˆ๋ณด์ž

  • HTML/CSS ๊ธฐ๋ณธ ๊ฐœ๋…์„ ํ™•์‹คํžˆ ๋‹ค์ง€๊ณ  ์‹ถ์€ ๋ถ„

  • ์ธํ„ฐ๋„ท๊ณผ ์›น์‚ฌ์ดํŠธ์˜ ์ž‘๋™ ์›๋ฆฌ๋ฅผ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

  • HTML ํƒœ๊ทธ(์‹œ๋งจํ‹ฑ ํƒœ๊ทธ ํฌํ•จ)์˜ ์šฉ๋„์™€ ์‚ฌ์šฉ๋ฒ•์„ ์ง์ ‘ ์‹ค์Šตํ•ด ๋ณด๊ณ  ์‹ถ์€ ๋ถ„

  • CSS ์†์„ฑ๊ณผ ๋ ˆ์ด์•„์›ƒ ์„ค๊ณ„๋ฅผ ๋งˆ์Šคํ„ฐํ•˜์—ฌ ์•„๋ฆ„๋‹ค์šด ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
nhcodingstudio์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์šฐ๋ฆฌ๋™๋„ค์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค!

์šฐ๋ฆฌ๋™๋„ค์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค๋Š” ์นด๋„ค๊ธฐ ๋ฉœ๋ก , ์›Œ์‹ฑํ„ด, ํ† ๋ก ํ† , ์›Œํ„ฐ๋ฃจ ๋“ฑ ๋ถ๋ฏธ์˜ ์ฃผ์š” ๋Œ€ํ•™์—์„œ ์ปดํ“จํ„ฐ๊ณตํ•™์„ ์ „๊ณตํ•˜๊ณ , Google, Microsoft, Meta ๋“ฑ ๊ธ€๋กœ๋ฒŒ IT ๊ธฐ์—…์—์„œ ์‹ค๋ฌด ๊ฒฝํ—˜์„ ์Œ“์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ํ•จ๊ป˜ ๋งŒ๋“  ๊ต์œก ๊ทธ๋ฃน์ž…๋‹ˆ๋‹ค.

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

โ€œ์šฐ๋ฆฌ๊ฐ€ ๊ณต๋ถ€ํ•˜๋˜ ์ด ๋ฐฉ์‹, ๊ทธ๋Œ€๋กœ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์—๊ฒŒ๋„ ์ „ํ•˜๋ฉด ์–ด๋–จ๊นŒ?โ€

๊ทธ ๋ฌผ์Œ์ด ๋ฐ”๋กœ ์šฐ๋ฆฌ๋™๋„ค์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค์˜ ์ถœ๋ฐœ์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ๋Š” ์•ฝ 30๋ช…์˜ ํ˜„์ง ๊ฐœ๋ฐœ์ž์™€ ์ปดํ“จํ„ฐ๊ณตํ•™ ์ „๊ณต ๋Œ€ํ•™์ƒ๋“ค์ด ๊ฐ์ž์˜ ์ „๋ฌธ ๋ถ„์•ผ๋ฅผ ๋งก์•„, ์ž…๋ฌธ๋ถ€ํ„ฐ ์‹ค์ „๊นŒ์ง€ ์•„์šฐ๋ฅด๋Š” ์ปค๋ฆฌํ˜๋Ÿผ์„ ์ง์ ‘ ์„ค๊ณ„ํ•˜๊ณ  ๊ฐ•์˜ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ์ˆœํ•œ ์ง€์‹ ์ „๋‹ฌ์„ ๋„˜์–ด, ์ง„์งœ ๊ฐœ๋ฐœ์ž์˜ ์‹œ์„ ์œผ๋กœ ๋ฐฐ์šฐ๊ณ  ํ•จ๊ป˜ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

โ€œ์ง„์งœ ๊ฐœ๋ฐœ์ž๋Š”, ์ง„์งœ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋ฐฐ์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค.โ€

์ €ํฌ๋Š” ์›น ๊ฐœ๋ฐœ์˜ ์ „ ๊ณผ์ •์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์ฒด๊ณ„์ ์œผ๋กœ ๋‹ค๋ฃจ๋˜, ์ด๋ก ์— ๋จธ๋ฌด๋ฅด์ง€ ์•Š๊ณ  ์‹ค์Šต๊ณผ ์‹ค์ „ ์ค‘์‹ฌ์˜ ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด ์‹ค๋ ฅ์„ ํ‚ค์›Œ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
์ˆ˜๊ฐ•์ƒ ํ•œ ์‚ฌ๋žŒ, ํ•œ ์‚ฌ๋žŒ์˜ ์„ฑ์žฅ์„ ํ•จ๊ป˜ ๊ณ ๋ฏผํ•˜๊ณ  ์ด๋Œ์–ด๊ฐ€๋Š” ๊ฒƒ์ด ์šฐ๋ฆฌ์˜ ์ฒ ํ•™์ž…๋‹ˆ๋‹ค.

๐ŸŽฏ ์šฐ๋ฆฌ์˜ ์ฒ ํ•™์€ ๋ถ„๋ช…ํ•ฉ๋‹ˆ๋‹ค.
"์ง„์ •ํ•œ ๋ฐฐ์›€์€ ์‹ค์ฒœ์—์„œ ์˜ค๊ณ , ์„ฑ์žฅ์€ ํ•จ๊ป˜ํ•  ๋•Œ ์™„์„ฑ๋œ๋‹ค."

๊ฐœ๋ฐœ์„ ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” ์ž…๋ฌธ์ž๋ถ€ํ„ฐ, ์‹ค๋ฌด ๋Šฅ๋ ฅ์„ ํ‚ค์šฐ๊ณ  ์‹ถ์€ ์ทจ์—… ์ค€๋น„์ƒ, ์ง„๋กœ๋ฅผ ํƒ์ƒ‰ ์ค‘์ธ ์ฒญ์†Œ๋…„๊นŒ์ง€.
์šฐ๋ฆฌ๋™๋„ค์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค๋Š” ๋ชจ๋‘์˜ ์ถœ๋ฐœ์ ์ด์ž, ํ•จ๊ป˜ ๊ฑท๋Š” ๋“ ๋“ ํ•œ ๋™๋ฐ˜์ž๊ฐ€ ๋˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ, ํ˜ผ์ž ๊ณ ๋ฏผํ•˜์ง€ ๋งˆ์„ธ์š”.
์šฐ๋ฆฌ๋™๋„ค์ฝ”๋”ฉ ์ŠคํŠœ๋””์˜ค๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„์˜ ์„ฑ์žฅ์„ ํ•จ๊ป˜ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.


Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

โ€œWhat if we shared this way of learning with others?โ€

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertiseโ€”designing and delivering a curriculum that spans from foundational knowledge to real-world development.
Weโ€™re not just here to teachโ€”weโ€™re here to help you see through the lens of real developers and grow together.

โ€œTo become a real developer, you must learn from real developers.โ€

Our courses take you through the entire web development journeyโ€”from start to finishโ€”focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learnerโ€™s growth and are committed to supporting your path every step of the way.

๐ŸŽฏ Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpadโ€”and your trusted companion on the journey.

You donโ€™t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

38๊ฐœ โˆ™ (1์‹œ๊ฐ„ 43๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!