Search

AI3 - 20일차 μ˜€μ „

λΉ λ₯Έ μš”μ•½ 이 νšŒμ˜λŠ” μ›Ή 개발과 κ΄€λ ¨λœ λ‹€μ–‘ν•œ 주제λ₯Ό λ‹€λ£¨μ—ˆμœΌλ©° 주둜 HTML 및 μ›Ή νŽ˜μ΄μ§€λ₯Ό λ§Œλ“œλŠ” 도ꡬ에 μ΄ˆμ μ„ λ§žμΆ”μ—ˆμŠ΅λ‹ˆλ‹€. 토둠은 ν”„λ‘œμ νŠΈ κ³„νš μ „λž΅μœΌλ‘œ μ‹œμž‘ν•œ λ‹€μŒ ꡬ쑰, μš”μ†Œ 및 속성을 ν¬ν•¨ν•œ HTML의 κΈ°λ³Έ 사항과 Visual Studio Codeλ₯Ό μ‚¬μš©ν•˜λŠ” μ‹€μš©μ μΈ 데λͺ¨μ— λŒ€ν•΄ νƒκ΅¬ν–ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ 이 μ„Έμ…˜μ—μ„œλŠ” ν…Œμ΄λΈ”, λ©€ν‹°λ―Έλ””μ–΄ μš”μ†Œ 및 양식과 같은 κ³ κΈ‰ HTML κ°œλ…μ„ λ‹€λ£¨μ—ˆμœΌλ©° μ›Ή ν‘œμ€€, μ ‘κ·Όμ„± 및 크둜슀 λΈŒλΌμš°μ € ν˜Έν™˜μ„±μ˜ μ€‘μš”μ„±μ„ κ°•μ‘°ν–ˆμŠ΅λ‹ˆλ‹€. λ‹€μŒ 단계 β€’ νŒ€: 등둝 및 κ²Œμ‹œ κΈ°λŠ₯이 μžˆλŠ” 포럼 κΈ°λŠ₯을 μœ„ν•œ κΈ°λ³Έ HTML ꡬ쑰λ₯Ό λ§Œλ“­λ‹ˆλ‹€. β€’ νŒ€: 둜그인 및 등둝 νŽ˜μ΄μ§€μ— λŒ€ν•œ μ μ ˆν•œ 검증을 κ°–μΆ˜ μž…λ ₯ 양식을 λ§Œλ“­λ‹ˆλ‹€. β€’ νŒ€: GET 및 POST λ©”μ„œλ“œμ— λŒ€ν•œ μ μ ˆν•œ HTTP μš”μ²­ 처리λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€. β€’ νŒ€: μ˜€λ””μ˜€ 및 λΉ„λ””μ˜€ μž¬μƒ κΈ°λŠ₯을 ν¬ν•¨ν•œ λ©€ν‹°λ―Έλ””μ–΄ κΈ°λŠ₯을 μ„€μ •ν•©λ‹ˆλ‹€. β€’ νŒ€: 양식에 파일 μ—…λ‘œλ“œ κΈ°λŠ₯을 κ΅¬ν˜„ν•©λ‹ˆλ‹€. β€’ νŒ€: μ „μž μ„œλͺ…을 μœ„ν•œ μΊ”λ²„μŠ€ κΈ°λŠ₯을 κ΅¬ν˜„ν•©λ‹ˆλ‹€. β€’ νŒ€: 양식 μ œμΆœμ— λŒ€ν•œ μ μ ˆν•œ 였λ₯˜ 처리 및 μœ νš¨μ„± 검사λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€. β€’ νŒ€: κ΅¬ν˜„λœ λͺ¨λ“  κΈ°λŠ₯의 크둜슀 λΈŒλΌμš°μ € ν˜Έν™˜μ„±μ„ ν…ŒμŠ€νŠΈν•©λ‹ˆλ‹€. β€’ νŒ€: κ΅¬ν˜„λœ κΈ°λŠ₯에 λŒ€ν•œ μ μ ˆν•œ λ¬Έμ„œλ₯Ό μž‘μ„±ν•©λ‹ˆλ‹€. μš”μ•½ μ†Œν”„νŠΈμ›¨μ–΄ κ°œλ°œμ„ μœ„ν•œ μ‹€μš©μ μΈ ν•™μŠ΅ μ „λž΅ 이 그룹은 μ†Œν”„νŠΈμ›¨μ–΄ 개발 μž‘μ—…μ— λŒ€ν•œ ν”„λ‘œμ νŠΈ κ³„νš 및 ν•™μŠ΅ μ „λž΅μ„ λ…Όμ˜ν•©λ‹ˆλ‹€. 그듀은 μ΄λ‘ λ³΄λ‹€λŠ” μ‹€μš©μ μΈ μ‘μš©μ— μ΄ˆμ μ„ λ§žμΆ”κ³ , ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€κ³  νŠΉμ • κΈ°λŠ₯을 μ—°μŠ΅ν•œ ν›„ 메인 ν”„λ‘œμ νŠΈμ— ν†΅ν•©ν•˜λŠ” 것을 μ œμ•ˆν•©λ‹ˆλ‹€. νŒ€μ€ νŒ€ ν”„λ‘œμ νŠΈμ— λŒ€ν•œ μ „λ¬Έ 주제λ₯Ό μ„ νƒν•˜κ³  진행 κ³Όμ •μ—μ„œ μ ‘κ·Ό 방식을 μ‘°μ •ν•˜λŠ” 것을 κ³ λ €ν•©λ‹ˆλ‹€. λ˜ν•œ 수술 κ³„νšμ„ κ²€ν† ν•˜κ³  마감일 전에 μž‘μ—…μ„ μ œμΆœν•˜λŠ” 것도 μ–ΈκΈ‰ν•©λ‹ˆλ‹€. HTML κΈ°λ³Έ 및 VS μ½”λ“œ μ‚¬μš©λ²• κ°•μ‚¬λŠ” HTML(ν•˜μ΄νΌν…μŠ€νŠΈ λ§ˆν¬μ—… μ–Έμ–΄)의 κΈ°λ³Έ κ°œλ…, ꡬ쑰 및 μ‚¬μš©λ²•μ„ μ„€λͺ…ν•©λ‹ˆλ‹€. μ›Ή νŽ˜μ΄μ§€λ₯Ό λ§Œλ“œλŠ” λ§ˆν¬μ—… μ–Έμ–΄λ‘œμ„œμ˜ HTML의 λͺ©μ , <!DOCTYPE html>, <html>, <head> 및 <body> νƒœκ·Έλ₯Ό ν¬ν•¨ν•œ HTML λ¬Έμ„œμ˜ κΈ°λ³Έ ꡬ쑰, μš”μ†Œμ™€ μ†μ„±μ˜ κ°œλ…μ„ λ‹€λ£Ήλ‹ˆλ‹€. κ°•μ‚¬λŠ” λ˜ν•œ 단좕킀와 더 λΉ λ₯Έ 코딩을 μœ„ν•œ Emmet ν”ŒλŸ¬κ·ΈμΈμ„ ν¬ν•¨ν•˜μ—¬ HTML μž‘μ„±μ— VS Codeλ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. 그듀은 μ μ ˆν•œ μΈμ½”λ”©μ˜ μ€‘μš”μ„±μ„ κ°•μ‘°ν•˜κ³  id, class 및 titleκ³Ό 같은 일반적인 HTML 속성에 λŒ€ν•΄ ν† λ‘ ν•©λ‹ˆλ‹€. Visual Studio Code for HTML을 μ‚¬μš©ν•©λ‹ˆλ‹€. κ°•μ‚¬λŠ” HTML κ°œλ°œμ„ μœ„ν•΄ Visual Studio Codeλ₯Ό μ„€μ •ν•˜κ³  μ‚¬μš©ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. 폴더 생성, ν”„λ‘œμ νŠΈ μ—΄κΈ°, μ†Œν˜• 폴더 및 κΈ€κΌ΄ 크기와 같은 μ„€μ • μ‘°μ •, κΈ°λ³Έ HTML νƒœκ·Έ μ‚¬μš© 등을 λ‹€λ£Ήλ‹ˆλ‹€. κ°•μ‚¬λŠ” λ˜ν•œ μžλ™ μ™„μ„± κΈ°λŠ₯을 μ‚¬μš©ν•˜κ³ , 주석을 μž‘μ„±ν•˜κ³  ν™•μž₯ ν”„λ‘œκ·Έλž¨μ„ μ„€μΉ˜ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. 그듀은 λΉ λ₯΄κ³  효율적으둜 μ½”λ“œλ₯Ό μž‘μ„±ν•˜λŠ” μ—°μŠ΅μ˜ μ€‘μš”μ„±μ„ κ°•μ‘°ν•˜λ©° κ°€μ‹œμ„±μ„ 높이기 μœ„ν•΄ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‘°μ •ν•˜λŠ” 방법에 λŒ€ν•œ νŒμ„ μ œκ³΅ν•©λ‹ˆλ‹€. Vs μ½”λ“œ 및 HTML κΈ°λ³Έ 사항 ν† λ‘ μ—μ„œλŠ” Visual Studio Code(VS Code)와 HTML μ‚¬μš©μ˜ λ‹€μ–‘ν•œ 츑면을 λ‹€λ£Ήλ‹ˆλ‹€. κ°•μ‚¬λŠ” VS Codeμ—μ„œ 단좕킀λ₯Ό μ„€μ •ν•˜κ³  Material Icon Theme 및 Live Server와 같은 ν™•μž₯ ν”„λ‘œκ·Έλž¨μ„ μ„€μΉ˜ν•˜λ©° HTML νŒŒμΌμ„ λ§Œλ“€κ³  μ‹€ν–‰ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. μ›Ή ν‘œμ€€, μ›Ή μ ‘κ·Όμ„± 및 크둜슀 λΈŒλΌμš°μ € ν˜Έν™˜μ„±μ˜ μ€‘μš”μ„±μ„ μ„€λͺ…ν•©λ‹ˆλ‹€. κ°•μ‚¬λŠ” λ˜ν•œ κΈ°λ³Έ HTML νƒœκ·Έλ₯Ό μ†Œκ°œν•˜κ³  블둝 μš”μ†Œμ™€ 인라인 μš”μ†Œλ₯Ό κ΅¬λ³„ν•˜λ©° 특수 λ¬Έμžμ— λŒ€ν•œ HTML μ—”ν‹°ν‹° μ‚¬μš©μ„ μ„€λͺ…ν•©λ‹ˆλ‹€. μ„Έμ…˜μ—λŠ” μ›Ή 개발의 핡심 κ°œλ…μ— λŒ€ν•œ μ‹€μš©μ μΈ 데λͺ¨μ™€ μ„€λͺ…이 ν¬ν•¨λ©λ‹ˆλ‹€. HTML νƒœκ·Έ 및 개발자 도ꡬ κ°•μ‚¬λŠ” 제λͺ©, 단락 및 쀄 브레이크 νƒœκ·Έλ₯Ό ν¬ν•¨ν•œ λ‹€μ–‘ν•œ HTML νƒœκ·Έμ™€ μš”μ†Œλ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. 블둝 레벨 μš”μ†Œμ™€ 인라인 μš”μ†Œμ˜ 차이점을 μ„€λͺ…ν•˜κ³  λΈŒλΌμš°μ €μ—μ„œ 개발자 도ꡬλ₯Ό μ‚¬μš©ν•˜μ—¬ HTML μš”μ†Œμ™€ 속성을 κ²€μ‚¬ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. κ°•μ‚¬λŠ” λ˜ν•œ HTML μ—”ν‹°ν‹°μ˜ κ°œλ…μ„ μ†Œκ°œν•˜κ³  개발자 λ„κ΅¬μ˜ μ½˜μ†” νƒ­μ—μ„œ JavaScript μ‚¬μš©μ— λŒ€ν•΄ κ°„λž΅ν•˜κ²Œ μ–ΈκΈ‰ν•©λ‹ˆλ‹€. μ›Ή 개발 도ꡬ 및 HTML μš”μ†Œ 이 토둠은 μ›Ή 개발 도ꡬ와 HTML μš”μ†Œμ˜ λ‹€μ–‘ν•œ 츑면을 λ‹€λ£Ήλ‹ˆλ‹€. μΏ ν‚€ 보기 및 μ‚­μ œ 방법을 ν¬ν•¨ν•˜μ—¬ μ›Ή λΈŒλΌμš°μ €μ—μ„œ 개발자 도ꡬ에 λŒ€ν•œ μ„€λͺ…μœΌλ‘œ μ‹œμž‘ν•©λ‹ˆλ‹€. 그런 λ‹€μŒ λŒ€ν™”λŠ” HTML μš”μ†Œλ‘œ λ„˜μ–΄κ°€λ©° λͺ©λ‘ νƒœκ·Έ(μˆœλ ¬λ˜μ§€ μ•Šμ€, μ •λ ¬λœ 및 μ •μ˜ λͺ©λ‘)와 κ·Έ 속성에 μ΄ˆμ μ„ 맞μΆ₯λ‹ˆλ‹€. λ°œν‘œμžλŠ” HTML을 μ‚¬μš©ν•˜μ—¬ λ‹€μ–‘ν•œ μœ ν˜•μ˜ λͺ©λ‘μ„ λ§Œλ“€κ³  μˆ˜μ •ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. λ§ˆμ§€λ§‰μœΌλ‘œ 토둠은 링크 νƒœκ·Έλ‘œ μ΄λ™ν•˜μ—¬ 액컀 κ°œλ…κ³Ό <a> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ ν•˜μ΄νΌλ§ν¬λ₯Ό λ§Œλ“œλŠ” 방법을 μ„€λͺ…ν•©λ‹ˆλ‹€. μ—°μ‚¬λŠ” μƒλŒ€ URLκ³Ό μ ˆλŒ€ URL을 ν¬ν•¨ν•˜μ—¬ 링크 λŒ€μƒ 및 경둜λ₯Ό μ§€μ •ν•˜λŠ” λ‹€μ–‘ν•œ 방법을 보여주고 IDλ₯Ό μ‚¬μš©ν•˜μ—¬ λ™μΌν•œ λ¬Έμ„œμ˜ λ‹€λ₯Έ 뢀뢄에 λ§ν¬ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. HTML 이미지 νƒœκ·Έ 및 속성 이 토둠은 HTML 이미지 νƒœκ·Έμ™€ κ·Έ 속성에 μ΄ˆμ μ„ 맞μΆ₯λ‹ˆλ‹€. AlohaλŠ” <img> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 μ„€λͺ…ν•©λ‹ˆλ‹€. μ—¬κΈ°μ—λŠ” 이미지 μœ„μΉ˜λ₯Ό μ§€μ •ν•˜λŠ” src 속성과 λŒ€μ²΄ ν…μŠ€νŠΈμ˜ alt 속성이 ν¬ν•¨λ©λ‹ˆλ‹€. 이미지 μ†ŒμŠ€μ— λŒ€ν•œ μƒλŒ€ 및 μ ˆλŒ€ 경둜λ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 보여주고 JPG, PNG 및 GIF와 같은 λ‹€μ–‘ν•œ 이미지 ν˜•μ‹μ— λŒ€ν•΄ μ„€λͺ…ν•©λ‹ˆλ‹€. AlohaλŠ” λ˜ν•œ 이미지에 제λͺ©μ„ μΆ”κ°€ν•˜λŠ” 방법을 보여주고 이미지가 λ‘œλ“œλ˜μ§€ μ•Šμ„ λ•Œ λ°œμƒν•˜λŠ” 일을 μ„€λͺ…ν•©λ‹ˆλ‹€. μ„Έμ…˜μ—λŠ” HTML νŒŒμΌμ— 이미지λ₯Ό μ‚½μž…ν•˜κ³  이미지 URL을 μ‚¬μš©ν•˜λŠ” μ‹€μš©μ μΈ μ˜ˆμ œκ°€ ν¬ν•¨λ©λ‹ˆλ‹€. HTML ν…Œμ΄λΈ” ꡬ쑰 및 μŠ€νƒ€μΌλ§ 토둠은 HTML ν…Œμ΄λΈ” ꡬ쑰와 μŠ€νƒ€μΌλ§μ— 쀑점을 λ‘‘λ‹ˆλ‹€. λ°œν‘œμžλŠ” <table>, <tr>, <th>, <td>와 같은 λ‹€μ–‘ν•œ νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ ν…Œμ΄λΈ”μ„ λ§Œλ“œλŠ” 방법과 <thead>, <tbody>, <tfoot>λ₯Ό μ‚¬μš©ν•˜μ—¬ ν…Œμ΄λΈ” λ‚΄μš©μ„ κ΅¬μ„±ν•˜λŠ” 방법을 μ„€λͺ…ν•©λ‹ˆλ‹€. ν…Œλ‘λ¦¬μ™€ λ°°κ²½ 색상 섀정을 ν¬ν•¨ν•˜μ—¬ ν…Œμ΄λΈ” μš”μ†Œμ— μŠ€νƒ€μΌμ„ μ μš©ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. μ—°μ‚¬λŠ” λ˜ν•œ μŠ€νƒ€μΌμ„ 효율적으둜 μ μš©ν•˜κΈ° μœ„ν•΄ μ—΄ 그룹을 μ‚¬μš©ν•˜λŠ” 방법에 λŒ€ν•΄ μ„€λͺ…ν•©λ‹ˆλ‹€. λ§ˆμ§€λ§‰μ— λŒ€ν™”λŠ” μ§€μ›μžμ™€ μ±„μš© μ‹œμŠ€ν…œμ— λŒ€ν•œ ν† λ‘ μœΌλ‘œ λ°”λ€Œμ§€λ§Œ λ§₯락이 λΆˆλΆ„λͺ…ν•˜κ³  정보가 λΆ„μ‚°λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. HTML λ©€ν‹°λ―Έλ””μ–΄ 및 양식 νƒœκ·Έ ν† λ‘ μ—μ„œλŠ” λ‹€μ–‘ν•œ HTML λ©€ν‹°λ―Έλ””μ–΄ 및 양식 νƒœκ·Έλ₯Ό λ‹€λ£Ήλ‹ˆλ‹€. λ°œν‘œμžλŠ” μ˜€λ””μ˜€, λΉ„λ””μ˜€ 및 iframe νƒœκ·Έλ₯Ό μ„€λͺ…ν•˜κ³  μ˜€λ””μ˜€ 파일, λΉ„λ””μ˜€ 및 μ™ΈλΆ€ μ›Ή μ½˜ν…μΈ λ₯Ό μ›Ή νŽ˜μ΄μ§€μ— μž„λ² λ”©ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. λ˜ν•œ κ·Έλž˜ν”½κ³Ό μ• λ‹ˆλ©”μ΄μ…˜μ„ λ§Œλ“œλŠ” 데 μ‚¬μš©λ˜λŠ” μΊ”λ²„μŠ€ νƒœκ·Έλ₯Ό μ†Œκ°œν•©λ‹ˆλ‹€. 그런 λ‹€μŒ λŒ€ν™”λŠ” μž…λ ₯ 및 양식 νƒœκ·Έλ‘œ λ„˜μ–΄κ°€μ„œ μ›Ή νŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©μž 데이터λ₯Ό μˆ˜μ§‘ν•˜λŠ” 데 μ‚¬μš©ν•˜λŠ” 방법에 λŒ€ν•΄ μ„€λͺ…ν•©λ‹ˆλ‹€. λ°œν‘œμžλŠ” λ‹€μ–‘ν•œ HTTP μš”μ²­ λ©”μ„œλ“œ, 특히 GETκ³Ό POSTλ₯Ό μ„€λͺ…ν•˜κ³  양식 μ œμΆœμ— μ–΄λ–»κ²Œ μ‚¬μš©λ˜λŠ”μ§€ μ„€λͺ…ν•©λ‹ˆλ‹€. λ˜ν•œ ν…μŠ€νŠΈ, μ•”ν˜Έ, μ²΄ν¬λ°•μŠ€ 및 λΌλ””μ˜€ λ²„νŠΌκ³Ό 같은 λ‹€μ–‘ν•œ μž…λ ₯ μœ ν˜•μ„ 닀루며 λ“œλ‘­λ‹€μš΄ λͺ©λ‘μ„μœ„ν•œ νƒœκ·Έ 선택 및 λ‹€ 쀄 ν…μŠ€νŠΈ μž…λ ₯μ„μœ„ν•œ textareaλ₯Ό λ‹€λ£Ήλ‹ˆλ‹€.