줄바꿈과 공백 - br,  

줄바꿈

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다.
따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로
표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면
  태그를 이용합니다.

다음은   태그를 이용해서
줄바꿈을 한 예제입니다. 첫 번째 문단은 줄바꿈 태그가 없고, 두 번째 문단은
줄바꿈 태그가 있는 곳에서 행이 분리됩니다. 아래의 코드 영역을 마우스로 드래그
해보세요.

style="white-space:pre-wrap;"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada

class="codepen"
data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 줄바꿈 tag br 예제1"
data-slug-hash="dyMQdBN"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 410px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

공백

만약 연속한 띄어쓰기나 긴 공백을 만드려면
  를 입력합니다.

<p>Lorem&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ipsum dolor</p>
<p>Lorem&nbsp;&nbsp;&nbsp;&nbsp;ipsum dolor</p>
<p>Lorem&nbsp;&nbsp;ipsum dolor</p>

class="codepen"
data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 띄어쓰기 &nbsp; 예제2"
data-slug-hash="qBZQoOq"
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;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

폭 없는 공백

폭 없는 공백(zero width space)을 사용하면 줄바꿈이 될 지점을 변경할 수
있습니다. 줄바꿈이 일어나는 부분에 폭 없는 공백
를 입력합니다.

<p>Lorem ipsum Phaselluslaciniat-empusmauriseulaoreet.</p>
<p>Lorem ipsum Phaselluslaciniat-em&#8203;pusmauriseulaoreet.</p>
<p>Lorem ipsum Phaselluslaciniat-empus&#8203;mauriseulaoreet.</p>
<p>Lorem ipsum Phaselluslaciniat-empusma&#8203;uriseulaoreet.</p>

<p>열매를 교향악이다. 용기가얼-마나청춘의심장은사막이다.</p>
<p>열매를 교향악이다. 용기가얼-마나&#8203;청춘의심장은사막이다.</p>
<p>열매를 교향악이다. 용기가얼-마나청춘&#8203;의심장은사막이다.</p>
<p>열매를 교향악이다. 용기가얼-마나청춘의심&#8203;장은사막이다.</p>

class="codepen"
data-editable="true"
data-preview="true"
data-height="650"
data-theme-id="light"
data-default-tab="html,result"
data-user="LiveBlogger"
data-slug-hash="bGegGXd"
style="height: 650px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="하이픈 hypen - 폭 없는 공백 zero width space 줄바꿈 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.