서식이 미리 지정된 텍스트를 설정한다. (Preformatted Text)
- 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있다.
- 기본적으로 Monospace 글꼴 계열로 표시된다.
pre {display : block;}
만약에 pre태그를 사용하지 않는다면, 다음과 같이 출력이 된다.
<body>
<div>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</div>
</body>
출력된 값에서 볼 수 있듯이, 동해물과 사이에 띄어쓰기 10칸도 적용이 하나도 되어있지 않고, 닳도로고가 만세 등드에서 앤터한 부분도 적용이 하나도 안된것을 볼 수 있다.
하지만 pre태그를 사용한다면,
<body>
<pre>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</pre>
</body>
다음과 같이 출력이 된것을 볼 수 있다. 하지만 위에 코드와 같이 작성을 한다면, 들여쓰기 띄어쓰기가 모두 적용이 되어 출력이 되기 때문에 pre태그의 시작부분은 맨앞에 두고 글자 바로 앞에두고, pre태그의 끝부분은 글자끝에 바로 붙히는것이 좋다. 즉, 내가 원하는 시작부분과 끝을 그대로 쓰는것이 좋다.
<body>
<pre>동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.</pre>
</body>
이렇게 되면 처음과 달리 딱 붙어서 출력된 것을 볼 수가 있다.
pre태그가 사용되는곳은 블로그나 커뮤니티에 글을 작성할때 내가 썼던 방식 그대로(띄어쓰고 들여쓰기 전부다 똑같이 )DB에 데이터를 넣어서 내가 썼던글 그대로 다시 꺼내서 쓰고 싶을때 많이 사용된다.
'HTML > 요소' 카테고리의 다른 글
| 인라인 텍스트 - A 1 (0) | 2020.12.28 |
|---|---|
| BODY 내 구조 개념 --> 문자 콘텐츠 (BLOCKQUOTE) (0) | 2020.12.28 |
| BODY 내 구조 개념 --> 문자 콘텐츠 (P, HR) (0) | 2020.12.28 |
| BODY 내 구조 개념 --> 문자 콘텐츠 (DL, DT, DD) (0) | 2020.12.28 |
| BODY 내 구조 개념 --> 문자 콘텐츠 (OL, UL, LI) (0) | 2020.12.27 |