HTML 기초 정복하기 📚

HTML(HyperText Markup Language)은 웹페이지의 뼈대를 만드는 가장 기본적이고 핵심적인 언어입니다. 아래의 테마별 핵심 설명을 읽고, 예제를 보며 우측 실시간 에디터에서 직접 실험해 보세요!

Chapter 01

HTML 문서의 기본 구조

모든 HTML 문서는 구조를 선언하는 기본적인 형식에서 시작합니다. <!DOCTYPE html>은 현대적인 HTML5 문서를 선언하는 구문입니다.

          • html 태그: 문서 전체의 시작과 끝을 감쌉니다.

          • head 태그: 메타정보(인코딩, 제목, CSS 링크 등)를 포함합니다.

          • body 태그: 실제 웹 브라우저에 표시되는 주 콘텐츠를 담습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>나의 첫 HTML 문서</title>
</head>
<body>
  <h1>환영합니다!</h1>
  <p>기본 구조 학습 중입니다.</p>
</body>
</html>

Chapter 02

제목(Heading)과 문단(Paragraph)

웹페이지의 텍스트 레이아웃을 작성할 때 제목과 일반 문단은 가장 기본이 되는 요소입니다.

          • h1 ~ h6: 대제목부터 소제목까지 단계별로 나타냅니다. (숫자가 작을수록 굵고 큽니다)

          • p 태그: 본문을 구성하는 한 단락을 정의하며, 위아래로 약간의 여백이 자동으로 생깁니다.

예제 코드

<h1>가장 큰 제목 (H1)</h1>
<h2>두 번째 제목 (H2)</h2>
<h3>세 번째 제목 (H3)</h3>
<p>이것은 일반 글씨가 들어가는 문단(Paragraph)입니다.</p>
<p>다른 문단을 작성하면 자연스럽게 줄바꿈이 일어납니다.</p>

Chapter 03

텍스트 강조 및 스타일링 태그

문장 내부의 특정 단어나 구간을 강조하고 서식을 지정하기 위해 사용하는 인라인 태그들입니다.

          • strong 태그: 굵은 글씨로 중요한 텍스트를 표현합니다.

          • em 태그: 이탤릭체로 비스듬하게 텍스트를 강조합니다.

          • mark 태그: 형광펜을 칠한 것처럼 배경을 노란색으로 강조합니다.

예제 코드

<p>이 문장에서 <strong>중요한 단어</strong>는 굵게 나옵니다.</p>
<p>그리고 어떤 단어는 <em>이탤릭체로 강조</em>될 수도 있죠.</p>
<p>여기에 <mark>형광펜 효과</mark>도 칠할 수 있습니다!</p>

Chapter 04

링크(Link)와 이미지(Image)

웹의 큰 힘은 여러 문서의 링크 연동과 풍부한 미디어를 보여주는 것입니다.

          • a 태그: 하이퍼링크를 설정합니다. href 속성에 이동할 주소(URL)를 입력합니다.

          • img 태그: 이미지를 불러옵니다. 종료 태그가 없는 단일 태그로, src(경로)와 alt(대체 텍스트) 속성이 필수입니다.

예제 코드

<h2>유용한 외부 링크</h2>
<p>
  <a href="https://www.google.com" target="_blank">구글 홈페이지로 이동하기</a>
</p>

<h2>이미지 삽입하기</h2>
<!-- 귀여운 HTML5 로고 이미지를 불러옵니다 -->
<img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" alt="HTML5 로고" width="120">
<p>HTML5 로고 이미지가 위에 정상적으로 표시됩니다.</p>

Chapter 05

리스트(List) 만들기

콘텐츠를 항목별로 보기 좋게 나열하기 위해 순서가 없는 목록과 순서가 있는 목록을 생성합니다.

          • ul 태그: 순서가 없는(Unordered) 불릿 포인트 형식의 목록을 선언합니다.

          • ol 태그: 순서가 있는(Ordered) 숫자 번호 매기기 형식의 목록을 선언합니다.

          • li 태그: 각 목록의 항목(List Item)들을 작성할 때 사용합니다.

예제 코드

<h3>내가 좋아하는 과일 (순서 없음)</h3>
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>포도</li>
</ul>

<h3>웹 공부 순서 (순서 있음)</h3>
<ol>
  <li>HTML (구조)</li>
  <li>CSS (스타일)</li>
  <li>JavaScript (동적 제어)</li>
</ol>

Chapter 06

줄바꿈과 구분선

코드 상에서 엔터를 쳐도 브라우저는 자동으로 한 칸의 공백으로만 취급합니다. 실제 렌더링에서 강제 줄바꿈과 영역 분할을 위한 태그들입니다.

          • br 태그: 강제로 다음 줄로 줄바꿈(Line Break)을 진행합니다. 종료 태그가 없습니다.

          • hr 태그: 영역을 구분하는 가로 수평선(Horizontal Line)을 그어 줍니다.

예제 코드

<p>
  여기서 그냥 엔터를 치면<br>
  브라우저상에서도 줄바꿈이 보입니다.
</p>
<hr>
<p>수평선 아래에 새로운 영역의 텍스트를 작성했습니다.</p>

📝 HTML 에디터 (수정해 보세요)

1
2
3
4
5
6
7
8
9
10

🖥️ 실시간 미리보기 (결과 화면)