제목과 단락
웹 페이지에 제목과 텍스트 추가하기
제목과 단락은(는) CoddyKit의 무료 HTML for Kids 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML for Kids 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML for Kids 강의에는 총 4개의 강의가 포함되어 있습니다.
제목과 문단
다음 수업에 오신 것을 환영합니다! 오늘은 웹 페이지에 제목과 문단을 추가하는 방법을 알아보겠습니다. 이러한 요소를 사용하면 콘텐츠를 체계적으로 구성하고 읽기 쉽게 만들 수 있습니다.
제목이란 무엇인가요?
제목은 웹 페이지에 제목과 부제목을 만들 때 사용합니다. <h1>(가장 큼)부터 <h6>(가장 작음)까지 있습니다.
제목을 콘텐츠의 개요라고 생각해 보세요. 사용자가 페이지의 구조를 이해하는 데 도움이 됩니다.
예시:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>제목 사용하기
웹 페이지에 제목을 추가해 보겠습니다. 다음 코드를 사용해 제목 크기의 차이를 확인해 보세요.
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>문단이란 무엇인가요?
문단은 <p> 태그를 사용해 웹 페이지에 추가하는 텍스트 블록입니다. 자세한 정보나 설명을 추가할 때 적합합니다.
예시:
<p>This is a paragraph of text on my web page. It’s great for sharing information with my visitors!</p>
여러 문단 추가하기
여러 개의 <p> 태그를 사용하면 원하는 만큼 문단을 추가할 수 있습니다.
예시:
<p>This is the first paragraph. It introduces my topic.</p>
<p>This is the second paragraph. It adds more details and examples.</p>
<p>This is the third paragraph. It concludes my thoughts.</p>
제목과 문단 결합하기
제목과 문단을 함께 사용하면 콘텐츠를 읽고 이해하기 쉬워집니다. 제목에는 제목을, 문단에는 자세한 정보를 작성하세요.
예시:
<h1>Welcome to My Web Page</h1>
<p>This is a web page where I share my favorite recipes, hobbies, and stories.</p>
<h2>My Favorite Recipes</h2>
<p>I love baking cookies and cakes. Here’s a recipe for chocolate chip cookies!</p>
<h2>My Hobbies</h2>
<p>In my free time, I enjoy painting and playing video games.</p>
제목과 문단 작성 모범 사례
다음 팁을 기억해 두세요.
- 페이지마다 <h1> 하나만 사용하기:
<h1>태그는 주 제목으로 한 번만 사용해야 합니다. - 콘텐츠 구성하기: 더 작은 제목(
<h2>,<h3>)을 사용해 영역을 나눕니다. - 명확한 문단 작성하기: 문단을 짧고 읽기 쉽게 유지합니다.
직접 해 보기
제목과 문단이 있는 간단한 웹 페이지를 만들어 보겠습니다. 시작할 때 참고할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Headings and Paragraphs</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the main paragraph introducing my page.</p>
<h2>About Me</h2>
<p>I’m learning HTML and enjoying the process!</p>
<h2>My Goals</h2>
<p>My goal is to create a professional-looking website someday.</p>
</body>
</html>
잘하셨습니다!
정말 잘하셨습니다! 웹 페이지에 제목과 문단을 추가하는 방법을 배웠습니다. 이는 명확하고 잘 구성된 콘텐츠를 만드는 데 필수적입니다. 다음 수업에서는 정보를 정리하기 위한 목록을 만드는 방법을 알아보겠습니다. 더 재미있는 학습을 기대해 주세요!
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 16
- 레슨
- 35
자주 묻는 질문
“제목과 단락” 강의는 무료인가요?
네 — “제목과 단락” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML for Kids 강의 전체를 잠금 해제할 수 있습니다. HTML for Kids 강의에는 총 4개의 강의가 포함되어 있습니다.
“제목과 단락”에서 뭘 배우나요?
웹 페이지에 제목과 텍스트 추가하기 브라우저에서 직접 실행하는 실습 코드로 HTML for Kids을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML for Kids을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML for Kids은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“제목과 단락” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML for Kids 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML for Kids 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.