HTML
기술노트
HTML 기초
HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 언어입니다. 우리가 인터넷에서 보는 모든 웹사이트는 기본적으로 HTML을 기반으로 만들어졌습니다.
HTML이란 무엇인가?
- HTML은 "HyperText Markup Language"의 약자입니다.
- "HyperText"는 링크를 통해 문서 간 연결이 가능하다는 의미입니다.
- "Markup Language"는 문서의 구조를 설명하는 태그(명령어) 언어를 뜻합니다.
즉, HTML은 **"웹 페이지의 구조를 정의하는 언어"** 입니다.
HTML의 주요 특징
- 웹 페이지의 텍스트, 이미지, 버튼, 링크 등 모든 요소를 정의합니다.
- 웹 브라우저(Chrome, Safari, Edge 등)는 HTML 문서를 읽어 화면에 보여줍니다.
- HTML은 단독으로 동작할 수 있지만, CSS, JavaScript와 함께 사용하여 디자인과 기능을 추가합니다.
- 최신 버전은 HTML5입니다.
HTML의 기본 구조
HTML 문서는 다음과 같은 기본 틀을 가집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 번째 웹 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>웹 페이지를 처음 만들어 봅니다.</p>
</body>
</html>
| 구역 | 설명 |
|---|---|
| <!DOCTYPE html> | 이 문서가 HTML5 문서임을 선언 |
| <html> ~ </html> | HTML 문서 전체를 감싸는 태그 |
| <head> ~ </head> | 문서 정보를 담는 부분 (제목, 문자셋 등) |
| <body> ~ </body> | 실제 웹 페이지에 보이는 내용 (본문) |
HTML 요소(Element)와 속성(Attribute)
요소(Element)
- HTML 요소는 <태그>내용</태그> 형태를 가집니다.
- 예시:
<p>여기는 단락입니다.</p>
속성(Attribute)
- HTML 태그 안에 추가 정보를 제공하는 설정입니다.
- 항상 **이름="값"** 형태를 가집니다.
- 예시:
<a href="https://www.example.com">이동하기</a>
→ 링크를 클릭하면 'https://www.example.com'으로 이동합니다.
주요 HTML 태그
| 태그 | 설명 | 예시 | |||||||
|---|---|---|---|---|---|---|---|---|---|
~ |
제목(Heading) 태그 | 제목 | |||||||
| 문단(Paragraph) 태그 | 문단 내용 | ||||||||
| <a> | 하이퍼링크 태그 | <a href="url">링크</a> | |||||||
| <img> | 이미지 삽입 태그 | <img src="이미지주소" alt="설명"> | |||||||
|
리스트(목록) 태그 |
| |||||||
HTML5의 주요 추가 기능HTML5는 기존 HTML보다 더 많은 기능을 제공합니다:
* 예: <header>, <footer>, <article>, <section> → 웹 페이지 구조를 명확하게 표현할 수 있도록 도와줍니다.
* 예: <audio>, <video> → 플러그인 없이 직접 오디오/비디오 삽입 가능
* 입력 유형 추가 (email, date, number 등) * 자동 완성, 필수 입력 지정 등 기능 강화
* <canvas> 태그를 통해 그래픽 그리기 가능
* 웹 브라우저 안에 데이터를 저장할 수 있게 함 (쿠키보다 안전하고 빠름) HTML과 함께 사용하는 기술
* HTML 요소의 디자인(색, 크기, 배경 등)을 담당합니다.
* 웹 페이지에 동적인 기능(버튼 클릭, 알림창, 애니메이션 등)을 추가합니다. 요약
학습 자료다음 학습 단계
|
