[๊ธฐ์ˆ ๋ฉด์ ‘] ๋ธŒ๋ผ์šฐ์ € ์ž‘๋™๋ฐฉ์‹

2023. 9. 6. 13:40ใ†๐Ÿ–ฅ๏ธ CS(Computer Science)/๋„คํŠธ์›Œํฌ

๋ธŒ๋ผ์šฐ์ € ์ž‘๋™๋ฐฉ์‹

  1. URL ํ•ด์„ ๋ฐ ์š”์ฒญ
    • ์‚ฌ์šฉ์ž๊ฐ€ ์›น ๋ธŒ๋ผ์šฐ์ € ์ฃผ์†Œ์ฐฝ์— URL ์ž…๋ ฅ ์‹œ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ด๋ฅผ ํ•ด์„ํ•˜๊ณ  ํ•ด๋‹น ์›น ์„œ๋ฒ„ IP ์ฃผ์†Œ๋ฅผ DNS(Domain Name Systerm) ์„œ๋ฒ„์—์„œ ํƒ์ƒ‰
    • ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„์— HTTP ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ , ์›น ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญ. ์‚ฌ์šฉ์ž ์—์ด์ „ํŠธ ์ •๋ณด๋„ ํ•จ๊ป˜ ์ „์†ก๋จ
  2. ์„œ๋ฒ„ ์‘๋‹ต
    • ์„œ๋ฒ„๋Š” ์š”์ฒญ์„ ๋ฐ›๊ณ , ์š”์ฒญ๋œ ์›น ํŽ˜์ด์ง€์˜ ๋ฆฌ์†Œ์Šค(HTML ๋ฌธ์„œ, CSS, JS, ์ด๋ฏธ์ง€)๋ฅผ ์ฐพ์•„์„œ ์‘๋‹ต
    • ์‘๋‹ต์€ HTTP ์ƒํƒœ์ฝ”๋“œ์™€ ํ•จ๊ป˜ ์ „์†ก
  3. HTML ํŒŒ์‹ฑ ๋ฐ ๋ Œ๋”๋ง
    • ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ HTML ๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ DOM(Document Object Model)์„ ์ƒ์„ฑ(DOM์€ ์›น ํŽ˜์ด์ง€์˜ ๊ตฌ์กฐ์™€ ๋‚ด์šฉ์„ ํ‘œํ˜„ํ•˜๋Š”ํŠธ๋ฆฌ๊ตฌ์กฐ)
    • CSS ํŒŒ์ผ๋„ ๋‹ค์šด๋กœ๋“œ/ํŒŒ์‹ฑํ•˜์—ฌ CSSOM(CSS Object Model: ์Šคํƒ€์ผ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ๊ฐ์ฒด ๋ชจ๋ธ)์ƒ์„ฑ ํ›„ DOM๊ณผ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ Œ๋”๋งํŠธ๋ฆฌ ์ƒ์„ฑ.
    • ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด ๋ Œ๋”๋ง ํŠธ๋ฆฌ๋ฅผ ํ™”๋ฉด์— ๊ทธ๋ฆผ
  4. ๋ Œ๋”๋ง
    • ๋ Œ๋”๋ง ์—”์ง„์€ ๋ Œ๋”๋ง ํŠธ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ CSS ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๊ณ , ๋ ˆ์ด์•„์›ƒ์„ ๊ณ„์‚ฐํ•˜๋ฉฐ, ํ”ฝ์…€๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์›น ํŽ˜์ด์ง€๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•จ.
    • ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๋ชจ๋“  ์š”์†Œ๋“ค์€ ํ™”๋ฉด์— ๋ฐฐ์น˜๋˜๋ฉฐ, ์‚ฌ์šฉ์ž๊ฐ€ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์— ๋ Œ๋”๋งํ•จ
  5. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰
    • ์›น ํŽ˜์ด์ง€์— ํฌํ•จ๋œ JS ์ฝ”๋“œ๊ฐ€ ํŒŒ์‹ฑ๋˜๊ณ  ์‹คํ–‰๋˜์–ด DOM์„ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์„ ์ฒ˜๋ฆฌํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋จ.
    • JS ์—”์ง„์€ ์‹คํ–‰ ์Šคํƒ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์‹คํ–‰ํ•˜๋ฉฐ, ๋น„๋™๊ธฐ ์ž‘์—…์€ ์ด๋ฒคํŠธ ํ๋ฅผ ํ†ตํ•ด ๊ด€๋ฆฌ๋จ.
  6. ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ
    • ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ(ํด๋ฆญ, ํ‚ค๋ณด๋“œ ์ž…๋ ฅ ๋“ฑ...)์€ ์ด๋ฒคํŠธ๋กœ ์ฒ˜๋ฆฌ๋˜๋ฉฐ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ๋“ฑ๋ก๋œ JS ์ฝ”๋“œ์— ์˜ํ•ด ์ฒ˜๋ฆฌ๋จ.
    • ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋Š” ๋น„๋™๊ธฐ์ ์œผ๋กœ ์‹คํ–‰๋˜๋ฉฐ, ํ™”๋ฉด์— ๋ณ€ํ™”๋ฅผ ์ค„ ์ˆ˜ ์žˆ์Œ.
  7. ๋„คํŠธ์›Œํฌ ์š”์ฒญ
    • ์›น ํŽ˜์ด์ง€์— ํฌํ•จ ๋œ ์ด๋ฏธ์ง€, ๋น„๋””์˜ค, ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ๋“ฑ์˜ ๋ฆฌ์†Œ์Šค๋Š” ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ ๋‹ค์šด๋กœ๋“œ ๋จ.
    • ๋ธŒ๋ผ์šฐ์ €๋Š” ๋„คํŠธ์›Œํฌ ์š”์ฒญ์„ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋ฉฐ, ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋ฅผ ์บ์‹ฑํ•˜์—ฌ ์ค‘๋ณต ๋‹ค์šด๋กœ๋“œ๋ฅผ ๋ฐฉ์ง€ํ•จ.
  8. ํŽ˜์ด์ง€ ์—…๋ฐ์ดํŠธ
    • ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ์Šคํฌ๋กคํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•  ๊ฒฝ์šฐ, ๋ธŒ๋ผ์šฐ์ €๋Š” ์ƒˆ๋กœ์šด HTML์„ ์š”์ฒญํ•˜๊ณ  1~7 ๋‹จ๊ณ„๋ฅผ ๋‹ค์‹œ ์ˆ˜ํ–‰ํ•˜์—ฌ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋ง