HTML References
1. HTML이란?
HTML(HyperText Markup Language)은 웹 페이지를 구조화하고, 텍스트, 이미지, 링크, 비디오 등의 콘텐츠를 표시하기 위해 사용되는 마크업 언어입니다.
HTML은 웹의 기본 언어로, 모든 웹 페이지의 근간을 이루며, 태그(<html>, <head>,
<body> 등)와 속성(예: lang, charset 등)을 사용하여 문서를 구성합니다.
2. 주요 HTML 태그 참조
HTML 태그는 웹 페이지의 구조를 정의하는 데 사용됩니다. 아래는 자주 사용되는 주요 HTML 태그 목록입니다.
| 태그 | 설명 | 예시 |
|---|---|---|
<html> |
HTML 문서의 루트 요소. 모든 HTML 코드는 이 태그 내에 포함됨. | <html lang="ko"></html> |
<head> |
메타데이터, 제목, 스타일, 스크립트 등을 포함하는 요소. | <head></head> |
<title> |
웹 페이지의 제목을 정의하며, 브라우저 탭에 표시됨. | <title>페이지 제목</title> |
<meta> |
문서의 메타데이터를 정의하는 요소. | <meta charset="UTF-8"> |
<body> |
웹 페이지의 본문 콘텐츠를 포함하는 요소. | <body></body> |
<h1> - <h6> |
제목(Heading)을 정의하는 요소. <h1>이 가장 크고, <h6>이 가장 작음. |
<h1>제목</h1> |
<p> |
단락을 정의하는 요소. | <p>이것은 단락입니다.</p> |
<a> |
하이퍼링크를 정의하는 요소. | <a href="<https://www.example.com>">링크</a> |
<img> |
이미지를 삽입하는 요소. | <img src="image.jpg" alt="이미지 설명"> |
<ul>, <ol> |
순서 없는 목록(ul) 및 순서 있는 목록(ol)을 정의. | <ul><li>항목</li></ul> |
<table> |
테이블을 정의하는 요소. | <table><tr><td>내용</td></tr></table> |
<form> |
사용자 입력을 받기 위한 폼을 정의하는 요소. | <form action="/submit"></form> |
<input> |
폼 필드를 정의하는 요소. | <input type="text" name="username"> |
<button> |
버튼을 생성하는 요소. | <button>클릭하세요</button> |
<div> |
블록 레벨 요소를 정의하며, 레이아웃을 구성하는 데 자주 사용됨. | <div></div> |
<span> |
인라인 요소를 정의하며, 텍스트의 일부분에 스타일을 적용할 때 사용됨. | <span>텍스트</span> |
3. HTML 속성 참조
HTML 태그에는 추가적인 정보를 제공하기 위해 다양한 속성을 사용할 수 있습니다.
| 속성 | 설명 | 예시 |
|---|---|---|
id |
HTML 요소의 고유 식별자를 정의합니다. | <div id="header"></div> |
class |
CSS 스타일링이나 JavaScript에서 참조할 수 있는 클래스 이름을 정의합니다. | <p class="intro"></p> |
src |
이미지, 비디오, 오디오 등의 파일 경로를 지정합니다. | <img src="image.jpg"> |
href |
링크의 URL을 지정합니다. | <a href="<https://www.example.com>">링크</a> |
alt |
이미지가 로드되지 않을 때 표시될 대체 텍스트를 정의합니다. | <img src="image.jpg" alt="설명"> |
style |
인라인 스타일을 적용합니다. | <p style="color: red;">텍스트</p> |
title |
요소에 마우스를 올렸을 때 나타나는 추가 설명을 정의합니다. | <a href="#" title="추가 설명">링크</a> |
target |
링크를 새 창이나 현재 창에서 열지 지정합니다. | <a href="#" target="_blank">새 창 링크</a> |
action |
폼 제출 시 데이터가 전송될 URL을 지정합니다. | <form action="/submit"></form> |
method |
폼 전송 방식 (GET 또는 POST)을 정의합니다. | <form method="post"></form> |
4. HTML5 새로운 기능
HTML5는 많은 새로운 기능과 요소를 도입하여 웹 개발을 보다 간편하고 강력하게 만들었습니다.
| 요소 | 설명 | 예시 |
|---|---|---|
<article> |
독립적이고 재사용 가능한 콘텐츠 섹션을 정의. | <article></article> |
<section> |
문서의 구획을 정의. | <section></section> |
<header> |
소개나 탐색 링크를 포함하는 문서의 헤더를 정의. | <header></header> |
<footer> |
문서나 섹션의 바닥글을 정의. | <footer></footer> |
<nav> |
내비게이션 링크를 정의. | <nav></nav> |
<aside> |
주요 콘텐츠와는 별도의 사이드 콘텐츠를 정의. | <aside></aside> |
<audio> |
오디오 콘텐츠를 포함하는 요소. | <audio controls src="audio.mp3"></audio> |
<video> |
비디오 콘텐츠를 포함하는 요소. | <video controls src="video.mp4"></video> |
<canvas> |
2D 그래픽을 그릴 수 있는 비트맵 캔버스를 정의. | <canvas></canvas> |
<figure> |
이미지나 일러스트와 같은 콘텐츠를 그룹화. | <figure></figure> |
<figcaption> |
<figure> 요소에 대한 캡션을 정의. |
<figcaption>캡션</figcaption> |
5. HTML 참고 사이트 및 리소스
HTML을 학습하고, 관련 정보를 확인할 수 있는 유용한 리소스들은 다음과 같습니다.
- W3Schools HTML Tutorial: HTML 기초부터 고급까지 단계별 학습을 제공하는 웹 사이트.
- MDN Web Docs: HTML, CSS, JavaScript 및 웹 개발 관련 전반적인 문서를 제공하는 개발자 참고 사이트.
- Can I Use: HTML5, CSS3 및 최신 웹 기술의 브라우저 지원 여부를 확인할 수 있는 사이트.
- HTML Living Standard: HTML의 최신 표준을 관리하는 WHATWG의 공식 문서.
- CSS Tricks HTML Guide: HTML에 대한 심화 가이드 및 사용 사례를 다루는 블로그.
6. 브라우저 호환성
HTML 태그와 속성은 대부분의 최신 브라우저에서 지원되지만, 특정 HTML5 요소는 구형 브라우저에서는 제대로 동작하지 않을 수 있습니다. 최신 HTML5 표준을 사용하려면 브라우저 호환성을 항상 확인해야 합니다.
| 브라우저 | HTML5 지원 여부 |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | 부분 지원 (IE11 이하 제한적) |