HTML5 - 텍스트(서식유지, 위 - 아래 첨자 태그) <pre>, ,

2022. 2. 23. 15:43

<pre></pre> 태그 요소

이 태그는 요소 내 공백 문자, 문자, 고정폭, 글꼴 그대로 유지하고 화면에 렌더링(보여준다)을 한다.

이 말인즉슨 예로 확인해보자.

예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .output {
        background-color: gray;
    }

    #example-paragraphs {
        background-color: white;
        overflow: hidden;
        resize: horizontal;
        width: 9rem;
    }

  </style>
</head>
<body>  
  <p>
  ∧__∧　　
 ( ｀Д´ ）　　　　
 (っ▄︻▇〓┳═
  /　　 )
  ( /￣∪    
  </p>
  
  <hr>
  
  <pre>
  <p>
  ∧__∧　　
 ( ｀Д´ ）　　　　
 (っ▄︻▇〓┳═
  /　　 )
  ( /￣∪    
  </p>
  
  <hr>
  
  ∧__∧　　
 ( ｀Д´ ）　　　　
 (っ▄︻▇〓┳═
  /　　 )
  ( /￣∪    
    
  </pre>
</body>
</html>

결과 화면

결과 화면의 첫 번째 결과 <pre> 태그 밖에 작성되어있고, 태그로만 이루어져 있어서

글자로 이모티콘을 그려봤지만 나타난 결과는 일반 글자의 출력처럼 한 줄로 표현된다.

두 번째, 세 번째 결과를 보면 두 번째 결과는 태그로 작성되었고 <pre> 태그 안에 작성했다.

결과가 어떤가? HTML 소스코드에서 작성한 모양 그대로 렌더링 되었다.

세 번째 결과를 봐보자 이것도 마찬가지로 태그는 사용하지 않고, 단순 <pre> 안에다가

작성만 했다. 이것도 두 번째 결과와 같다.

그렇다. <pre></pre> 태그 안에 글자로 만든 이모티콘이나, 글자든 작성을 하면 띄어쓰기,

공간, 전부 똑같이 화면에 렌더링을 한다.

위 - 아래 첨자

 위 첨자 태그 요소, 아래 첨자 태그 요소

이 태그는 말 그대로 위 첨자 아래 첨자 표현할 때 사용한다. 바로 예를 보자.

예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>

  </style>
</head>
<body>  
  <p>2<sup>2</sup> = 4</p>
  <p>2<sup>3</sup> = 8</p>
  <p>2<sup>4</sup> = 16</p>
  
  <hr>
   
  <p>물 : H<sub>2</sub>O</p>
  <p>질산 : HNO<sub>3</sub></p>
  <p>암모니아수 : NH<sub>4</sub>OH</p>
  
</body>
</html>

결과 화면

결과 화면 보는 것과 같이 위 첨자 , 아래 첨자 표시할 때, 저 2개의 태그를 이용하여 표현하면 된다.

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

HTML5 - 텍스트(조언제공) <abbr>, <cite>, <dfn>, <kbd> (0)	2022.02.23
HTML5 - 텍스트(코드code 태그) <code>, <var>, <samp> (0)	2022.02.23
HTML5 - 텍스트(본문 내에서 특수 처리를 위한 구문추가) <s>, <u>, <mark>, <wbr> (0)	2022.02.23
HTML5 - 텍스트(수정태그) <small>, <del>, <ins> (0)	2022.02.22
HTML5 - 텍스트(강조태그) <b>, <i>, <strong>, <em> (0)	2022.02.22

열공의 기록