HTML 기초
HTML은 웹 페이지의 구조를 설계하는 마크업 언어입니다. HyperText Markup Language의 약자로, 웹의 뼈대를 만듭니다.
개요
HTML은 웹페이지를 구성하는 가장 기본적인 언어로, 텍스트, 이미지, 링크, 입력창 등 다양한 콘텐츠를 표현할 수 있습니다. HTML은 태그(tag)들을 사용하여 콘텐츠의 의미와 구조를 명시합니다.
기본 문서 구조
HTML 문서는 다음과 같은 기본 구조를 가집니다:
Html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<h1>제목</h1>
<p>본문 내용</p>
</body>
</html>
<head> 태그
화면에 보이지 않는 영역에 속하며 seo등 문서의 다양한 정보와 기능들을 담는 곳
| 태그 | 기능 |
|---|---|
<title> |
문서제목 태그 |
<meta> |
문서의 주요한 정보를 담는 태그 |
<link> |
외부 css파일을 불러올 때 사용 |
<style> |
문서 내부에 css를 사용할 때 사용 |
<body> 태그
화면에 보이는 영역에 속하며 문서의 골격에 해당되는 영역
| 태그 | 기능 |
|---|---|
<h1> ~ <h6> |
제목 태그 |
<p> |
문단 |
<a> |
하이퍼링크 |
<img>,<audio>,<video> |
이미지, 오디오, 동영상 |
<iframe> |
외부 문서 삽입 |
<ul>, <ol>, <li>, <dl>,
<dt>, <dd>
|
목록 |
<div>, <span> |
구역 분리 |
<input>, <form>, <textarea> |
사용자 입력 |
<button> |
버튼 |
<table> , <tr> , <td> ,
<th> , <colgroup> , <col>
|
표 |
시맨틱 태그
시맨틱 태그(Semantic Tag)는 HTML5에서 도입된 태그들로, 문서의 구조와 의미를 명확하게 나타내는 역할
| 태그 | 기능 |
|---|---|
<header> |
문서의 머리말 영역 |
<nav> |
네비게이션 링크 영역 |
<section> |
구역을 나타낼때 사용 |
<article> |
기사나, 글, 포스트, 리뷰 등을 담은 영역 |
<aside> |
사이드바 영역을 표현할 때 사용 |
<main>
|
문서의 중요 컨텐츠 영역 |
<figure> / <figcaption> |
사진, 그림, 미디어 영역 / 설명 |
<mark> |
중요한 텍스트 강조시 사용 |
<footer> |
바닥글, 사업자정보 및 영업시간등 다양한 정보를 담는 영역 |
주의사항 및 팁
- 모든 HTML 문서는
<!DOCTYPE html>선언으로 시작해야 합니다. - 태그는 열고 닫는 구조로 작성되며, 일부는 닫지 않아도 됩니다(
<br>,<img>등). - HTML은 CSS, JavaScript와 함께 사용될 때 시각적 스타일과 동작을 추가할 수 있습니다.
참고
HTML 자체는 동작이 아니라 구조를 정의하는 역할을 합니다. 동작은 JavaScript, 디자인은 CSS가 담당합니다.
댓글