글 작성 시 일일이 <br>,   를 사용해서 엔터, 줄바꿈을 사용하시나요?
편하게 줄을 바꿀 수 있는 방법들을 소개하겠습니다.
<p> Tag
<p> 태그는 하나의 문단을 생성할 때 사용합니다.
<p> 태그 끼리는 다른 문단으로 인식하기 때문에
실제 보일 때는 줄바꿈을 두번 수행한 모습입니다.
코드 예시
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<p>안녕하세요.<br />P 태그 테스트 입니다.</p>
출력
첫 번째 문단
두 번째 문단
안녕하세요.
P 태그 테스트 입니다.
<pre> Tag
<pre> 태그는 입력된 Text를 Text 그대로 온전히 표현하기 위한 태그입니다.
실제로 <pre> 태그 안에서 입력한 줄바꿈, 공백 등은 그대로 표현됩니다.
코드 예시
<pre>
pre 태그 테스트입니다.
입력한 그대로 표현이 되며,
<br>,   를 일일히 입력하지 않아도 됩니다.
</pre>
출력
pre 태그 테스트입니다.
입력한 그대로 표현이 되며,
<br>,   를 일일히 입력하지 않아도 됩니다.
CSS: white-space 속성
css로 줄바꿈을 하는 속성입니다. 속성값은 아래와 같습니다.
normal
연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
nowrap
연속 공백을 하나로 합침. 줄 바꿈은 <br> 태그에서만 일어납니다.
pre
연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 태그에서만 일어납니다.
pre-wrap
연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 태그에서 일어나며,
한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
pre-line
연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 <br> 태그에서 일어나며,
한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
break-spaces
다음 차이점을 제외하면 pre-wrap과 동일합니다.
- 연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.
- 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.
- 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 줍니다.
코드 예시(white-space)
<pre class="brush: html xml">
<p class="t" style="white-space: normal;">white-space: normal;</p>
<p class="a" style="white-space: normal;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
<p class="t" style="white-space: nowrap;">white-space: nowrap;</p>
<p class="b" style="white-space: nowrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
<p class="t" style="white-space: pre;">white-space: pre;</p>
<p class="c" style="white-space: pre;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
<p class="t" style="white-space: pre-wrap;">white-space: pre-wrap;</p>
<p class="d" style="white-space: pre-wrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
<p class="t" style="white-space: pre-line;">white-space: pre-line;</p>
<p class="e" style="white-space: pre-line;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
</pre>
출력(pre-line)
white-space: normal;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.
white-space: nowrap;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.
white-space: pre;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.
white-space: pre-wrap;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.
white-space: pre-line;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.