HTML 기본 태그 익히기와 예제 코드

HTML 기초 태그 이해하기

HTML은 웹 페이지를 구성하는 기본적인 언어로, 문서의 구조와 내용을 정의하는 데 필수적입니다. 웹을 구성하는 여러 요소 중에서도 태그를 올바르게 이해하고 사용하는 것이 중요합니다. 이번 글에서는 HTML의 기본 구조와 다양한 태그, 그리고 예제 코드를 통해 기초를 다져보도록 하겠습니다.

HTML 태그의 분류

HTML 태그는 그 기능이나 용도에 따라 크게 블록 요소와 인라인 요소로 나눌 수 있습니다. 각 요소는 웹 페이지에서 어떻게 배치되고 렌더링 되는지 결정짓는 중요한 역할을 합니다.

1. 블록 요소

블록 요소는 보통 새로운 줄에서 시작되며, 페이지의 구조를 정의하는 데 사용됩니다. 이들은 각각 독립된 영역으로 취급되어, 너비와 높이를 지정할 수 있습니다. 주요 블록 요소로는 다음과 같은 것들이 있습니다:

<h1> ~ <h6>: 제목을 나타내며, 숫자가 클수록 글씨 크기가 작아집니다.
<p>: 문단을 만들 때 사용합니다.
<div>: 블록을 구분할 때 사용되는 기본 요소입니다.
<ul>, <ol>: 각각 순서 없는 목록과 순서 있는 목록을 정의합니다.

2. 인라인 요소

인라인 요소는 줄바꿈 없이 콘텐츠를 나열하는 데 적합합니다. 이 요소들은 주로 텍스트의 서식을 변경하는 데 사용됩니다. 인라인 요소의 예는 다음과 같습니다:

<strong>: 글씨를 굵게 표시합니다.
<em>: 이탤릭체로 강조합니다.
<a>: 하이퍼링크를 생성합니다.
<span>: 특정 텍스트를 묶을 때 사용합니다.

블록 요소는 페이지의 레이아웃을 구성하는 데 주로 사용되며, 인라인 요소는 텍스트의 스타일링에 주로 활용됩니다. 두 요소가 어떻게 다르게 작용하는지를 이해하는 것이 중요합니다.

블록과 인라인 요소의 차이

블록 요소는 화면에서 새로운 줄을 시작하고, 부모 요소의 너비를 기본으로 상속받습니다. 반면 인라인 요소는 주위 요소와 연속적으로 나열되어 줄바꿈이 발생하지 않으며, 너비와 높이를 지정할 수 없습니다.

예를 들어, <p> 태그로 작성한 문단은 다음과 같이 표시됩니다:

<p>이것은 블록 요소입니다.</p>

인라인 요소인 <strong> 태그로 강조한 부분은:

이것은 <strong>강조된 텍스트</strong>입니다.

CSS와의 연계

CSS를 활용하여 HTML 요소의 스타일을 조정할 수 있습니다. 예를 들어, 블록 요소에는 높이와 너비를 지정할 수 있습니다. 또한 인라인 요소에 display: inline-block; 속성을 부여하면 블록 요소 속성도 함께 적용할 수 있습니다. 이는 웹 디자인에서 매우 유용하게 사용됩니다.

다음은 CSS 속성을 이용해 블록 요소와 인라인 요소의 스타일을 조정하는 예제를 보여드립니다:

p {
  border: 2px solid gray;
  height: 30px;
}
strong {
  border: 3px solid green;
  height: 20px; /* 적용되지 않습니다. */
}

HTML 예제 코드

이제 HTML의 기본 태그를 사용하여 간단한 웹 페이지를 만들어보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>나의 첫 번째 웹 페이지</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>이 페이지는 HTML 기본 태그를 이용한 예제입니다.</p>
  <ul>
    <li>HTML 태그 배우기</li>
    <li>CSS 스타일 적용하기</li>
  </ul>
  <a href="https://www.example.com">더 알아보기</a>
</body>
</html>

마무리하며

이번 포스팅에서는 HTML의 기본 태그에 대해서 알아보았습니다. 블록 요소와 인라인 요소의 차이를 이해하고 이를 기반으로 웹 페이지를 구성하는 기초 지식을 습득하는 것이 중요합니다. 웹 개발의 기초를 다지는 데 도움이 되기를 바랍니다.

다음 글에서는 CSS를 활용하여 HTML 요소의 스타일을 더욱 풍부하게 만드는 방법에 대해 다뤄보겠습니다. 지속적인 학습을 통해 보다 나은 웹 페이지를 제작할 수 있기를 바랍니다.

자주 찾으시는 질문 FAQ

HTML 태그란 무엇인가요?

HTML 태그는 웹 페이지의 구조를 정립하는 기본 요소입니다. 문서의 내용과 형식을 정의하며, 다양한 태그를 사용해 다양한 콘텐츠를 표현할 수 있습니다.

블록 요소와 인라인 요소의 차이는 무엇인가요?

블록 요소는 페이지에서 새로운 줄을 시작하며 독립적인 크기를 가질 수 있습니다. 반면 인라인 요소는 줄 바꿈 없이 연속적으로 표시되며, 크기를 지정할 수 없는 것이 특징입니다.

CSS와 HTML은 어떻게 연계되나요?

CSS는 HTML 요소의 스타일을 조정하는 데 사용됩니다. 블록 요소는 높이와 너비를 정의할 수 있지만, 인라인 요소는 기본적으로 이러한 속성이 적용되지 않습니다.