Investor's wiki

하이퍼텍스트 마크업 언어 – HTML

하이퍼텍스트 마크업 언어 – HTML

HTML(HyperText Markup Language)μ΄λž€ λ¬΄μ—‡μž…λ‹ˆκΉŒ?

HTML(HyperText Markup Language)은 인터넷에 ν‘œμ‹œν•˜κΈ° μœ„ν•΄ νŒŒμΌμ— μ‚½μž…λœ λ§ˆν¬μ—… 기호 λ˜λŠ” μ½”λ“œμ˜ μ§‘ν•©μž…λ‹ˆλ‹€. λ§ˆν¬μ—…μ€ μ›Ή λΈŒλΌμš°μ €μ— μ›Ή νŽ˜μ΄μ§€μ˜ 단어와 이미지λ₯Ό ν‘œμ‹œν•˜λŠ” 방법을 μ•Œλ €μ€λ‹ˆλ‹€.

각 κ°œλ³„ 쑰각 λ§ˆν¬μ—… μ½”λ“œ("<"와 ">" 사이에 μœ„μΉ˜)λ₯Ό μš”μ†ŒλΌκ³  ν•˜μ§€λ§Œ λ§Žμ€ μ‚¬λžŒλ“€μ΄ 이λ₯Ό νƒœκ·ΈλΌκ³ λ„ ν•©λ‹ˆλ‹€. 일뢀 μš”μ†ŒλŠ” 일뢀 λ””μŠ€ν”Œλ ˆμ΄ νš¨κ³Όκ°€ μ‹œμž‘λ˜κ³  μ’…λ£Œλ  λ•Œλ₯Ό λ‚˜νƒ€λ‚΄λŠ” 쌍으둜 μ œκ³΅λ©λ‹ˆλ‹€.

HTML μ„€λͺ…

HyperText Markup LanguageλŠ” μ›Ήμ‚¬μ΄νŠΈ 생성을 μš©μ΄ν•˜κ²Œ ν•˜λŠ” 컴퓨터 μ–Έμ–΄μž…λ‹ˆλ‹€. λ‹€λ₯Έ 언어와 λ§ˆμ°¬κ°€μ§€λ‘œ μ½”λ“œ 단어와 ꡬ문이 μžˆλŠ” μ–Έμ–΄λŠ” μƒλŒ€μ μœΌλ‘œ μ΄ν•΄ν•˜κΈ° 쉽고 μ‹œκ°„μ΄ 지남에 따라 λˆ„κ΅°κ°€κ°€ λ§Œλ“€ 수 μžˆλŠ” λŠ₯λ ₯이 점점 더 κ°•λ ₯ν•΄μ§‘λ‹ˆλ‹€. HTML은 μ–Έμ–΄λ₯Ό μ„€κ³„ν•˜κ³  μœ μ§€ κ΄€λ¦¬ν•˜λŠ” 쑰직인 World Wide Web Consortium을 κ°€μž₯ν•˜μ—¬ μΈν„°λ„·μ˜ μš”κ΅¬ 사항과 μš”κ΅¬ 사항을 μΆ©μ‘±ν•˜λ„λ‘ 계속 λ°œμ „ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ Web 2.0 으둜의 μ „ν™˜κ³Ό ν•¨κ»˜ .

ν•˜μ΄νΌν…μŠ€νŠΈλŠ” 인터넷 μ‚¬μš©μžκ°€ 웹을 νƒμƒ‰ν•˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€. ν•˜μ΄νΌλ§ν¬λΌλŠ” 특수 ν…μŠ€νŠΈλ₯Ό ν΄λ¦­ν•˜λ©΄ μ‚¬μš©μžκ°€ μƒˆ νŽ˜μ΄μ§€λ‘œ μ΄λ™ν•©λ‹ˆλ‹€. ν•˜μ΄νΌλ₯Ό μ‚¬μš©ν•œλ‹€λŠ” 것은 μ„ ν˜•μ μ΄μ§€ μ•Šλ‹€λŠ” 것을 μ˜λ―Έν•˜λ―€λ‘œ μ‚¬μš©μžλŠ” μ‚¬μš© κ°€λŠ₯ν•œ 링크λ₯Ό ν΄λ¦­ν•˜κΈ°λ§Œ ν•˜λ©΄ μΈν„°λ„·μ˜ μ–΄λŠ 곳이든 갈 수 μžˆμŠ΅λ‹ˆλ‹€. λ§ˆν¬μ—…μ€ HTML νƒœκ·Έκ°€ νƒœκ·Έ μ•ˆμ˜ ν…μŠ€νŠΈμ— μˆ˜ν–‰ν•˜λŠ” μž‘μ—…μž…λ‹ˆλ‹€. 그듀은 그것을 νŠΉμ • μœ ν˜•μ˜ ν…μŠ€νŠΈλ‘œ ν‘œμ‹œν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, λ§ˆν¬μ—… ν…μŠ€νŠΈλŠ” λ‹¨μ–΄λ‚˜ ꡬ에 λŒ€ν•œ νŠΉμ • 주의λ₯Ό 끌기 μœ„ν•΄ λ³Όλ“œμ²΄ λ˜λŠ” μ΄νƒ€λ¦­μ²΄μ˜ ν˜•νƒœλ‘œ 제곡될 수 μžˆμŠ΅λ‹ˆλ‹€.

ν•˜μ΄νΌν…μŠ€νŠΈ λ§ˆν¬μ—… μ–Έμ–΄ 기초

기본적으둜 HTML은 ν…μŠ€νŠΈ νŒŒμΌμ— μž…λ ₯된 일련의 짧은 μ½”λ“œμž…λ‹ˆλ‹€. 이듀은 HTML의 κΈ°λŠ₯을 κ°•ν™”ν•˜λŠ” νƒœκ·Έμž…λ‹ˆλ‹€. ν…μŠ€νŠΈλŠ” HTML 파일둜 μ €μž₯되고 μ›Ή λΈŒλΌμš°μ €λ₯Ό 톡해 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. λΈŒλΌμš°μ €λŠ” νŒŒμΌμ„ 읽고 μž‘μ„±μžκ°€ κ°€μ‹œμ  λ Œλ”λ§μ΄ λ˜λŠ” 것을 μž‘μ„±ν•˜λŠ” 데 μ‚¬μš©ν•œ μ½”λ“œμ˜ μ§€μ‹œμ— 따라 ν…μŠ€νŠΈλ₯Ό κ°€μ‹œμ  ν˜•μ‹μœΌλ‘œ λ³€ν™˜ν•©λ‹ˆλ‹€. HTML을 μž‘μ„±ν•˜λ €λ©΄ μž‘μ„±μžμ˜ 비전을 λ§Œλ“€κΈ° μœ„ν•΄ νƒœκ·Έλ₯Ό μ˜¬λ°”λ₯΄κ²Œ μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€.

νƒœκ·ΈλŠ” HTML μ½”λ“œμ—μ„œ 일반 ν…μŠ€νŠΈλ₯Ό κ΅¬λΆ„ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. νƒœκ·ΈλŠ” μ›Ή νŽ˜μ΄μ§€μ— κ·Έλž˜ν”½, 이미지 및 ν‘œλ₯Ό ν‘œμ‹œν•  수 μžˆλ„λ‘ ν•˜λŠ” κΊΎμ‡  κ΄„ν˜Έ μ‚¬μ΄μ˜ λ‹¨μ–΄μž…λ‹ˆλ‹€. λ‹€λ₯Έ νƒœκ·ΈλŠ” λ‹€λ₯Έ κΈ°λŠ₯을 μˆ˜ν–‰ν•©λ‹ˆλ‹€. κ°€μž₯ 기본적인 νƒœκ·ΈλŠ” ν…μŠ€νŠΈμ— μ„œμ‹μ„ μ μš©ν•©λ‹ˆλ‹€. μ›Ή μΈν„°νŽ˜μ΄μŠ€κ°€ 보닀 λ™μ μœΌλ‘œ λ³€ν•΄μ•Ό ν•˜λ―€λ‘œ CSS(Cascading Style Sheets) 및 JavaScript μ‘μš© ν”„λ‘œκ·Έλž¨μ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. CSSλŠ” μ›Ή νŽ˜μ΄μ§€μ˜ 접근성을 높이고 JavaScriptλŠ” κΈ°λ³Έ HTML에 κΈ°λŠ₯을 μΆ”κ°€ν•©λ‹ˆλ‹€.

HTML λŒ€ XML

HTMLκ³Ό 달리 Extensible Markup Language λ˜λŠ” XML을 μ‚¬μš©ν•˜λ©΄ μ‚¬μš©μžκ°€ μžμ‹ μ˜ λ§ˆν¬μ—…μ„ μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, XML을 μ‚¬μš©ν•˜μ—¬ ν•œ μ‚¬μš©μžλŠ” νƒœκ·Έλ‘œ 각주λ₯Ό ν‘œμ‹œν•˜λ„λ‘ 선택할 수 있고 λ‹€λ₯Έ μ‚¬μš©μžλŠ” 을 선택할 수 μžˆμŠ΅λ‹ˆλ‹€.

HTML을 μ‚¬μš©ν•˜λ©΄ ν•˜λ‚˜μ˜ 미리 κ²°μ •λœ νƒœκ·Έλ§Œ νŠΉμ • μœ ν˜•μ˜ 정보λ₯Ό λ‚˜νƒ€λ‚΄λŠ” 데 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. XML λ¬Έμ„œλŠ” μ‚¬μš©μž μ •μ˜ νƒœκ·Έλ₯Ό ν¬ν•¨ν•˜κ³  λ¬Έμ„œκ°€ λ§ˆν¬μ—…κ³Ό μ½˜ν…μΈ λ‘œλ§Œ κ΅¬μ„±λ˜μ–΄ 있기 λ•Œλ¬Έμ— 읽기 μ‰½μŠ΅λ‹ˆλ‹€.

ν•˜μ΄λΌμ΄νŠΈ

  • HTML(HyperText Markup Language)은 μ›Ή λΈŒλΌμš°μ €μ—μ„œ μ›”λ“œ μ™€μ΄λ“œ μ›Ήμ—μ„œ νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•˜λŠ” 데 μ‚¬μš©ν•˜λŠ” κΈ°λ³Έ μŠ€ν¬λ¦½νŒ… μ–Έμ–΄μž…λ‹ˆλ‹€.

  • HTML의 초기 버전은 정적(Web 1.0)μ΄μ—ˆμ§€λ§Œ, μ΅œμ‹  버전은 μƒλ‹Ήν•œ 동적 μœ μ—°μ„±(Web 2.0, 3.0)을 νŠΉμ§•μœΌλ‘œ ν•©λ‹ˆλ‹€.

  • λ§ˆν¬μ—…μ€ 두 개의 λΎ°μ‘±ν•œ λŒ€κ΄„ν˜Έ(예: <각주>) 사이에 λ‚˜νƒ€λ‚˜λŠ” ν…μŠ€νŠΈμ΄κ³  λ‚΄μš©μ€ κ·Έ μ™Έμ˜ λͺ¨λ“  κ²ƒμž…λ‹ˆλ‹€.

  • ν•˜μ΄νΌν…μŠ€νŠΈλ₯Ό μ‚¬μš©ν•˜λ©΄ μ‚¬μš©μžκ°€ 링크λ₯Ό ν΄λ¦­ν•˜κ³  ν•΄λ‹Ή λ§ν¬μ—μ„œ μ°Έμ‘°ν•˜λŠ” μƒˆ νŽ˜μ΄μ§€λ‘œ λ¦¬λ””λ ‰μ…˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.