[HTML] <pre>태그- 텍스트를 그대로 표현 & 줄바꿈

줄바꿈이 존재하는 텍스트 데이터를 그대로 출력하고 싶었는데,
div, p 태그 안에 넣어도 줄바꿈이 되지 않았다.

관련해서 검색 중 pre 태그에 대해 알게 되었다.

<pre>태그는 미리 정의된 형식의 텍스트를 정의할 때 사용한다.

또한 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타난다.

MDN

<div>
text1
</div>

<pre>
text1
text2
</pre>

div와 pre태그 안에 같은 텍스트를 입력했더라도, 다른 view가 출력된다. 


See the Pen Untitled by sally (@sally0) on CodePen.

또한 pre 태그는 내부에 있는 글을 “그대로”보여주는 특징이 있어, width가 넘어가도 줄바꿈이 되지 않는다.

이때는 pre 태그 css에 white-space: pre-wrap를 추가해준다.
(+width 가 지정되어 있어야 한다)

  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;

긴 단락을 자동 줄바꿈 하고 싶다면 다음과 같이 적용해줄 수 있다.