Untitled_Blue

[HTML] 텍스트 관련 태그 정리 본문

Web/HTML

[HTML] 텍스트 관련 태그 정리

Untitled_Blue 2023. 6. 12. 09:24
반응형

안녕하세요. 이번에는 HTML에서의 텍스트 관련 태그에 대한 설명입니다.

 

- 제목을 크기별로 표현하는 H1 ~ H6

  • 텍스트를 크고 진하게 표현하며 숫자의 크기가 클수록 텍스트의 크기가 작아진다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    <h1>This is a Title !</h1>
    <h2>This is a Title !</h2>
    <h3>This is a Title !</h3>
    <h4>This is a Title !</h4>
    <h5>This is a Title !</h5>
    <h6>This is a Title !</h6>
</body>
</html>

다음과 같이 H1에서 H6까지 실행해보면 공통적으로 진하기가 적용된 점과 태그 내 숫자가 클수록 폰트 사이즈가 작아지는 점을 확인할 수 있다.

- 텍스트의 단락을 보여주는 <br>, <p>

  • <br> : 한 줄 개행
  • <p> ~ </p> : 자동으로 개행처리되며 내부에 내용을 입력하는 방식
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
   텍스트 개행하기 전입니다.
   이렇게 별도의 태그를 안하면 한 줄로 인식되서 출력됩니다.
</body>
</html>

다음과 같이 어떠한 개행 태그 없이 문서 내부에서만 개행처리하면 정상적으로 처리되지 않고 한 줄로 출력된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
   텍스트 개행하기 전입니다.<br>
   이렇게 별도의 태그를 안하면 한 줄로 인식되서 출력됩니다.

   <br>

   <p>이렇게 한 줄씩 개행 처리됩니다.</p>
   <p>이렇게 한 줄씩 개행 처리됩니다.</p>
   <p>이렇게 한 줄씩 개행 처리됩니다.</p>
</body>
</html>

다음과 같이 <br>을 입력하면 웹 브라우저에 입력한 부분에 맞게 정상적으로 개행처리가 된 것을 확인할 수 있다. <br> 태그 외에도 <p> 태그를 통해서도 한 줄마다 개행처리할 수 있다. 이때 p는 paragraph의 약자로 하나의 문단을 나타낼 때 쓰는 태그라는 점에서 <br> 태그와는 약간의 차이점이 존재한다.

- b와 strong 그리고 i와 em

  • <b> ~ </b> : bold의 약자로서 단순히 글자를 굵게 보여주는 태그
  • <strong> ~ </strong> : 경고 또는 주의사항을 보여주기 위한 태그
  • <i> ~ </i> : italic의 약자로서 이탤릭체, 즉 기울임을 나타내는 태그
  • <em> ~ </em> : emphasis의 약자로서 무언가를 강조하기 위한 태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
   <b>b는 bold의 약자입니다.</b> <br>
   <strong>strong은 강하게 보여준다는 의미에서 굵기가 표현됩니다.</strong>

   <br><br>

   <i>i는 italic의 약자입니다.</i> <br>
   <em>em은 emphasis의 약자입니다.</em>
</body>
</html>

다음과 같이 텍스트를 굵게 표시할 때는 b와 strong을 사용하며 이탤릭체로 기울기를 주고 싶을 때는 i와 em을 사용한다.

각각의 차이점은 당장 눈에는 안보이나 낭독기(나레이터)에서 차이를 보여준다.

다음은 윈도우 내 내레이터를 실행한 후 웹 페이지의 내용을 읽기 실행하는 화면이다. 들어보면 strong과 em 부분은 b와 i와 다르게 조금 더 강조해서 읽어주는 것을 확인할 수 있다.

- <sub>, <sup>, <s>, <cite>, <abbr>, <code>

  • <sub> ~ </sub> : 윗 첨자 표시 (숫자로 비유하면 지수이다.)
  • <sup> ~ </sup> : 아래 첨자 표시
  • <s> ~ </s> : 취소선을 표시합니다.
  • <cite> ~ </cite> : 참조 또는 참고 내용을 표시합니다.
  • <abbr> ~ </abbr> : 줄임말 표시 + 커서를 대면 자세한 설명이 표시
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
   HTML<sub>HyperText Markup Language</sub> <br>
   2<sup>3</sup> = 8 <br>
   <cite>출처 : 이는 ---- 사이트를 참조한 그림입니다.</cite><br>
   <abbr title="Cascade Style Sheet">CSS</abbr>
</body>
</html>

다음과 같이 위아래 첨자, 참고내용 표시, 상세 설명 표시 태그를 활용해서 조금 더 다양하고 목적에 맞게 표현할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
   <s>이것은 취소선입니다.</s>
</body>
</html>

추가로 <s> 태그를 통해 취소선을 구현할 수 있으며 이를 통해 취소한 것이라는 표시를 할 수 있다.

- 코드를 깔끔하게 보여주는 <code>

  • <code> ~ </code> : 웹 페이지 내 소스코드를 영역을 별도로 명확하게 보여주는 태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    x = 5;
    y = 6;
    z = x + y; <br>
    
   <code>
    x = 5;
    y = 6;
    z = x + y;
   </code>
</body>
</html>

다음과 같이 code 태그를 사용하기 전과 후를 비교해서 확인할 수 있는데 code 태그를 사용하면 상대적으로 본문과 명확히 구별가능한 점을 확인할 수 있다. (참고로 html은 그대로 보여지지 않은 점을 확인할 수 있을 것이다...)

 

다음 글은 테이블과 목록 표시 태그에 대한 설명입니다. 감사합니다.

반응형

'Web > HTML' 카테고리의 다른 글

[HTML] 양식을 만들다. 폼 (Form) 태그  (0) 2023.06.14
[HTML] 하이퍼링크, iframe, Bookmark  (0) 2023.06.13
[HTML] 이미지, 오디오 등 컨텐츠 추가 태그  (0) 2023.06.13
[HTML] 목록과 표 만들기 - <table>, <li>, <ul>, <ol>  (0) 2023.06.12
[HTML] HTML 기초  (0) 2023.06.11
'Web/HTML' Related Articles more