1. HTML이 하는 일
HTML은 “기능”을 만들기보다는 페이지 뼈대(구조)를 만든다.
2. HTML 기본구조
1. 문서 기본 선언 (DOCTYPE + html)
HTML 문서임을 브라우저에 알려주는 영역
<!DOCTYPE html>
<html lang="ko">- <!DOCTYPE html>: HTML5 문서라는 선언
- <html lang="ko">: 언어 설정 (SEO + 접근성에 영향)
2. head 영역 (설정 / 메타데이터 영역)
화면에는 직접 안 보이지만 페이지 설정 전부가 들어가는 핵심 영역
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>내 사이트</title>
<meta name="description" content="설명" />
</head>1) 기본 설정
- meta charset="UTF-8" → 한글 깨짐 방지
- viewport → 반응형 필수 설정
2) SEO 관련
- <title> → 검색 결과 제목
- <meta name="description"> → 검색 설명
3) 외부 리소스
<link rel="stylesheet" href="style.css" />- CSS 연결
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">- 폰트 / 아이콘 / 라이브러리
<script defer src="app.js"></script>- JS (보통 body 끝에서 많이 씀)
3. body 영역 - 사용자가 실제로 보는 모든 UI
<body>
<div id="root"></div>
</body>
4. script 영역 (동작 / 로직)
<script src="app.js"></script>위치 중요 포인트
- head에 넣으면 → defer 필요
- body 끝에 넣으면 → 일반적으로 가장 안전
5. index.html 전체 구조 (정석 템플릿)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Page</title>
<meta name="description" content="설명" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>'Web' 카테고리의 다른 글
| Local Storage, Session Storage, Cookie 사용 용도와 차이점 정리 (0) | 2026.07.01 |
|---|