정리하고 기록하며 성장하는

텍스트 표시 방법과 특징 본문

프론트/HTML

텍스트 표시 방법과 특징

개발하는묭이 2021. 12. 20. 17:09

문단

글을 내용상 끊어서 구분한 토막글

p 태그는 문단 요소를 나타내는 태그로써 가장 많이 사용되는 태그이다

하나의 p태그는 하나의 문단을 표현한다

문단과 문단 사이에는 공백이 있다

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>텍스트 태그 연습</title>
    </head>
    <body>
       <h1>텍스트 태그 연습</h1> 
       <p>텍스트를 표시하고 있습니다.</p>
       <hr>
       <h2>작은 제목</h2>
       <p>제목의 크기가 바뀌었습니다.</p>
       <p>p 태그는 하나의 문단을 나타냅니다.</p>
       <p>따라서 하나의 p태그는 자기만의 영역을 가집니다.</p>
    </body>
</html>

 

 

제목(headline)

h 태그는 제목(표제) 요소를 나타내는 태그이다

숫자와 함께 사용되면 숫자 1일때 가장 크고 6일때 가장 작다

 

<!DOCTYPE html>
<html lang="en">
<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>

 

수평선

hr 태그는 수평선을 표시하는 단일 태그이다

주제 변경 또는 내용 구분을 위해 주로 사용한다

 

<!DOCTYPE html>
<html lang="en">
<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>





</body>
</html>

 

HTML 텍스트의 특징

일반적으로 엔터는 줄바꿈을 의미한다

HTML 코드에서는 이를 무시한다

또한 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않는다

 

줄바꿈 태그와 공백문자

HTML에서는 br 태그가 줄바꿈을 담당한다

공백을 두 번 이상 표시하고자 할 때는 &nbsp;를 사용한다

 

br과 &nbsp를 통한 공백을 주는 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>텍스트 태그 연습</title>
    </head>
    <body>
       <h1>텍스트 태그 연습</h1> 
       <p>텍스트를 표시하고 있습니다.</p>
       <hr>
       <h2>작은 제목</h2>
       <p>제목의 크기가 바뀌었습니다.</p>
       <p>p 태그는 하나의 문단을 나타냅니다.</p>
       <p>따라서 하나의 p태그는 자기만의 영역을 가집니다. 
          <br><br><br> <!-- 엔터를 3번 출력하겠다 -->
          지금 영상을 만들고 있는데 ... 저희 집 고양이가
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!-- &nbsp; 조합문자를 연달아 10번 집어넣어 공백을 10번 주겠다-->
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          너무 방해를 해서 힘드네용
       </p>
    </body>
</html>

 

내용 정리

  • p 태그는 문단을 표시하는 태그이다
  • h1 ~ h6 태그는 헤드라인을 표시하는 태그이다
  • 숫자가 작을수록 크다
  • 수평선 hr은 주제 변경이나 내용 구분시에 사용하는 태그이다
  • html은 텍스트의 줄바꿈 , 공백 등을 엔터와 스페이스로 처리하지 않는다
  • 스페이스는 한 번씩만 허용된다 (연달아 입력할 경우 한 번 외엔 무시)
  • 태그 br는 줄바꿈을  , 문자조합 &nbsp는 공백을 나타낸다