HTML 텍스트 표시 기초: 구조화와 스타일링 가이드

GoGoComputer·2024년 11월 6일

HTML CSS study

목록 보기

9/20

이번 강의에서는 HTML에서 텍스트를 표시하는 방법에 대해 자세히 알아보겠습니다. 제목과 단락을 사용하여 텍스트를 구조화하고, 굵게(Bold)와 이탤릭체(Italic)로 텍스트를 꾸미는 방법을 배울 것입니다. 마지막에는 전체 실습 코드를 제공하니 참고하시기 바랍니다.

1. 머리글(Heading) 태그 사용하기

HTML에서는 문서를 논리적인 섹션으로 나누기 위해 머리글 태그를 사용합니다. 머리글은 <h1>부터 <h6>까지 총 6개가 있으며, 숫자가 작을수록 글씨 크기가 커지고 중요도가 높습니다.

<h1>: 가장 큰 제목으로, 페이지나 섹션의 주요 제목에 사용합니다.
<h2>: <h1>보다 작은 제목으로, 주요 제목의 하위 섹션에 사용합니다.
<h3> ~ <h6>: 점점 작은 제목으로, 문서의 구조를 세분화할 때 사용합니다.

예시 코드:

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

브라우저에서의 시각적 결과:

각 머리글은 크기와 두께가 다르게 표시되어 텍스트의 계층 구조를 시각적으로 보여줍니다.

2. 단락(Paragraph) 태그 사용하기

단락은 <p> 태그를 사용하여 표시하며, 텍스트의 큰 블록을 나타낼 때 사용합니다.

예시 코드:

<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>

3. 텍스트를 굵게(Bold)와 이탤릭체(Italic)로 만들기

텍스트를 굵게 또는 이탤릭체로 표시하여 강조할 수 있습니다.

3.1 굵게 만들기

옛날 방식: <b> 태그를 사용합니다.
추천 방식: <strong> 태그를 사용하여 의미론적 의미를 부여합니다.

예시 코드:

<strong>중요한 텍스트</strong>

3.2 이탤릭체로 만들기

옛날 방식: <i> 태그를 사용합니다.
추천 방식: <em> 태그를 사용하여 의미론적 의미를 부여합니다.

예시 코드:

<em>강조하는 텍스트</em>

4. 주석(Comment) 사용하기

주석은 브라우저에 표시되지 않으며, 코드에 대한 설명이나 메모를 남길 때 사용합니다.

주석 작성 방법:

<!-- 이 부분은 주석입니다 -->

5. 실습 예제

이제 위에서 배운 내용을 종합하여 실제로 코드를 작성해보겠습니다.

목표:

블로그 페이지를 만들기
제목과 단락을 사용하여 구조화
텍스트를 굵게와 이탤릭체로 강조
'HyperText Markup Language'의 첫 글자인 H, T, M, L을 굵게 표시

전체 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>The Code Magazine</title>
</head>
<body>

    <!-- 메인 제목 -->
    <h1>The Code Magazine</h1>

    <!-- 글 제목 -->
    <h2>What is HTML?</h2>

    <!-- 작성자 정보 -->
    <p><strong>Laura Jones</strong> | Monday, June 21st, 2021</p>

    <!-- 본문 내용 -->
    <p>Welcome to the world of <strong>HTML</strong>. In this article, we will explore the basics of creating web pages using HTML.</p>

    <p>HTML stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage. It is the standard markup language for creating web pages.</p>

    <!-- 부제목 -->
    <h3>Why should you learn HTML?</h3>

    <p>Learning HTML is the first step to becoming a web developer. It allows you to create structured documents by denoting structural semantics such as headings, paragraphs, lists, links, quotes, and other items.</p>

    <p>Understanding HTML is essential for creating and designing websites effectively. It is also the foundation upon which other technologies like CSS and JavaScript build upon.</p>

    <!-- 강조 텍스트 -->
    <p>Remember, mastering HTML is <em>crucial</em> for anyone interested in web development!</p>

</body>
</html>

6. 코드 설명

<!DOCTYPE html>: HTML 문서임을 선언합니다.
<html lang="ko">: 문서의 언어를 한국어로 설정합니다.
<head>: 메타데이터를 포함하며, 문서의 제목을 <title> 태그로 지정합니다.
<body>: 실제로 브라우저에 표시되는 콘텐츠를 포함합니다.
<h1> ~ <h3>: 머리글 태그를 사용하여 제목과 부제목을 표시합니다.
<p>: 단락을 표시합니다.
<strong>: 텍스트를 굵게 표시하며, 의미론적으로 중요한 정보를 나타냅니다.
<em>: 텍스트를 이탤릭체로 표시하며, 의미론적으로 강조하고 싶은 정보를 나타냅니다.

7. 추가 설명

머리글 사용 시 주의사항: 한 페이지에 <h1> 태그는 하나만 사용하는 것이 좋습니다. 이는 문서의 주요 제목을 나타내기 때문입니다.
의미론적 태그 사용의 중요성: <strong>와 <em> 태그는 단순한 스타일링 이상으로, 해당 텍스트의 중요성이나 강조를 의미론적으로 표현합니다. 이는 검색 엔진 최적화(SEO)와 접근성 측면에서 중요합니다.
주석 활용하기: 코드의 특정 부분을 일시적으로 비활성화하거나, 설명을 추가할 때 주석을 사용하면 좋습니다.