HTML 기초 태그 배우기 입문 가이드

HTML 기초 태그 입문 가이드

웹 페이지를 제작하기 위해서는 HTML(하이퍼텍스트 마크업 언어)의 기초 태그를 이해하는 것이 중요합니다. HTML은 웹 콘텐츠의 구조를 정의하고, 각 요소가 어떻게 배치될지를 결정하는 역할을 합니다. 이번 포스팅에서는 HTML의 기본적인 태그에 대해 알아보겠습니다.

1. 태그 (Heading Tags)

HTML에서는 태그가 매우 중요합니다. 태그는 <h1>부터 <h6>까지 총 6개의 레벨로 구성되어 있으며, 숫자가 작아질수록 글자의 크기는 작아지는 특징이 있습니다. <h1> 태그는 페이지의 가장 큰 을 나타내며, 하나의 페이지에는 오직 하나만 사용하는 것이 좋습니다. 이태그는 검색엔진이 페이지 내용을 이해하는 데 중요한 역할을 합니다.

• <h1> – 가장 큰
• <h2> – 두 번째로 큰
• <h3> – 세 번째로 큰
• <h4> – 네 번째로 큰
• <h5> – 다섯 번째로 큰
• <h6> – 여섯 번째로 큰

이러한 태그는 웹 페이지의 구조를 명확히 하여 사용자가 내용을 쉽게 파악할 수 있도록 도와줍니다.

2. 본문 태그 (Paragraph Tag)

본문 내용을 작성할 때는 <p> 태그를 사용합니다. 이 태그는 단락을 나타내며, 여러 개의 <p> 태그가 있을 경우 각 단락 사이에는 기본적인 여백이 생깁니다. 예를 들어, 아래와 같은 코드를 사용하여 두 개의 단락을 생성할 수 있습니다:

<p>첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>

이러한 방식으로 여러 단락을 구성하면, 글의 가독성이 향상되고 내용 전달이 용이해집니다.

3. 줄 바꿈 태그 (Line Break Tag)

일반적으로 HTML에서는 입력한 줄바꿈이 적용되지 않기 때문에 줄 바꿈을 원할 때는 <br> 태그를 사용합니다. 이 태그는 단독 태그로, 줄바꿈을 원하는 위치에 추가하면 됩니다. 예를 들어:

안녕하세요. PNcoding입니다.<br>이어서 또 다른 문장을 작성합니다.

이렇게 사용하면 줄바꿈이 적용되어 출력됩니다.

4. 앵커 태그 (Anchor Tag)

하이퍼링크를 만들고 싶을 때 사용되는 태그가 <a>입니다. href 속성을 통해 연결할 URL을 지정할 수 있습니다. 아래는 링크를 만드는 예시입니다:

<a href="https://www.example.com">이곳을 클릭하여 이동</a>

위와 같이 작성하면 사용자가 링크를 클릭했을 때 해당 웹페이지로 이동하게 됩니다. 이 태그는 웹사이트 내내 중요한 역할을 합니다.

5. 글자 모양 태그 (Text Styling Tags)

웹 페이지에 다양한 글자 스타일을 지정할 수 있는 몇 가지 태그를 소개하겠습니다:

• <b> – 굵은 글자를 표현합니다.
• <i> – 기울임꼴의 글자를 표현합니다.
• <small> – 작은 글자를 표현합니다.
• <sub> – 아래 첨자를 표현합니다.
• <sup> – 위 첨자를 표현합니다.
• <del> – 취소선을 그은 글자를 표현합니다.
• <ins> – 밑줄이 있는 글자를 표현합니다.

이러한 태그들을 활용하면 문서의 스타일을 더욱 풍부하게 만들 수 있습니다.

6. 특수 문자 태그 (Special Character Tag)

HTML에서는 특정 기호를 사용할 때 직접 입력하지 않고, 특수 문자를 사용해야 할 때가 많습니다. 예를 들어:

• < : <
• > : >
• & : &
• ” : "

특수 문자가 포함된 경우, 이러한 문자 표현 방법을 사용하여 브라우저에서 올바르게 표시되도록 해야 합니다.

7. 마치며

이번 포스팅에서는 HTML의 기본적인 태그와 그 사용 방법에 대해 알아보았습니다. 각 태그의 목적과 기능을 이해하고 활용하면, 웹 페이지 제작 시 더욱 효과적이고 효율적인 작업이 가능해질 것입니다. 다음 시간에는 더 깊이 있는 HTML 태그에 대해 알아보도록 하겠습니다. 지속적인 연습과 실습을 통해 HTML에 대한 이해를 넓혀 가시기 바랍니다!

자주 물으시는 질문