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 태그
| 태그 | 설명 | 예시 |
|---|---|---|
<h1> ~ <h6> |
제목(Heading) 태그 | <h1>제목</h1>
|
<p> |
문단(Paragraph) 태그 | <p>문단 내용</p>
|
<a> |
하이퍼링크 태그 | <a href="url">링크</a>
|
<img> |
이미지 삽입 태그 | <img src="이미지주소" alt="설명">
|
<ul>, <ol>, <li> |
리스트(목록) 태그 | <ul><li>아이템</li></ul>
|
<table> |
표(Table) 생성 태그 | <table><tr><td>내용</td></tr></table>
|
<div> |
구역(Grouping) 태그 (block) | <div>내용</div>
|
<span> |
구역 태그 (inline) | <span>짧은 내용</span>
|
HTML5의 주요 추가 기능
HTML5는 기존 HTML보다 더 많은 기능을 제공합니다:
- 의미론적 태그(Semantic tags)
* 예:<header>,<footer>,<article>,<section>→ 웹 페이지 구조를 명확하게 표현할 수 있도록 도와줍니다.
- 멀티미디어 지원
* 예:<audio>,<video>→ 플러그인 없이 오디오/비디오 재생 가능
- 향상된 폼 기능
* 입력 유형 추가 (email, date, number 등) * 자동 완성, 필수 입력 지정 기능 강화
- 캔버스(Canvas)와 SVG 지원
* <canvas>를 통해 그래픽을 직접 그릴 수 있음
- 로컬 저장소(LocalStorage, SessionStorage)
* 사용자의 데이터를 브라우저 안에 저장 (쿠키보다 빠르고 안전)
HTML과 함께 사용하는 기술
- CSS (Cascading Style Sheets)
* HTML 요소에 색상, 글꼴, 배경 등 디자인 적용
- JavaScript
* 클릭 이벤트, 폼 검증, 애니메이션 등 웹 페이지에 동적인 기능 추가
요약
- HTML은 웹 페이지의 뼈대를 만든다.
- HTML은 태그를 통해 웹 브라우저에 표시할 콘텐츠를 지정한다.
- 최신 표준인 HTML5는 다양한 기능과 퍼포먼스 향상을 제공한다.
- CSS와 JavaScript를 함께 사용하면 더욱 완성도 높은 웹사이트 제작이 가능하다.
학습 자료
다음 학습 단계
- CSS 기초: 웹 페이지에 스타일 적용 배우기
- JavaScript 기초: 웹 페이지에 기능 추가 배우기
- HTML 고급: 폼, 멀티미디어, API 활용 배우기
