λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
✏️ DevLog/Devcourse

[DevCourse] μƒμ„±ν˜• AI ν™œμš© λ°±μ—”λ“œ λ°λΈŒμ½”μŠ€ 3일차

by hyebin (Helia) 2025. 4. 8.
λ°˜μ‘ν˜•

λ“œλ””μ–΄ λ°λΈŒμ½”μŠ€ 3일 μ°¨!

 

μ˜€λŠ˜μ€ HTML κΈ°λ³Έ ꡬ쑰에 λŒ€ν•΄ λ°°μš°λŠ” μ‹œκ°„μ΄μ—ˆλŠ”λ°, 이미 μ•Œκ³  μžˆλ‹€κ³  μƒκ°ν–ˆλ˜ 뢀뢄이 λ§Žμ•„μ„œ μ²˜μŒμ—” μ’€ κ°€λ³κ²Œ λŠκ»΄μ‘Œλ‹€.

이미 μ•Œκ³  있던 λ‚΄μš©μ„ λ‹€μ‹œ μ •λ¦¬ν•˜λ©° λ‚΄ κ²ƒμœΌλ‘œ λ‹€μ§ˆ 수 μžˆλŠ” μ‹œκ°„μ΄μ–΄μ„œ μ’‹μ•˜λ‹€


πŸ— HTML κΈ°λ³Έ ꡬ쑰 λ‹€μ‹œ 보기

<!DOCTYPE html>λΆ€ν„° <head>, <body> κ΅¬μ‘°κΉŒμ§€. 항상 μŠ΅κ΄€μ²˜λŸΌ 적던 λΆ€λΆ„μ΄μ—ˆμ§€λ§Œ, μ™œ 이 ꡬ쑰가 ν•„μš”ν•œμ§€λ₯Ό λ‹€μ‹œκΈˆ 생각해 보게 됐닀.

<meta>, <title>, <link>, <script> λ“± <head> μ•ˆμ— λ“€μ–΄κ°€λŠ” μš”μ†Œλ“€λ„ λ‹€μ‹œ μ •λ¦¬ν•˜λ©°, 이이 μš”μ†Œλ“€μ΄ SEO, νŽ˜μ΄μ§€ 정보 전달, μŠ€νƒ€μΌ 적용 등에 μ€‘μš”ν•œ 역할을 ν•œλ‹€λŠ” κ±Έ λ³΅μŠ΅ν•  수 μžˆμ—ˆλ‹€.

λ“€μ—¬ μ“°κΈ°λ‚˜ νƒœκ·Έμ˜ 쀑첩 ꡬ쑰처럼 μ‚¬μ†Œν•΄ λ³΄μ΄λŠ” 뢀뢄도, μ½”λ“œμ˜ 가독성과 μœ μ§€λ³΄μˆ˜μ„±μ— 영ν–₯을 μ€€λ‹€λŠ” κ±Έ λ‹€μ‹œ λŠκΌˆλ‹€.

무언가 μƒˆλ‘­κΈ°λ³΄λ‹€ 기쑴의 지식을 ν•œλ²ˆ 더 μ •λˆν•˜λŠ” μ‹œκ°„μ΄λΌμ„œ, κ°€λ³μ§€λ§Œ μ•Œμ°¬ νλ¦„μ΄μ—ˆλ‹€.


πŸ’» μ‹€μŠ΅: μžκΈ°μ†Œκ°œ νŽ˜μ΄μ§€ λ§Œλ“€κΈ°

 

HTML ꡬ쑰만으둜 μ•„μ£Ό κ°„λ‹¨ν•œ μžκΈ°μ†Œκ°œ νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€μ–΄λ³΄λŠ” μ‹€μŠ΅λ„ 진행됐닀.

<h1>, <p>, <img>, <a> νƒœκ·Έμ²˜λŸΌ κ°€μž₯ 기초적인 κ²ƒλ“€μ΄μ§€λ§Œ μ΄κ±Έλ‘œλ„ μΆ©λΆ„νžˆ λ‚˜λ₯Ό ν‘œν˜„ν•  수 μžˆλŠ” ꡬ쑰λ₯Ό λ§Œλ“€ 수 μžˆλ‹€λŠ” 게 μž¬λ°Œμ—ˆλ‹€.

<img>에 alt 속성을 μ λŠ” μŠ΅κ΄€, <a> νƒœκ·Έμ˜ target 속성 같은 μ‚¬μ†Œν•œ λ””ν…ŒμΌλ„ ν•œλ²ˆ 더 μ±™κΈΈ 수 μžˆμ—ˆλ‹€.


🧑 λŠλ‚€ 점

 

였늘 배운 건 ‘기초 μ€‘μ˜ 기초’μ˜€μ§€λ§Œ, κ·Έ μ•ˆμ—μ„œλ„ 배울 게 μ°Έ λ§Žμ•˜λ‹€.

특히 μ΅μˆ™ν•˜λ‹€κ³  λ„˜κ²Όλ˜ HTML νƒœκ·Έ ν•˜λ‚˜ν•˜λ‚˜μ— 의미λ₯Ό λ‹€μ‹œ λΆ€μ—¬ν•˜λŠ” λŠλ‚Œμ΄λž„κΉŒ.

κ·Έλ™μ•ˆμ€ λ¬΄μ˜μ‹μ μœΌλ‘œ μ‚¬μš©ν•˜λ˜ νƒœκ·Έλ“€λ„ λ‹€μ‹œ ν•œ 번 의미λ₯Ό μ§šμ–΄λ³΄λ‹ˆ, 훨씬 더 λͺ…ν™•ν•˜κ²Œ μ΄ν•΄λ˜λŠ” 것 κ°™μ•˜λ‹€.

 

μ˜€λŠ˜λ„ μž‘μ§€λ§Œ ν™•μ‹€ν•œ μ„±μž₯을 ν–ˆλ‹€λŠ” λŠλ‚Œμ΄ λ“ λ‹€.

λ‹€μŒμ—” CSS둜 λ„˜μ–΄κ°ˆ 텐데, λ²Œμ¨λΆ€ν„° κΈ°λŒ€λœλ‹€!

λ°˜μ‘ν˜•