무한도전!!/홈페이지 만들자!!

일지 #3 HTML 기본 문서 만들기 (HTML 문서, 시맨틱 태그)

청관(淸觀) 2026. 9. 24. 14:54

왠지 오랜만에 공부를 하는 것 같다. 

실제로 4일만에 공부하는 건데 그동안 편두통 때문에 신경과 돌고.. 다른 병원들 돌고... 하느라 시간이 없었음...

그리고 CASP17 발표하러 이탈리아(로마)가는 이슈로도 정신이 없었다.

 

아무튼... 다시 공부를 시작해보도록 하겠다...

 

 

 

# HTML이란?

HTML(HyperText Markup Language)은 웹 문서를 만드는 언어로, 다양한 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어다.

하이퍼텍스트(HyperText)란 문서를 서로 연결해주는 링크를 의미하고 마크업(Markup)은 웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미한다.

 

웹 문서는 내용을 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다르다.

HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것이다.

 

 

 

# HTML의 구조

HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 한다.

웹 문서는 보통 <!DOCTYPE html>로 시작해 <html>, <head>, <body>라는 3개의 영역으로 구성되어 있다.

1. <!DOCTYPE html> : 현재 문서가 HTML 언어로 작성한 웹 문서라는 뜻

2. <html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그.

3. <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분
    3.1 <meta> 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용하는 태그
    3.2 <title>...</title> 웹 브라우저의 제목 표시줄에 표시되는 내용

4. <body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용 (HTML 태그 포함)
    4.1 <h1>...</h1> 제목을 표시하는 태그
    4..2 <p>...</p> 문단을 구분하는 태그
    4.3 <hr> 웹 문서에 가로줄을 표시하는 태그

 

- 예시 코드 :

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML 기본 문서</title>
</head>
<body>
  <h1>웹 문서 만들기</h1>
  <hr>
  <p>HTML</p>
  <p>CSS</p>
  <p>자바스크립트</p>
</body>
</html>

 

 

 

1. < !DOCTYPE html> 태그

'문서 유형'을 지정하는 태그이다. 

* HTML에서는 대소문자를 구별하지 않아도 되지만 문서 유형을 강조할 때는 대문자를 사용하기도 함.

 

 

 

2. <html> 태그

HTML 파일의 시작을 표시한다.

반대로 웹 문서가 끝났다고 표시할 때는 </html> 태그를 사용하며 이 태그 뒤에는 아무 내용도 없어야 한다.

<html lang="ko">
....
</html>

 

<html> 태그에서는 lang 속성으로 문서에서 사용할 언어를 지정할 수 있다.

사용하는 언어를 표시하는 이유는 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문이다.

또한 화면 낭독기에서 웹 문서를 소리 내어 읽어 줄 때 해당 언어에 맞추어 발음이나 억양, 목소리 등을 다르게 할 수 있다.

 

 

 

3. <head> 태그

이 태그 사이에 작성한 내용은 웹 브라우저 화면에는 보이지 않고 웹 브라우저가 알아야 할 정보가 입력된다.

또한 문서에서 사용할 스타일 시트 파일도 이곳에서 연결해준다.

<head> 영역에서 사용하는 태그는 <meta>, <title> 태그가 있다.

 

1) <meta> 태그

메타 정보는 '데이터에 관한 데이터'를 말한다. 

웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용하며 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 '인코딩'을 사용할지 지정하는 것이다.

웹 서버는 영어를 기본으로 하므로 화면에 한글로 된 내용을 표시할 때에는 'UTF-8'이라는 문제 세트를 사용한다.

<meta charset="UTF-8">

 

그 밖에 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정할 때에도 사용할 수 있다.

이 정보는 검색 엔진에서 사이트를 검색할 때 참고하는데, 검색 엔진에 따라 참고하는 정보는 달라질 수 있다.

<meta name="keywords" content="html의 구조">  // 웹 문서의 키워드
<meta name="description" content="html의 구조를 알아봅시다">  // 웹 문서의 설명
<meta name="author" content="Gildong Hong"> // 웹 문서의 소유자나 제작자

 

 

2) <title> 태그

이는 문서 제목을 나타내는 태그로 매우 중요하다.

태그 사이에 웹 문서의 제목을 입력한다.

<title>HTML 기본 문서</title>

 

<title> 태그에서 지정하는 내용은 아래와 같이 웹 브라우저의 제목 표시줄에 표시된다.

 

 

 

4. <body> 태그

태그 사이에 실제 웹 브라우저에 표시할 내용을 입력한다. 

<body>
  <h1>웹 문서 만들기</h1>
  <hr>
  <p>HTML</p>
  <p>CSS</p>
  <p>자바스크립트</p>
</body>

 

실제 웹 브라우저에서는 이렇게 보인다.

웹 문서 만들기

HTML

CSS

자바스크립트

 

 

 

 

# 라이브 서버

코드를 수정할 때마다 웹 브라우저 화면을 새로고침할 필요 없이 수정한 결과를 바로 확인할 수 있는 VS Code의 확장 기능이다.

VS Code에서 좌측의 Extension 메뉴에서 검색하여 설치할 수 있다.

해당 문서에서 마우스 우클릭을 하고 [Open with Live Server]를 누르면 실시간으로 수정 사항을 브라우저에서 확인할 수 있다.

라이브 서버는 임시 서버 주소를 만들어 실시간으로 수정 사항을 브라우저에 반영한다.

 

 

 

 

# 주의할 사항

1. 태그는 소문자로 쓴다.

2. 여는 태그와 닫는 태그를 정확히 입력한다.

3. 적당하게 들여쓰기를 한다. (HTML 태그는 코드에 공백이 있어도 한 칸으로 인식한다)

4. 일부 태그는 태그에 여러 기능을 추가하는 속성과 함께 사용한다.

    ex) <img> 태그 - src: 이미지 파일의 경로 / width, height: 이미지의 크기 / alt: 이미지의 보조 설명

    * 태그 안에 여러 속성을 사용할 경우 순서에 상관없이 작성해도 된다.

<img src="images/salad.jpg" alt="레드향", width="150">

 

 

 

 

# 시맨틱 태그

웹 문서의 구조를 만드는 태그로, 문서 내용에는 영향을 주지 않으면서 웹 브라우저가 문서 구조를 파악하는 데 중요한 역할을 한다.

웹 문서는 시맨틱 태그를 사용하지 않더라도 만들 수 있지만 아래의 이유들로 인해 필요하다.

1. 웹 브라우저가 HTML 코드만 보고도 어느 부분이 제목이고 본문 내용인지 쉽게 알 수 있기 때문.
    (시각 장애인이 사용하는 화면 낭독기와 같은 보조 기기에서도 사이트의 구조를 이해할 수 있음)
2. 문서 구조가 정확히 나눠지므로 여러 스마트 기기(PC, 모바일)의 다양한 화면에서 웹 문서를 표현하기 쉬움.
3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음.

 

 

- 문서 구조를 만드는 주요 시맨틱 태그

 

1. <header> 태그 : 헤더 영역을 나타냄

 

2. <nav> 태그 : 네비게이션 영역을 나타냄

    같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦.

    웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다.

    * 웹 문서에서 <nav> 태그를 여러 개 사용할 때 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용 가능함

 

3. <main> 태그 : 웹 문서에서 핵심이 되는 내용

    페이지마다 똑같이 들어간 정보(메뉴, 사이드바 등)는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성한다.

    웹 문서에서 한 번만 사용할 수 있다.

 

4. <article> 태그: 실제로 보여 주고 싶은 내용 / 독립적인 콘텐츠

    블로그의 포스트처럼 독립된 콘텐츠로 사용함.

    문서 안에 여러 개 사용할 수 있고, 이 안에 <section> 태그를 넣을 수도 있음.

 

5. <section> 태그 : 콘텐츠 영역을 나타냄

    몇 개의 콘텐츠를 묶을 때 사용함.

 

6. <aside> 태그 : 사이드 바 영역을 나타냄

 

7. <footer> 태그: 푸터 영역을 나타냄

    웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다.

    푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣는다.

    푸터 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 시맨틱 테그를 모두 사용할 수 있다.

 

8. <div> 태그 : 여러 코드를 묶을 때 사용 / 영역 구별, 문서 꾸미기

    id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용함.

 

 

 

# HTML에서 주석 달기

VS Code의 편집 창에서 주석을 붙이고 싶은 위치에 커서를 놓고 [Ctrl+?]를 누르면 "<!-- 주석내용 -->"이 자동으로 입력되며 커서가 깜빡이는 위치에 주석 내용을 입력하면 된다.

 

 

 

 

아... 힘들다...

오늘 뭔가 배운 내용이 많아서 지치는 느낌이다...

곧 추석 연휴로 내려갈 짐 싸고 준비해야하는데 너무 귀찮은 것이다....