본문 바로가기
퍼블리셔 입문/HTML

[HTML 기초] 머리 그리고 몸통

by dblisher 2025. 3. 14.
728x90
<html>
<head>
<body>

 

 

HTML을 작성하는데 있어 꼭 알아야 하는 기본 태그가 있습니다.

바로 <html>, <head>, <body> 태그입니다.

이 태그들은 웹페이지의 뼈대 역할을 하며, 각각의 역할을 이해하면 HTML을 더욱 쉽게 배울 수 있습니다.

 

 

<html> 태그란?

<html> 태그는 웹페이지의 가장 바깥을 감싸는 역할을 합니다.

HTML 문서가 시작되고 끝나는 부분을 나타내며, 모든 내용은 이 태그 안에 들어가야 합니다.

여기서 <!DOCTYPE html>은 현재 문서가 html이다 라고 선언을 하는 것 입니다.

<!DOCTYPE html>
<html>
    여기에 본문 내용 작성!
</html>

 

 

<head> 태그 - 웹페이지의 머리

<head> 태그는 말 그대로 "머리" 역할을 합니다. 이 부분에는 웹페이지에 대한 정보가 들어갑니다.

 

📌 <head> 안에 들어가는 주요 태그들

  • <title> : 웹페이지의 제목 (브라우저 탭에 표시됨)
  • <meta> : 검색 엔진 최적화(SEO), 문자 인코딩, 반응형 설정 등
  • <link> : 외부 CSS 파일 연결
  • <script> : JavaScript 파일 연결
  • <style> : 내부 CSS 스타일 지정
<head>
    <title>내 첫 웹페이지</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

 

 

<body> 태그 - 웹페이지의 내용

<body> 태그는 웹페이지의 모든 구성 요소(소스) 가 들어가는 곳입니다.

우리가 화면에서 보는 글, 이미지, 버튼, 동영상 등이 모두 <body> 태그 안에 들어갑니다.

<body>
    <h1>안녕하세요! HTML을 배우고 있어요.</h1>
    <p>이것은 본문 내용입니다.</p>
    <img src="image.jpg" alt="예제 이미지">
</body>

 

 

위 내용을 종합하면, 기본적인 HTML 문서는 다음과 같이 구성됩니다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML 기초</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>HTML의 기본 구조</h1>
    <p>이 페이지는 HTML의 기본 구조를 설명합니다.</p>
</body>
</html>

 

 

✅ <head> = 웹페이지의 정보 저장소
✅ <body> = 웹페이지의 내용(소스) 표시

 

 

html은 웹페이지를 구성하는 뼈대 입니다.


텍스트, 이미지, 미디어와 같은 정보를 담고 있으며,
html 자체만으로도 누구나 볼 수 있는 문서와 같은 형태입니다.
(MS Word 를 생각하면 쉽습니다.)

 

 

 

 

- Dblisher -

728x90

'퍼블리셔 입문 > HTML' 카테고리의 다른 글

Part 1 : 레이아웃 태그 사용법  (0) 2025.03.15
HTML 태그 설명과 예제 코드  (0) 2025.03.15
HTML 태그 소개와 속성 정리  (0) 2025.03.15
웹페이지의 필수 정보! 메타 태그(Meta Tag)  (0) 2025.03.14
HTML이란? 개념부터 알고 가자  (0) 2025.03.14

관련글

티스토리툴바