[ HTML ] 공백 넣기(띄어쓰기), 줄 바꿈하는 법

 

html에 공백을 아~무리 많이 입력해도 결과는 공백 한 칸이다.

또한 엔터를 눌러도 줄 바꿈이 되지 않는데 그럴 때는 아래의 방법을 사용하면 된다.

 

 

 

: Non-breaking Space로 줄 바꿈 없는 공백이란 뜻이다.

  공백 1칸을 의미한다.

 

 

위의 코드처럼 공백을 여러 개 넣고 싶다면 여러 번 입력해 주면 된다.

그런데 2칸 3칸을 띄어 쓰고 싶으면 어떻게 해야 할까..?

 

 

 

:공백 2칸

 

:공백 3칸 

 

 

아래의 코드를 보면 위의 코드보다 1칸씩 공백이 더 존재하는 걸 볼 수 있다.

 

 

---

 

<br> or <br/>

: 줄 바꿈 태그

이 태그는 self-closing tag여서 닫는 태그가 존재하지 않아

줄 바꾸고 싶은 부분에 추가해 주면 된다.

 

노래가사를 출력하는 걸 예로 해보자

 

 

html에 줄 바꿈 하여 코드를 작성하였으나 결과는 왼쪽과 같이 줄 바꿈이 전혀 반영되지 않는다.

하지만 아래 코드처럼 줄 바꿈을 하고 싶은 위치에 <br/>을 입력해 주면 html에 작성한 모양대로 출력이 된다.

 

 

---

 

그런데 나는 매번 &nbsp;와 <br/>을 쓰기 너무 귀찮다! 한다면

<pre></pre> 를 사용하면 된다.

 

<pre></pre>

: 작성한 html 내용을 그대로 출력하는 태그

 줄 바꿈과 띄어쓰기 모두 인식하여 html 그대로를 출력한다.

 

 

위에 쓰였던 가사를 <pre></pre>를 이용해 작성한다면 div 태그를 pre로만 바꿔주면 된다.