줄바꿈과 공백 - br,  

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

줄바꿈

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

You may like these posts

  • input type="date" type을 date로 지정하면 날짜를 입력받을 수 있습니다. 웹브라우저마다 표현 방식이 다릅니다.   기본형 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, …
  • abbr <abbr> 은 약자(abbreviation)임을 나타냅니다. title 속성을 함께 사용하여 툴팁으로 나오게 할 수 있습니다.   기본형 <abbr title="Xxx Yyy Zzz">XYZ</abbr> title 속성에 약…
  • 링크 만들 때 사용하는 태그 링크(link)는 <a> 태그로 만듭니다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다.   주요 속성 <a> 태그 안에서 사용할 수 있는 주요 속성은 다음과 같습니다. 속…
  • em, strong <em> 태그는 기울임꼴로 강조할 텍스트에 사용합니다. <strong> 태그는 굵게 강조할 텍스트에 사용합니다.   em 태그와 i 태그의 차이점 문장에서 흐름상 특정 부분을 강조하고 싶을 때는 <em> 태그를 사용하고,…
  • del, ins <del>은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. <ins>는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다.   예제 <p>My favo…
  • address 태그는 주로 footer 태그 안에 사용되는데 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는데 사용됩니다. 또 웹 사이드와 관련된 우편 주소도 포함시킬 수 있습니다. address <address>는 소유자 또…

Post a Comment