Search

AI3 - 20일차 μ˜€ν›„

λΉ λ₯Έ μš”μ•½ 토둠은 HTML 양식 μš”μ†Œ, μ‚¬μš©μž μž…λ ₯ 및 데이터 μ œμΆœμ— λŒ€ν•œ μ‚¬μš©, CSRF 토큰과 같은 λ³΄μ•ˆ 쑰치의 μ€‘μš”μ„±μ— 쀑점을 λ‘μ—ˆμŠ΅λ‹ˆλ‹€. λŒ€ν™”λŠ” λ˜ν•œ λ‹€μ–‘ν•œ HTML μž…λ ₯ μœ ν˜•κ³Ό 양식 μš”μ†Œ, HTML λ ˆμ΄μ•„μ›ƒ νƒœκ·Έ 및 의미 μš”μ†Œ, CSS의 κΈ°λ³Έ 사항과 μ›Ή νŽ˜μ΄μ§€ μŠ€νƒ€μΌλ§μ—μ„œμ˜ 역할에 λŒ€ν•΄ λ‹€λ£¨μ—ˆμŠ΅λ‹ˆλ‹€. κΈ€κΌ΄ 선택, 색상 선택 및 CSSλ₯Ό μ‚¬μš©ν•œ λ²„νŠΌ λ””μžμΈμ„ ν¬ν•¨ν•œ 기술적 λ¬Έμ œμ™€ μ½”λ”© 관행도 ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λ‹€μŒ 단계 β€’ 학생: CSS 선택기, 특히 μš”μ†Œ, 클래슀 및 ID 선택기λ₯Ό κ²€ν† ν•˜κ³  μ΄ν•΄ν•©λ‹ˆλ‹€. β€’ 학생: CSS μŠ€νƒ€μΌ μš°μ„  μˆœμœ„ 계측 ꡬ쑰λ₯Ό κ²€ν† ν•©λ‹ˆλ‹€. β€’ 학생: 의미적 HTML νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ λ ˆμ΄μ•„μ›ƒμ„ λ§Œλ“œλŠ” μ—°μŠ΅ β€’ 학생: κ°•μ˜μ—μ„œ λ‹€λ£¨λŠ” CSS μ½”λ“œ 예제λ₯Ό μž…λ ₯ν•˜κ³  κ΅¬ν˜„ν•˜λŠ” μ—°μŠ΅μ„ν•˜μ‹­μ‹œμ˜€. β€’ 학생: 색상, λ°°κ²½ 색상 및 ν…μŠ€νŠΈ μž₯식을 ν¬ν•¨ν•œ κΈ°λ³Έ ν…μŠ€νŠΈ μŠ€νƒ€μΌλ§ 속성을 κ²€ν† ν•©λ‹ˆλ‹€. β€’ 학생: μ‚¬μš©μž μ •μ˜ κΈ€κΌ΄ κ΅¬ν˜„μ„ μœ„ν•΄ font-face κ·œμΉ™μ„ μ‚¬μš©ν•˜μ—¬ κ³΅λΆ€ν•˜κ³  μ—°μŠ΅ν•©λ‹ˆλ‹€. β€’ 학생: CDNκ³Ό 둜컬 κΈ€κΌ΄ νŒŒμΌμ„ μ‚¬μš©ν•˜μ—¬ μ™ΈλΆ€ 글꼴을 κ΅¬ν˜„ν•˜λŠ” μ—°μŠ΅μ„ μ™„λ£Œν•©λ‹ˆλ‹€. β€’ 학생듀: μ½”λ“œμ—μ„œ Google Fonts κ΅¬ν˜„μ„ μ‹€ν—˜ν•΄ λ³΄μ„Έμš”. β€’ 강사: λ‹€κ°€μ˜€λŠ” μˆ˜μ—…μ— λŒ€ν•œ μžμ„Έν•œ CSS λ ˆμ΄μ•„μ›ƒ λ ˆμŠ¨μ„ κ³„νšν•˜μ‹­μ‹œμ˜€. β€’ 강사: λ‹€μŒ μ„Έμ…˜μ„ μœ„ν•œ CSS 선택기 예제λ₯Ό μ€€λΉ„ν•©λ‹ˆλ‹€. β€’ 강사: 학생듀을 μœ„ν•œ μΆ”κ°€ 타이핑 μ—°μŠ΅ μ—°μŠ΅μ„ λ§Œλ“­λ‹ˆλ‹€. μš”μ•½ HTML 양식 μš”μ†Œ 및 λ³΄μ•ˆ 토둠은 HTML 양식 μš”μ†Œμ™€ μ‚¬μš©μž μž…λ ₯ 및 데이터 μ œμΆœμ— λŒ€ν•œ μ‚¬μš©λ²•μ— 쀑점을 λ‘‘λ‹ˆλ‹€. λ°œν‘œμžλŠ” 양식 νƒœκ·Έμ˜ λͺ©μ , μž…λ ₯ μœ ν˜• 및 μž‘μ—… 및 λ©”μ„œλ“œμ™€ 같은 속성을 μ„€λͺ…ν•©λ‹ˆλ‹€. λ³΄μ•ˆμ„ μœ„ν•œ μˆ¨κ²¨μ§„ ν•„λ“œ, μ‚¬μš©μž 이름 및 μ•”ν˜Έμ— λŒ€ν•œ ν…μŠ€νŠΈ μž…λ ₯, 제좜 λ²„νŠΌμ΄ ν¬ν•¨λœ κΈ°λ³Έ 둜그인 양식을 λ§Œλ“œλŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. λ³΄μ•ˆμ— λŒ€ν•œ CSRF ν† ν°μ˜ μ€‘μš”μ„±μ„ κ°•μ‘°ν•©λ‹ˆλ‹€. μ—°μ‚¬λŠ” λ˜ν•œ GETκ³Ό POST λ©”μ„œλ“œλ₯Ό λΉ„κ΅ν•˜μ—¬ POSTκ°€ μ•”ν˜Έμ™€ 같은 λ―Όκ°ν•œ 데이터에 더 μ•ˆμ „ν•˜λ‹€κ³  κ°•μ‘°ν–ˆμŠ΅λ‹ˆλ‹€. μ„€λͺ… μ „λ°˜μ— 걸쳐 μƒ˜ν”Œ 양식을 μ‚¬μš©ν•˜μ—¬ 둜그인 ν”„λ‘œμ„ΈμŠ€λ₯Ό μ‹œμ—°ν•˜λ €κ³  μ‹œλ„ν•˜μ§€λ§Œ λͺ‡ 가지 기술적 어렀움이 λ°œμƒν•©λ‹ˆλ‹€. HTML μž…λ ₯ μœ ν˜• 및 양식 μš”μ†Œ 이 ν† λ‘ μ—μ„œλŠ” λ‹€μ–‘ν•œ HTML μž…λ ₯ μœ ν˜•κ³Ό 양식 μš”μ†Œλ₯Ό λ‹€λ£Ήλ‹ˆλ‹€. AlohaλŠ” λΌλ””μ˜€ λ²„νŠΌ, μ²΄ν¬λ°•μŠ€ 및 선택 λ“œλ‘­λ‹€μš΄μ„ μ‚¬μš©ν•˜λŠ” 방법을 μ„€λͺ…ν•˜λ©° κ΄€λ ¨ μž…λ ₯을 κ·Έλ£Ήν™”ν•˜κΈ° μœ„ν•΄ 'name' 속성을 μΌμΉ˜μ‹œν‚€λŠ” 것이 μ€‘μš”ν•˜λ‹€κ³  κ°•μ‘°ν•©λ‹ˆλ‹€. 이 λŒ€ν™”μ—μ„œλŠ” 라벨의 'for' 속성을 μž…λ ₯ μš”μ†Œμ˜ 'id'와 μΌμΉ˜μ‹œμΌœ λ ˆμ΄λΈ”μ„ μ—°κ²°ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. λ˜ν•œ κΈ΄ ν˜•μ‹ μž…λ ₯에 λŒ€ν•œ ν…μŠ€νŠΈ μ˜μ—­λ„ 닀루며 μ—΄, ν–‰ 및 μ΅œλŒ€ 길이와 같은 속성을 μ„€μ •ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. AlohaλŠ” μ½”λ“œ 예제λ₯Ό μ œκ³΅ν•˜κ³  λ‹€μ–‘ν•œ μž…λ ₯ μœ ν˜•κ³Ό μ†μ„±μ˜ κΈ°λŠ₯을 μ„€λͺ…ν•©λ‹ˆλ‹€. HTML μž…λ ₯ 속성 및 양식 μš”μ†Œ 이 ν† λ‘ μ—μ„œλŠ” λ‹€μ–‘ν•œ HTML μž…λ ₯ μ˜΅μ…˜κ³Ό 양식 μš”μ†Œλ₯Ό λ‹€λ£Ήλ‹ˆλ‹€. λ°œν‘œμžλŠ” ν•„μˆ˜, 읽기 μ „μš©, λΉ„ν™œμ„±ν™”, μžλ™ 초점 및 μˆ¨κ²¨μ§„ λ“± λ‹€μ–‘ν•œ 속성을 μ„€λͺ…ν•©λ‹ˆλ‹€. 이듀은 μ΄λŸ¬ν•œ 속성이 빈 ν•„μˆ˜ ν•„λ“œ μ œμΆœμ„ λ°©μ§€ν•˜κ³  νŠΉμ • μž…λ ₯에 μžλ™μœΌλ‘œ μ΄ˆμ μ„ λ§žμΆ”λŠ” λ“± 양식 ν•„λ“œμ™€μ˜ μ‚¬μš©μž μƒν˜Έ μž‘μš©μ— μ–΄λ–»κ²Œ 영ν–₯을 λ―ΈμΉ˜λŠ”μ§€ λ³΄μ—¬μ€λ‹ˆλ‹€. μ—°μ‚¬λŠ” λ˜ν•œ JSPκΉŒμ§€ 배운 μ›Ή 개발 κΈ°μˆ μ„ κ°±μ‹ ν•˜κ³  μ—°μŠ΅ν•˜λŠ” 것을 ν¬ν•¨ν•˜λŠ” 이번 달 말에 μ‹œμž‘λ  μ˜ˆμ •μΈ λ―Έλ‹ˆ ν”„λ‘œμ νŠΈ κ³„νšμ„ μ–ΈκΈ‰ν–ˆμŠ΅λ‹ˆλ‹€. HTML λ ˆμ΄μ•„μ›ƒ 및 의미 μš”μ†Œ 토둠은 HTML λ ˆμ΄μ•„μ›ƒ νƒœκ·Έμ™€ 의미 μš”μ†Œμ— 쀑점을 λ‘‘λ‹ˆλ‹€. AlohaλŠ” 블둝과 인라인 μš”μ†Œμ˜ 차이λ₯Ό μ„€λͺ…ν•˜λ©°, λ ˆμ΄μ•„μ›ƒ λͺ©μ μœΌλ‘œ div 및 span νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λŠ” 방법을 κ°•μ‘°ν•©λ‹ˆλ‹€. 그런 λ‹€μŒ 헀더, λ„€λΉ„κ²Œμ΄μ…˜, 메인, μ„Ήμ…˜, 기사 및 푸터와 같은 의미 νƒœκ·Έλ₯Ό μ†Œκ°œν•˜μ—¬ μ›Ή μ½˜ν…μΈ μ— μ˜λ―ΈμžˆλŠ” ꡬ쑰λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. AlohaλŠ” μ΄λŸ¬ν•œ νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ κΈ°λ³Έ μ›Ή νŽ˜μ΄μ§€ λ ˆμ΄μ•„μ›ƒμ„ λ§Œλ“œλŠ” 방법을 보여 μ£Όλ©° μ½˜ν…μΈ λ₯Ό λ…Όλ¦¬μ μœΌλ‘œ κ΅¬μ„±ν•˜κ³  접근성을 ν–₯μƒμ‹œν‚€λŠ” 데 μ€‘μš”μ„±μ„ κ°•μ‘°ν•©λ‹ˆλ‹€. μ›Ή λ””μžμΈμ˜ CSS 및 선택기 이 그룹은 CSS (Cascading Style Sheets)와 μ›Ή λ””μžμΈμ—μ„œμ˜ μ€‘μš”μ„±μ„ λ…Όμ˜ν•©λ‹ˆλ‹€. 그듀은 κ΅κ³Όμ„œ λ‚΄μš©μ„ κ²€ν† ν•˜λ©°, 170-179 νŽ˜μ΄μ§€μ— μ΄ˆμ μ„ λ§žμΆ”κ³  CSS κΈ°λ³Έ 사항을 닀루며 μ„ νƒκΈ°μ˜ κ°œλ…μ„ μ†Œκ°œν•©λ‹ˆλ‹€. 토둠은 CSSμ—μ„œ μ„ νƒκΈ°μ˜ μ€‘μš”μ„±μ„ κ°•μ‘°ν•˜κ³  자료λ₯Ό μ² μ €νžˆ 읽을 것을 ꢌμž₯ν•©λ‹ˆλ‹€. 그룹은 λ˜ν•œ 미래 ν”„λ‘œμ νŠΈ κ³„νšμ— λŒ€ν•΄ μ–ΈκΈ‰ν•˜κ³  JavaScript 및 λ°μ΄ν„°λ² μ΄μŠ€μ™€ 같은 λ‹€λ₯Έ μ›Ή κΈ°μˆ μ— λŒ€ν•΄ κ°„λž΅ν•˜κ²Œ μ–ΈκΈ‰ν•©λ‹ˆλ‹€. CSS κΈ°λ³Έ 및 ν…μŠ€νŠΈ μŠ€νƒ€μΌλ§ 이 ν† λ‘ μ—μ„œλŠ” CSS(Cascading Style Sheets)의 κΈ°λ³Έ κ°œλ…κ³Ό μ›Ή νŽ˜μ΄μ§€ μŠ€νƒ€μΌλ§μ—μ„œμ˜ 역할에 λŒ€ν•΄ λ‹€λ£Ήλ‹ˆλ‹€. ALOHAλŠ” CSSκ°€ HTML μš”μ†Œμ˜ μŠ€νƒ€μΌκ³Ό λ ˆμ΄μ•„μ›ƒμ„ μ§€μ •ν•˜λŠ” 데 μ‚¬μš©λœλ‹€κ³  μ„€λͺ…ν•©λ‹ˆλ‹€. λŒ€ν™”λŠ” μŠ€νƒ€μΌλ§μ„ μœ„ν•΄ νŠΉμ • μš”μ†Œλ₯Ό νƒ€κ²ŸνŒ…ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” 선택기와 κ·Έ μš°μ„ μˆœμœ„μ— μ΄ˆμ μ„ 맞μΆ₯λ‹ˆλ‹€. ALOHAλŠ” λ˜ν•œ κΈ€κΌ΄ νŒ¨λ°€λ¦¬, κΈ€κΌ΄ 크기, 쀄 높이, κΈ€κΌ΄ 무게, ν…μŠ€νŠΈ μ •λ ¬ 및 ν…μŠ€νŠΈ μž₯식 λ“± λ‹€μ–‘ν•œ ν…μŠ€νŠΈ κ΄€λ ¨ CSS 속성에 λŒ€ν•΄ λ…Όμ˜ν•©λ‹ˆλ‹€. λ°˜μ‘ν˜• λ””μžμΈμ—μ„œ ν”½μ…€, em 및 λ°±λΆ„μœ¨κ³Ό 같은 λ‹¨μœ„λ₯Ό μ΄ν•΄ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€. 기술적 문제 및 μ½”λ”© κ΄€ν–‰ νšŒμ˜λŠ” 기술적 λ¬Έμ œμ™€ μ½”λ”© μ‹€μ²œμ— 쀑점을 λ‘‘λ‹ˆλ‹€. AlohaλŠ” μ½”λ“œλ₯Ό μ‹œμ—°ν•˜λŠ” λ™μ•ˆ 버그λ₯Ό λ°œκ²¬ν•˜κ³  μˆ˜μ •ν•˜λ €κ³  μ‹œλ„ν•©λ‹ˆλ‹€. 색상 선택, μ™ΈλΆ€ κΈ€κΌ΄ 및 CSS μŠ€νƒ€μΌλ§μ„ ν¬ν•¨ν•œ μ›Ή 개발의 λ‹€μ–‘ν•œ 츑면에 λŒ€ν•΄ λ…Όμ˜ν•©λ‹ˆλ‹€. AlohaλŠ” κΈ°λ³Έ μŠ€νƒ€μΌκ³Ό 색상 선택을 μ΄ν•΄ν•˜λŠ” μ€‘μš”μ„±μ„ κ°•μ‘°ν•˜λ©΄μ„œ μ—°μŠ΅μ„μœ„ν•œ 폴더와 νŒŒμΌμ„ λ§Œλ“œλŠ” 방법을 μ°Έκ°€μžλ“€μ—κ²Œ μ•ˆλ‚΄ν•©λ‹ˆλ‹€. μ„Έμ…˜μ€ 지침과 문제 해결이 ν˜Όν•©λœ κ²ƒμ²˜λŸΌ 보이며, AlohaλŠ” λ¬Έμ œκ°€ λ°œμƒν•˜λ©΄ 문제λ₯Ό ν•΄κ²°ν•©λ‹ˆλ‹€. CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ κΈ€κΌ΄κ³Ό 색상을 μ μš©ν•©λ‹ˆλ‹€. λ°œν‘œμžλŠ” CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ ν…μŠ€νŠΈμ— λ‹€μ–‘ν•œ κΈ€κΌ΄κ³Ό 색상을 μ μš©ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. 색상 μ½”λ“œ μ‚¬μš©, Google Fonts κ°€μ Έμ˜€κΈ° 및 λ‹€μš΄λ‘œλ“œ ν•œ κΈ€κΌ΄ νŒŒμΌμ„ μ μš©ν•˜λŠ” 방법에 λŒ€ν•΄ μ„€λͺ…ν•©λ‹ˆλ‹€. Google Fontsμ—μ„œ 글꼴을 μ„ νƒν•˜κ³  κ΅¬ν˜„ν•˜λŠ” 과정은 κΈ€κΌ΄ μ½”λ“œλ₯Ό μ‚½μž…ν•˜κ³  font-family 속성을 μ‚¬μš©ν•˜μ—¬ μ μš©ν•˜λŠ” 방법을 ν¬ν•¨ν•˜μ—¬ λ‹¨κ³„λ³„λ‘œ μ„€λͺ…λ©λ‹ˆλ‹€. λ°œν‘œμžλŠ” λ˜ν•œ κΈ€κΌ΄ 폴더λ₯Ό λ§Œλ“€κ³ , κ·Έ μ•ˆμ— κΈ€κΌ΄ νŒŒμΌμ„ λ„£κ³  @font-face κ·œμΉ™μ„ μ‚¬μš©ν•˜μ—¬ κΈ€κΌ΄κ³Ό 파일 경둜λ₯Ό μ§€μ •ν•˜μ—¬ 둜컬 κΈ€κΌ΄ νŒŒμΌμ„ μ‚¬μš©ν•˜λŠ” 방법을 μ„€λͺ…ν•©λ‹ˆλ‹€. CSS μŠ€νƒ€μΌλ§ 및 λ²„νŠΌ λ””μžμΈ 이 ν† λ‘ μ—μ„œλŠ” ν…μŠ€νŠΈ μ„œμ‹κ³Ό λ²„νŠΌ λ””μžμΈμ— 쀑점을 두고 CSS μŠ€νƒ€μΌλ§μ˜ λ‹€μ–‘ν•œ 츑면을 λ‹€λ£Ήλ‹ˆλ‹€. λ°œν‘œμžλŠ” κΈ€κΌ΄ 크기, 쀄 간격 및 색상을 μ‘°μ •ν•˜λŠ” λ°©λ²•λΏλ§Œ μ•„λ‹ˆλΌ λ‹€λ₯Έ κΈ€κΌ΄ κ°€μ€‘μΉ˜μ™€ μŠ€νƒ€μΌμ„ μ μš©ν•˜λŠ” 방법을 μ„€λͺ…ν•©λ‹ˆλ‹€. κ°•μ‘°μ„ κ³Ό μ˜€λ²„λΌμΈκ³Ό 같은 ν…μŠ€νŠΈ μž₯μ‹μ˜ μ‚¬μš©μ„ 보여 μ£Όκ³  CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ λ²„νŠΌ μŠ€νƒ€μΌλ§ν•˜λŠ” 방법에 λŒ€ν•΄ μ„€λͺ…ν•©λ‹ˆλ‹€. μ—°μ‚¬λŠ” λ˜ν•œ μš”μ†Œμ— μƒν˜Έ μž‘μš©μ„±μ„ μΆ”κ°€ν•˜κΈ° μœ„ν•΄ λ§ˆμš°μŠ€μ™€ 같은 가상 선택기λ₯Ό μ–ΈκΈ‰ν•©λ‹ˆλ‹€. μ„Έμ…˜μ€ CSS κΈ°λ³Έ 사항에 λŒ€ν•œ λ‹€κ°€μ˜€λŠ” μ£Όμ œμ™€ ν•™μŠ΅μ„ κ°•ν™”ν•˜κΈ° μœ„ν•œ 타이핑 μ—°μŠ΅ μ œμ•ˆμœΌλ‘œ λ§ˆλ¬΄λ¦¬λ©λ‹ˆλ‹€.