2일 차: 헤더와 단락 태그 배우기
학습 목표: 헤더 태그(h1~h6)와 단락 태그(p)를 이해하고 사용하기
1. HTML 헤더 태그
헤더 태그는 제목을 표시하는 데 사용돼. HTML에는 6가지 헤더 태그가 있어. 크기에 따라 <h1>에서 <h6>까지 있으며, <h1>이 가장 크고 <h6>이 가장 작아. 헤더 태그는 문서의 구조를 이해하기 쉽게 만들어줘.
예제:
html
<! DOCTYPE html>
<html>
<head>
<title>Headers and Paragraphs </title>
</head>
<body>
<h1>This is an H1 header </h1>
<h2>This is an H2 header </h2>
<h3>This is an H3 header </h3>
<h4>This is an H4 header </h4>
<h5>This is an H5 header </h5>
<h6>This is an H6 header </h6>
</body>
</html>
설명:
<h1>: 가장 큰 헤더. 보통 페이지의 메인 제목으로 사용해.
<h2>: <h1>보다는 작지만 여전히 중요한 제목.
<h3>: <h2>보다 작고, 서브 제목으로 자주 사용돼.
<h4>, <h5>, <h6>: 점점 작아지는 헤더. 덜 중요한 제목이나 섹션의 부제목으로 사용해.
2. HTML 단락 태그
단락 태그는 본문을 작성할 때 사용돼. 단락은 <p> 태그로 감싸서 작성해. 단락 태그는 문서의 내용을 읽기 쉽게 나누는 데 도움이 돼.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Headers and Paragraphs </title>
</head>
<body>
<h1>Welcome to My Website </h1>
<p>This is my first paragraph. It contains some text about my website. </p>
<p>This is my second paragraph. Here is some more information. </p>
</body>
</html>
설명:
<p>: 단락을 나타내는 태그. 텍스트를 여러 단락으로 나눌 때 사용해.
3. 헤더와 단락 태그의 조합
헤더와 단락 태그를 함께 사용하면, 문서를 더 체계적으로 구성할 수 있어. 헤더는 문서의 섹션을 구분하고, 단락은 각 섹션의 내용을 설명하는 데 사용돼.
예제:
html
<!DOCTYPE html>
<html>
<head>
<title>My Practice Page </title>
</head>
<body>
<h1>Main Title </h1>
<p>This is the first paragraph under the main title. It introduces the main topic of the page. </p>
<h2>Sub Title 1 </h2>
<p>This is the first paragraph under sub title 1. It provides more detailed information about a specific part of the main topic. </p>
<h3>Sub Title 2 </h3>
<p>This is the first paragraph under sub title 2. It covers another aspect of the main topic. </p>
<h4>Sub Title 3 </h4>
<p>This is the first paragraph under sub title 3. It adds additional details or related information. </p>
</body>
</html>
4. 실습과 응용
이제 위에서 배운 내용을 토대로 연습해보자.
실습 1: 다양한 헤더와 단락 사용하기
html
<!DOCTYPE html>
<html>
<head>
<title>My Practice Page </title>
</head>
<body>
<h1>Main Title </h1>
<p>This is the first paragraph under the main title. </p>
<h2>Sub Title 1 </h2>
<p>This is the first paragraph under sub title 1. </p>
<h3>Sub Title 2 </h3>
<p>This is the first paragraph under sub title 2. </p>
<h4>Sub Title 3 </h4>
<p>This is the first paragraph under sub title 3. </p>
</body>
</html>
이제 이 코드를 메모장에 작성하고, practice.html로 저장한 후 브라우저로 열어보자.
실습 2: 자신만의 소개 페이지 만들기
자신의 소개 페이지를 만들어보자. 아래 예제를 참고해서, 자신에 대해 간단히 소개하는 HTML 문서를 작성해 봐.
html
<!DOCTYPE html>
<html>
<head>
<title>About Me </title>
</head>
<body>
<h1>About Me </h1>
<p>Hi, my name is [Your Name]. Welcome to my personal page! </p>
<h2>Hobbies</h2>
<p>I enjoy reading, playing soccer, and coding. </p>
<h2>Goals</h2>
<p>My goal is to become a skilled web developer. </p>
</body>
</htmL>
이제 직접 작성해보고, 저장한 후 브라우저로 열어서 확인해 보자.
5. HTML의 계층 구조
HTML은 계층 구조로 되어 있어. 이는 태그가 중첩될 수 있음을 의미해. 예를 들어, 하나의 단락 안에 여러 태그를 포함할 수 있어.
예제:
html
<! DOCTYPE html>
<html>
<head>
<title> Nested Elements </title>
</head>
<body>
<h1> Main Title </h1>
<p> This is a paragraph with <strong> bold text </strong> and <em> italic text </em>. </p>
<h2> Sub Title 1 </h2>
<p> This paragraph contains a <a href="https://www.example.com"> link </a> to another website. </p>
</body>
</html>
설명:
<strong>: 텍스트를 굵게 표시.
<em>: 텍스트를 기울임.
<a>: 하이퍼링크를 생성.
6. 연습과 복습
오늘 배운 내용을 복습하면서, 다양한 HTML 요소를 사용해 보자. 연습을 통해 익숙해지는 것이 중요해.
연습 3: 다양한 태그 사용하기
html
<! DOCTYPE html>
<html>
<head>
<title> My Advanced Practice Page </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<p> This is a paragraph with some <strong> bold text </strong> and some <em> italic text </em>. </p>
<p> Visit <a href="https://www.example.com" target="_blank"> Example.com </a> for more information. </p>
<h2> My Hobbies </h2>
<p> I enjoy <em> reading </em>, <strong> playing soccer </strong>, and <em> coding </em>. </p>
<h2> Contact Me </h2>
<p> Email: <a href="mailto:example@example.com"> example@example.com </a></p>
</body>
</html>
설명:
<a> 태그에 target="_blank" 속성을 추가하면 링크가 새로운 탭에서 열려.
<a href="mailto:example@example.com">는 클릭 시 이메일 클라이언트를 열어.