👩🏼💻 HTML이란?
- HTML(HyperText Markup Language)은 웹 페이지의 구조와 내용을 작성하는 마크업 언어입니다.
- 웹 브라우저가 읽어 사람이 보는 웹 페이지로 렌더링해 줍니다.
- 텍스트, 이미지, 링크, 버튼 등 웹 요소의 위치와 역할을 정의합니다.
- HTML 문서는 보통
.html 확장자로 저장됩니다.
📄 HTML 문서 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>HTML 기본 구조를 배우고 있습니다.</p>
</body>
</html>
| 태그 | 설명 |
|---|
<!DOCTYPE html> | HTML5 문서 선언 |
<html> | HTML 문서의 루트 |
<head> | 문서 정보, 메타데이터 |
<title> | 브라우저 탭 제목 |
<body> | 사용자에게 보여지는 실제 내용 |
🗝️ 태그(Tag)와 요소(Element)
- 태그 :
<태그명> 형태, 대부분 시작 + 종료 태그 존재 (<p>, </p>)
- 요소 : 태그와 그 안의 콘텐츠를 모두 포함한 것
<p>안녕하세요!</p>
✅ 빈 태그 (self-closing tag)
- 종료 태그 없이 닫는 단일 태그
- 예:
<br>, <hr>, <img>, <input>
🔗 자주 쓰는 기본 태그
| 태그 | 역할 | 예시 |
|---|
<h1> ~ <h6> | 제목 태그 (숫자 작을수록 큼) | <h1>큰 제목</h1> |
<p> | 문단 | <p>문단 내용입니다.</p> |
<a> | 하이퍼링크 | <a href="https://google.com">구글</a> |
<img> | 이미지 삽입 | <img src="cat.jpg" alt="고양이"> |
<ul>, <ol>, <li> | 목록 (순서 없음/있음) | <ul><li>사과</li></ul> |
<div> | 구역을 나누는 블록 요소 | |
<span> | 인라인 텍스트 묶음 | |
➕ 속성(Attribute)이란?
- 태그에 부가 정보를 제공하는 옵션
"속성명="값"" 형태로 사용
속성 예시
<a href="https://naver.com">네이버</a>
<img src="cat.jpg" alt="귀여운 고양이">
<input type="text" placeholder="이름 입력">
| 속성명 | 역할 |
|---|
href | 링크 목적지 |
src | 이미지 경로 |
alt | 이미지 대체 텍스트 |
type | 입력 필드 유형 지정 |
placeholder | 입력 안내 문구 |
💡 HTML의 역할 요약
- 웹 페이지의 뼈대를 구성 (구조 중심)
- 디자인은 CSS, 동작은 JavaScript가 담당
- 즉, HTML은 웹 개발의 시작점이자 기반입니다.
