웹 개발을 시작하려는 분들이 가장 먼저 만나게 되는 언어, 바로 HTML이에요.
HTML은 웹 페이지의 뼈대를 구성하는 마크업 언어로, 텍스트, 이미지, 영상 등 다양한 콘텐츠를 구조화해서 브라우저에 보여주는 역할을 해요. 이번 글에서는 HTML의 기본 구조부터 대표적인 태그, 그리고 실습 예제까지 한 번에 정리해 드릴게요.
HTML이란 무엇인가요?
HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어예요. 이 언어는 태그(tag)라고 불리는 요소를 이용해서 콘텐츠를 감싸고, 브라우저가 이를 해석해 우리가 보는 웹 화면을 만들어줘요. HTML은 단독으로 디자인을 처리하지 않지만, CSS와 JavaScript와 함께 사용되면 훌륭한 웹사이트를 구축할 수 있어요.
HTML 문서의 기본 구조
HTML 문서는 항상 다음과 같은 구조로 시작해요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!--Contents of the webpage-->
<p>GeeksforGeeks is a online study platform</p>
</body>
</html>
<html> : 전체 HTML 문서를 감싸는 루트 요소예요.
<head> : 문서의 정보(title, 인코딩, 스타일 등)를 포함하지만, 브라우저에는 직접 표시되지 않아요.
<title> : 브라우저 탭에 표시되는 제목이에요.
<body> : 우리가 브라우저에서 실제로 보게 되는 콘텐츠가 위치해요.
HTML에서 자주 쓰는 태그들
헤딩 태그 (<h1>~<h6>)
콘텐츠의 제목이나 섹션 제목을 표시할 때 사용돼요. 숫자가 클수록 글씨는 작아지고, 중요도도 낮아져요.
<html>
<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>
단락 태그 (<p>) 와 줄바꿈 (<br>)
문단을 작성할 땐 <p>, 줄을 바꿀 땐 <br>을 사용해요.
<html>
<body>
<p>
이것은 문단입니다.<br>줄을 바꿔서 보여줘요.
</p>
</body>
</html>
수평선 태그 (<hr>)
콘텐츠 구분을 위한 선을 넣을 때 사용해요. 닫는 태그 없이 <hr> 하나만 입력하면 돼요.
<html>
<body>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>
</html>
이미지 삽입 (<img>)
이미지를 삽입할 땐 <img src="이미지주소"> 형식으로 작성해요.
<html>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
</body>
</html>
속성 src는 이미지의 경로를 지정하는 역할을 해요. 이미지는 웹에 있는 이미지 주소(URL)나 내 컴퓨터의 경로로도 지정할 수 있어요.
HTML 코드 확인 방법
웹 페이지에서 HTML 코드를 직접 확인하고 싶다면 아래 두 가지 방법을 사용할 수 있어요.
전체 소스 보기
웹페이지에서 마우스 오른쪽 클릭 → "페이지 소스 보기(View Page Source)" 선택 또는 Ctrl + U를 누르면 현재 페이지의 HTML 전체 소스 코드를 볼 수 있어요.
특정 요소 검사하기
마우스 오른쪽 클릭 → "검사(Inspect)"를 선택하면, 특정 요소의 HTML 구조와 CSS 스타일을 실시간으로 확인하고 수정할 수 있어요.
HTML은 모든 웹 페이지의 기본 뼈대 역할을 해요. 이 글에서 소개한 <html>, <head>, <body>, <p>, <h1>~<h6>, <img>, <hr>, <br> 같은 태그들은 HTML의 기초지만 매우 중요한 요소들이에요.
웹 개발을 시작하는 가장 좋은 방법은 직접 HTML 문서를 만들어보고, 브라우저에서 결과를 확인해보는 거예요. 다음 글에서는 CSS와의 연동 방법도 다룰 예정이니 계속 함께 해주세요!
'잡담 > 이공계 정보' 카테고리의 다른 글
| 이공계 산업계 면접 준비 가이드 - 준비사항, 질문, 프레젠테이션 (0) | 2025.05.18 |
|---|---|
| TOEFL 시험이란? - 목적, 점수, 기준, 특징 (0) | 2025.05.17 |
| [Quillbot] 3편 : Quillbot의 활용법부터 단점까지, 현명한 사용법 가이드 (0) | 2025.05.15 |
| [Quillbot] 2편 : Quillbot 기능 및 요금제 완벽 분석 (0) | 2025.05.15 |
| [Quillbot] 1편 : Quillbot이란? 글쓰기 도우미 AI 툴 완벽 정리 (0) | 2025.05.15 |