Learn HTML & Web Development

์ธ์•ฑ ๊ตฌ๋งค
100+
๋‹ค์šด๋กœ๋“œ
์ฝ˜ํ…์ธ  ๋“ฑ๊ธ‰
PEGI 3
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€

์•ฑ ์ •๋ณด

์›น ๊ฐœ๋ฐœ ๋ฐฐ์šฐ๊ธฐ: HTML, CSS, JavaScript ๋“ฑ
์›น ๊ฐœ๋ฐœ์„ ๋งˆ์Šคํ„ฐํ•˜๊ณ  ์ „๋ฌธ์ ์ธ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์œผ์‹ ๊ฐ€์š”?
HTML, CSS, JavaScript, React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ๊ฐœ๋ฐœ์„ ๋ฐฐ์šฐ๊ณ , ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ , ์‹ค์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ์˜ฌ์ธ์› ์•ฑ, Learn Web Development์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

์›น ๊ฐœ๋ฐœ์„ ๋ง‰ ์‹œ์ž‘ํ–ˆ๋“ , ์‹ค๋ ฅ ํ–ฅ์ƒ์„ ๋ชฉํ‘œ๋กœ ํ•˜๋“ , ์ด ์•ฑ์€ ๊ฐ„๋‹จํ•˜๊ณ  ์ฒด๊ณ„์ ์ด๋ฉฐ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•œ ๋ฐฉ์‹์œผ๋กœ ์›น ๊ฐœ๋ฐœ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค. HTML๋ถ€ํ„ฐ ๊ณ ๊ธ‰ ํ’€์Šคํƒ ๊ฐœ๋ฐœ๊นŒ์ง€, ํ•„์š”ํ•œ ๋ชจ๋“  ๊ฒƒ์ด ํ•œ๊ณณ์— ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŒŸ Learn Web Development ์•ฑ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์ด์œ 

- ์›น ๊ฐœ๋ฐœ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ๋ฐฐ์šฐ๊ธฐ: HTML๊ณผ CSS๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ JavaScript๊นŒ์ง€ ๋ฐฐ์šฐ๊ณ , React๋กœ ๋ณธ๊ฒฉ์ ์ธ ์•ฑ์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”.
- ์‹ค์Šต ์ฝ”๋”ฉ ๊ฒฝํ—˜: ๋‚ด์žฅ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ฝ”๋”ฉํ•˜๊ณ  ํ…Œ์ŠคํŠธํ•ด ๋ณด์„ธ์š”.
- ํ”„๋กœ์ ํŠธ ๊ธฐ๋ฐ˜ ํ•™์Šต: ์‹ค์ œ ์›น ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜์—ฌ ๋ฐฐ์šด ๋‚ด์šฉ์„ ์ ์šฉํ•ด ๋ณด์„ธ์š”.
- ์ž๊ฒฉ์ฆ ์ทจ๋“: ์ž๊ฒฉ์ฆ์„ ํ†ตํ•ด ์›น ๊ฐœ๋ฐœ ์‹ค๋ ฅ์„ ๋ณด์—ฌ์ฃผ์„ธ์š”.
- ๋ชจ๋“  ๋ ˆ๋ฒจ ํ™˜์˜: ์ดˆ๋ณด์ž๋ถ€ํ„ฐ ๊ณ ๊ธ‰ ๊ฐœ๋ฐœ์ž๊นŒ์ง€, ์ด ์•ฑ์€ ๋ชจ๋“  ๋ ˆ๋ฒจ์— ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“˜ ์ด ์›น ๊ฐœ๋ฐœ ์•ฑ์—์„œ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ๋‚ด์šฉ:

- HTML ๋ฐฐ์šฐ๊ธฐ: ๋”ฐ๋ผ ํ•˜๊ธฐ ์‰ฌ์šด ๋ ˆ์Šจ์„ ํ†ตํ•ด ํƒœ๊ทธ, ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ, ํผ, ๋ชฉ๋ก, ๋งํฌ ๋ฐ ์˜๋ฏธ ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.

- CSS ๋ฐฐ์šฐ๊ธฐ: CSS ๊ธฐ๋ณธ ์‚ฌํ•ญ์„ ์‹ฌ๋„ ์žˆ๊ฒŒ ํ•™์Šตํ•˜๊ณ  ๋ฐ•์Šค ๋ชจ๋ธ, ์œ„์น˜ ์ง€์ •, ํ”Œ๋ ‰์Šค๋ฐ•์Šค, ๊ทธ๋ฆฌ๋“œ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐ ์Šคํƒ€์ผ๋ง ๊ธฐ๋ฒ•์„ ์ตํž™๋‹ˆ๋‹ค.

- JavaScript ๋ฐฐ์šฐ๊ธฐ: JavaScript ๋ฐฐ์šฐ๊ธฐ ์„น์…˜์—์„œ ๋ณ€์ˆ˜, ํ•จ์ˆ˜, ๋ฃจํ”„, ์กฐ๊ฑด๋ฌธ, DOM ์กฐ์ž‘ ๋ฐ ES6+๋ฅผ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.

- React ๊ธฐ๋ณธ: ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ์˜ ํ•ต์‹ฌ ์š”์†Œ์ธ React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋™์  UI๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ , ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ , ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์กฐํ™”ํ•ฉ๋‹ˆ๋‹ค.

- ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ: HTML, CSS, JavaScript๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ฐ˜์‘ํ˜• ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.

- ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ(์†Œ๊ฐœ): ์„œ๋ฒ„, API, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ฐ ์‹ค์ œ ์‚ฌ์šฉ ์‚ฌ๋ก€์—์„œ ์›น ๊ฐœ๋ฐœ์„ ์ง€์›ํ•˜๋Š” ๋ฐฉ์‹์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค.

- ํ’€์Šคํƒ ๊ฐœ๋ฐœ: ํ”„๋ŸฐํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๊ธฐ์ˆ ์„ ํ†ตํ•ฉํ•˜์—ฌ ์™„๋ฒฝํ•œ ํ’€์Šคํƒ ๊ฐœ๋ฐœ ๊ต์œก์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์›น ๊ฐœ๋ฐœ ํ•™์Šต์ž๋ฅผ ์œ„ํ•œ ์ฃผ์š” ๊ธฐ๋Šฅ:

โœ… ์™„๋ฒฝํ•œ ์ปค๋ฆฌํ˜๋Ÿผ: HTML, CSS, JavaScript๋ถ€ํ„ฐ React ๋ฐ ํ’€์Šคํƒ ๊ฐœ๋ฐœ๊นŒ์ง€ ๋ชจ๋“  ๊ฒƒ์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.
โœ… ๋‚ด์žฅ ์ปดํŒŒ์ผ๋Ÿฌ: ์•ฑ์„ ์ „ํ™˜ํ•˜์ง€ ์•Š๊ณ ๋„ ํ•™์Šตํ•˜๋ฉด์„œ ์ฝ”๋”ฉํ•  ์ˆ˜ ์žˆ์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•œ ์ž์‹ ๊ฐ์„ ๋†’์—ฌ์ค๋‹ˆ๋‹ค.
โœ… ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ํ•™์Šต: ์งง์€ ๋ ˆ์Šจ, ์žฌ๋ฏธ์žˆ๋Š” ํ€ด์ฆˆ, ์‹ค์‹œ๊ฐ„ ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด ์ฝ”๋”ฉ์„ ๋” ๋นจ๋ฆฌ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
โœ… ์‹ค์ œ ํ”„๋กœ์ ํŠธ: ์›น์‚ฌ์ดํŠธ์™€ ์•ฑ์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๊ตฌ์ถ•ํ•˜์—ฌ ์‹ค๋ฌด ๊ฒฝํ—˜์„ ์Œ“์œผ์„ธ์š”.
โœ… ์ž๊ฒฉ์ฆ: ๊ฐ ์›น ๊ฐœ๋ฐœ ๋ชจ๋“ˆ์—์„œ ๋‹ฌ์„ฑํ•œ ์„ฑ๊ณผ๋ฅผ ์ธ์ •๋ฐ›์œผ์„ธ์š”.

๐Ÿ… ์ž๊ฒฉ์ฆ์„ ์ทจ๋“ํ•˜๊ณ  ์ปค๋ฆฌ์–ด๋ฅผ ๋ฐœ์ „์‹œํ‚ค์„ธ์š”
์—…๊ณ„์—์„œ ๋ฐ”๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์›น ๊ฐœ๋ฐœ ๊ธฐ์ˆ ๋กœ ์ปค๋ฆฌ์–ด๋ฅผ ๋ฐœ์ „์‹œํ‚ค์„ธ์š”. ํ”„๋ฆฌ๋žœ์„œ, ํ”„๋ŸฐํŠธ์—”๋“œ, ํ’€์Šคํƒ ์—”์ง€๋‹ˆ์–ด๋ง ๋“ฑ ์–ด๋–ค ๋ถ„์•ผ๋ฅผ ๋ชฉํ‘œ๋กœ ํ•˜๋“  ์ด ์•ฑ์€ ์ ํ•ฉํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ˆ ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. HTML, CSS, JavaScript, React ๋“ฑ ๊ฐ ์„น์…˜์„ ์™„๋ฃŒํ•˜๋ฉด ์ž๊ฒฉ์ฆ์„ ์ทจ๋“ํ•˜๊ณ  ์„ธ์ƒ์— ์‹ค๋ ฅ์„ ๋ณด์—ฌ์ฃผ์„ธ์š”.

๐Ÿ‘ฉโ€๐Ÿ’ป ์ด ์•ฑ์€ ๋ˆ„๊ฐ€ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ์š”?

์ด ์›น ๊ฐœ๋ฐœ ์•ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ถ„๋“ค์—๊ฒŒ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.
- ์ฝ”๋”ฉ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ์ดˆ๋ณด์ž
- ์›น ๊ฐœ๋ฐœ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ํ•™์ƒ ๋ฐ ์ „๋ฌธ๊ฐ€
- ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ, ํ’€์Šคํƒ ๊ฐœ๋ฐœ, ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์— ์ž…๋ฌธํ•˜๋ ค๋Š” ๋ชจ๋“  ๋ถ„
- ์‹ค์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ˆ ์„ ์ตํžˆ๊ณ  ์‹ถ์€ ์‚ฌ์šฉ์ž

์‚ฌ์ „ ๊ฒฝํ—˜ ๋ถˆํ•„์š”. ์›น์‚ฌ์ดํŠธ, ์•ฑ, ์‹œ์Šคํ…œ ๋“ฑ ์–ด๋–ค ๋ถ„์•ผ์— ๊ด€์‹ฌ์ด ์žˆ๋“  ์ง€๊ธˆ ๋ฐ”๋กœ ์›น ๊ฐœ๋ฐœ ์—ฌ์ •์„ ์‹œ์ž‘ํ•˜์„ธ์š”.

๐Ÿ”ฅ ์Šค๋งˆํŠธํ•˜๊ฒŒ ์›น ๊ฐœ๋ฐœ ๋ฐฐ์šฐ๊ธฐ
๋™์˜์ƒ ์‹œ์ฒญ์€ ์ด์ œ ๊ทธ๋งŒ! ๋ฐ”๋กœ ๊ฐœ๋ฐœ์— ๋›ฐ์–ด๋“œ์„ธ์š”. ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์•ฑ์„ ํ†ตํ•ด ์›น ๊ฐœ๋ฐœ์€ ๋ฌผ๋ก  HTML, CSS, JavaScript, React, ํ’€์Šคํƒ ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ์‹ค๋ฌด ๊ธฐ์ˆ ๊นŒ์ง€ ์Šต๋“ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ’ก ๋ณธ๊ฒฉ์ ์ธ ์›น ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ค€๋น„๊ฐ€ ๋˜์…จ๋‚˜์š”?
์ง€๊ธˆ ๋ฐ”๋กœ ์›น ๊ฐœ๋ฐœ ๋ฐฐ์šฐ๊ธฐ๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๊ณ  ์ „๋ฌธ๊ฐ€์ฒ˜๋Ÿผ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”.

๐Ÿ“ฉ ์งˆ๋ฌธ์ด๋‚˜ ์˜๊ฒฌ์ด ์žˆ์œผ์‹ ๊ฐ€์š”? [email protected]์œผ๋กœ ๋ฌธ์˜ํ•ด ์ฃผ์„ธ์š”.
๐Ÿ” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๊ฐœ์ธ์ •๋ณด ์ฒ˜๋ฆฌ๋ฐฉ์นจ ๋ฐ ์•ฝ๊ด€์„ ํ™•์ธํ•˜์„ธ์š”.
- https://codingx.app/
- https://codingx.app/Terms.html
์—…๋ฐ์ดํŠธ ๋‚ ์งœ
2025. 5. 28.

๋ฐ์ดํ„ฐ ๋ณด์•ˆ

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

์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ

๐Ÿš€ Say hello to WebDev X!
Your pocket-sized bootcamp for becoming a job-ready web developer is live.
Highlights
1. Full beginner path: HTML โ†’ CSS โ†’ JavaScript with interactive โ€œtype & runโ€ playgrounds.
2. Projects & deploy: Publish to Netlify/Vercel straight from your phone.
3. Certificates & badges: Finish a module, share your cred on LinkedIn.