작성한 형태 그대로 보이게 하는 방법 - pre
pre
HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만
표시됩니다. 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈 칸으로 인식하고
페이지의 내용이 한 줄로 표시합니다.
만약 입력한 그대로 출력되도록 하려면
<pre> 태그를 이용합니다.
Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.
<pre>
Lorem ipsum dolor.
Lorem ipsum dolor.
Lorem ipsum dolor.
</pre>data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="html 입력한 그대로 출력 reference pre 예제1"
data-slug-hash="poyqoaz"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
자동으로 줄바꿈되도록 하기
<pre> 태그를 이용하면 문장이 길 경우 줄바꿈이 되지 않고
영역 바깥으로 나갑니다.
<pre>
입력한 그대로 출력됩니다.
Lorem ipsum dolor amet
Lorem ipsum dolor amet
Lorem ipsum dolor amet
</pre>
<pre>
문장이 길 경우 줄바꿈이 되지 않고 영역 바깥으로 나갑니다.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean nec mollis nulla.
Phasellus lacinia tempus mauris eu laoreet.
</pre>data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="html 입력한 그대로 출력 reference pre 예제2"
data-slug-hash="dyMwyKZ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.