728x90
반응형
🧠 <head>: 웹페이지의 정보(메타데이터)를 담는 공간
- <head> 태그 안에는 웹사이트 자체에 대한 정보가 들어감
- 화면에는 직접 보이지 않지만, 브라우저나 검색 엔진이 이해하는 중요한 정보들이 들어있음
✨ 주요 내용
| <title> | 브라우저 탭 제목 설정 |
| <meta> | 문자 인코딩, 검색엔진 최적화(SEO) 정보 등 |
| <link> | 외부 CSS 파일 연결 |
| <style> | 직접 CSS 작성 |
| <script> | 자바스크립트 코드 (보통은 body 맨 아래 넣지만, head에도 가능) |
🔍 예시
<!DOCTYPE html>
<html>
<!-- head: 웹페이지에 보이지 않는 부분 -->
<head>
<title>Weekly Codeit</title>
</head>
</html>
🫀 <body>: 실제 화면에 보이는 내용
- <body>는 웹페이지에서 사용자에게 보여지는 모든 요소들이 들어가는 공간
✨ 주요 내용
| <h1> ~ <h6> | 제목 |
| <p> | 문단 |
| <img> | 이미지 |
| <a> | 링크 |
| <div>, <span> | 레이아웃을 위한 블록 / 인라인 요소 |
| <ul>, <ol>, <li> | 리스트 |
| <script> | 자바스크립트 (대부분 여기 맨 아래에 넣어요) |
🔍 예시
<!DOCTYPE html>
<html>
<!-- head: 웹페이지에 보이지 않는 부분 -->
<head>
<title>Weekly Codeit</title>
</head>
<!-- body: 웹페이지에 보이는 부분분 -->
<body>
안녕 HTML!
</body>
</html>
✅ 정리
| <head> | 웹페이지 설정 및 정보 | ❌ 화면에 보이지 않음 |
| <body> | 실제 사용자에게 보여질 콘텐츠 | ✅ 화면에 보임 |
728x90
반응형
'웹' 카테고리의 다른 글
| [html] 링크 추가하기 (0) | 2025.04.07 |
|---|---|
| [html] <br> 태그 : 줄 바꿈 (0) | 2025.04.07 |
| [html] 제목(heading) 태그와 단락(paragraph) 태그 (0) | 2025.04.07 |
| [html] 한글을 지원하는 인코딩 (0) | 2025.04.07 |
| [웹] 웹사이트 만들기 (0) | 2025.04.04 |
