줄바꿈과 공백 - br,  

게시글 행 간격을 조절하고 줄바꿈과 띄어쓰기 설정하는 방법

줄바꿈

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

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

<p>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</p>

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

공백

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

<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>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

폭 없는 공백

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

<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>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

기타 HTML 참조

Post a Comment