html5에서 pre 태그는 입력한 그대로의 상태를 화면에 보여준다. 일반적인 p 태그와 달리 공백과 탭, 엔터 등 사용자가 입력한 형태 그대로 화면에 출력한다. 특정한 문구나 소스코드 등의 문장을 화면에 보여주고자 할 때 pre 태그를 많이 사용하긴 하지만 지금은 그렇게 많이 사용되진 않는다.
html5 pre 태그의 사용 방법
using html5 pre tag
html5의 pre 태그는 독특한 기능을 가진다.
우리가 태그를 가지고 컨텐츠 등을 만들 때 화면 배치의 문제를 겪을 때 pre 태그를 그것을 상쇄한다.
무슨 말인가.
pre 태그는 웹페이지를 만들거나 컨텐츠를 만드는 사용자가 작성한 것 그대로 표시를 한다.
p 태그 사용시 무시되었던 엔터나 줄바꿈 탭같은 것들이 pre 태그 내에서는 그대로 적용된다.
pre 태그 사용
pre 태그를 사용하는 방법은 간단하다.
p 태그와 사용법은 간단하며 pre 태그 내에 컨텐츠 등을 작성하거나 입력하면 된다.
주로 가독성을 위한 특정 문구들에 사용이 많이 되는데 지금은 거의 사용되지 않는다.
소스 코드를 보여주거나 특정한 광고 문구등의 강조나 독특한 형태의 문장구조를 표현하고자 할 때는 사용하기 좋다.
<pre>
컨텐츠
</pre>샘플코드
pre 태그와 비교되는 것이 p 태그이다.
같은 코드를 넣었을 경우 어떻게 나오는지 눈으로 비교하면 쉽게 이해할 수 있다.
간단한 문장을 만들어 pre 태그와 p 태그를 비교해 본다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<h1>태그 비교</h1>
<p class="cont">
p 태그와 pre 태그를 비교해 본다.
</p>
</div>
<div>
<h2>p 태그 사용</h2>
<p class="cont">
이것은 p 태그를 사용한 것입니다.
p 태그는 엔터와 탭, 연속된 공백 등은 무시합니다.
</p>
</div>
<div>
<h2>pre 태그 사용</h2>
<pre class="cont">
이것은 pre 태그를 사용한 것입니다.
pre 태그는 엔터와 탭, 연속된 공백 등을 그대로 표시합니다.
</pre>
</div>
</body>
<!-- // -->
</html>
<!-- // -->위의 코드를 보면 p 태그와 pre 태그를 사용한 것을 볼 수 있다.
문장구조는 비슷하지만 결과를 다를 것이다.
눈으로 가시적으로 보면 쉽게 이해될 것이다.
결과 화면을 보자.
반응형
'programming > web' 카테고리의 다른 글
| html5 css3 스타일 자주 사용하는 배경 글자 정렬 적용하기 using html css sytle background font align (0) | 2022.03.13 |
|---|---|
| html5 태그에 스타일 css 지정하는 방법 using html5 style attribute (0) | 2022.03.12 |
| html5 br 줄바꿈 태그 사용 p 태그 비교 using line break br tag (0) | 2022.03.06 |
| html5 p 태그 h 태그 관계 컨텐츠 분리하기 using html5 p tag and h tag (0) | 2022.03.05 |
| 실시간 코드 에디터 html5 css3 스타일 적용하기 how to make code editor (0) | 2022.03.05 |
댓글