[HTML] 1. 텍스트 태그

2023. 3. 19. 18:00

안녕하세요. HTML강사 코딩하는 고양이입니다.

오늘은 텍스트 태그 종류를 배워볼 거예요.

시작하기 전에 초기 설정을 해주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이것을 복사하세요.

1. 제목 태그

제목태그는 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>가 있습니다.

<h1>이 가장 큰 글씨고 <h6>이 가장 작은 글씨다.

예)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>코딩하는 고양이</h1>
    <h2>코딩하는 고양이</h2>
    <h3>코딩하는 고양이</h3>
    <h4>코딩하는 고양이</h4>
    <h5>코딩하는 고양이</h5>
    <h6>코딩하는 고양이</h6>
</body>
</html>

실행 결과

2. 본문 태그

본문태그에는 <p> 태그가 있습니다.

가장 기본적인 태그 이기도 하죠

예)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>코딩하는 고양이</h1>
    <p>
        나는 코딩하는 고양이 이다.
    </p>
</body>
</html>

실행 결과

3. 줄 바꿈 태그

줄바꿈 태그는 <br>입니다.

본문 작성 시 필수적으로 사용하는 태그입니다.

<br>은 줄을 바꿔줍니다.

예)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>코딩하는 고양이</h1>
    <p>
        나는 코딩하는 고양이 이다.
        <br>고로 고양이 이다.
    </p>
</body>
</html>

실행 결과

4. 수평줄 태그

수평줄 태그는 <hr> 태그입니다.

수평줄은 지금 아래 있는 그 줄입니다.

그것을 나타내는 태그입니다.

예)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>코딩하는 고양이</h1>
    <p>
        나는 코딩하는 고양이 이다.
        <br>고로 고양이 이다.
        <hr>
        <br>고양이지만 타자를 칠수 있다.
    </p>
</body>
</html>

실행 결과

5. 텍스트를 꾸며주는 태그

태그	설명
<blockquote>	인용문을 나타낸다
<strong>, <b>	글자의 모양을 굵게 지정한다
<i>, <em>	글자의 모양을 기울이게 지정한다
<q>	인용 내용을 표시한다
<mark>	형광펜 효과를 준다
<cite>	참고내용을 표시한다 (글자가 작다)
<small>	글자를 작게 표시한다
<s>,<del>	취소선을 표시한다
<ins>	밑줄을 표시한다

예)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>코딩하는 고양이</strong><br>
    <b>코딩하는 고양이</b><br>
    <i>코딩하는 고양이</i><br>
    <em>코딩하는 고양이</em><br>
    <q>코딩하는 고양이</q><br>
    <mark>코딩하는 고양이</mark><br>
    <cite>코딩하는 고양이</cite><br>
    <small>코딩하는 고양이</small><br>
    <s>코딩하는 고양이</s><br>
    <del>코딩하는 고양이</del><br>
    <ins>코딩하는 고양이</ins>
</body>
</html>

실행 결과

정리

1. 제목을 나타낼 때는 <h> 태그를 사용하며 <h1>이 가장 크다

2. 본문태그의 기본은 <p>

3. 줄을 바꿀 때는 <br>을, 수평줄을 나타낼 때는 <hr> 태그를 사용한다.

4. 텍스트를 꾸며주는 태그는 9종류가 있다.

오늘의 문제!

1번 문제

아래 본문과 똑같게 HTML로 나타내세요

마이스틱의

~~마이는~~

이마에서

유마아유 마아

아이고

~~맞세워라~~

카카마카

2번 문제

<hr>과 <p> 태그만을 이용해 아래 본문과 똑같게 HTML로 나타내세요

하이

하이하이

하이하이하이

하이하이하이하이

하이하이하이하이하이

3번 문제 (심화)

"어쩔 티비 저쩔 티비" 문장을 취소선과 굵은 글자 효과를 추가해 나타내세요

1번 모범답안

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        마이<ins>스틱의</ins>
        <br><del>마이는</del>
        <br>이마<b>에서</b>
        <br><ins>유마아</ins>유마아
        <br><i>아</i><del>이</del><ins>고</ins>
        <br><del>마세워라</del>
        <br><b>카</b><i>카</i><ins>마</ins><del>카</del>
    </p>
</body>
</html>

2번 모범답안

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>하이</p>
    <hr>
    <p>하이하이</p>
    <hr>
    <p>하이하이하이</p>
    <hr>
    <p>하이하이하이하이</p>
    <hr>
    <p>하이하이하이하이하이</p>
</body>
</html>

3번 모범답안

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><del><b>어쩔티비 저쩔티비</b></del></p>
</body>
</html>

오늘은 여기까지 ㅂㅂ

'HTML, CSS > 이론' 카테고리의 다른 글

[HTML/CSS] 5. 표 태그 (0)	2023.03.23
[HTML/CSS] 4. CSS의 기초 (1)	2023.03.22
[HTML] 3. 이미지 태그와 링크 태그 (2)	2023.03.21
[HTML] 2. 목록 태그와 설명 태그 (1)	2023.03.20
[HTML] 0. 초기 셋팅 (0)	2023.03.18

코딩하는 고양이

[HTML] 1. 텍스트 태그

'HTML, CSS > 이론' 카테고리의 다른 글

+ Recent posts

티스토리툴바