[HTML] 공백을 쉽게 삽입할 수 있다고? - pre 태그

코딩을 하다 보면 공백(띄어쓰기)를 여러 번 연속으로 넣고 싶을 때가 종종 생긴다.

그때 마다  나는 &nbsp 를 겁나 ctrl+c, crtl+v 해서 삽입하곤 했다.

 

동일한 코드를 남발하는 것은 매우 비효율적인 코드몽키들이나 하는 짓이다.

그 코드몽키가 바로 나다.

 

근데 이렇게 일일이  &nbsp 를 반복하지 않아도 손쉽게 공백을 연속으로 넣을 수 있는 방법이 있었다...

 

바로  <pre>태그다.

 

<pre> 태그의 활용

<pre> 태그는 입력한 그대로 출력하는 태그다.

<pre> 태그는 공백 삽입 뿐 아니라 <br> 태그 없이 개행도 가능하게 해준다.

 

사용법은 아주 간단하다.

<pre></pre> 태그 안에서는 우리의 Enter 키나 SpaceBar 키가 전부 그대로 반영된다.

 

See the Pen Untitled by MinCheol-Sin (@mincheol-sin) on CodePen.

이게 원래 우리가 아는 출력 방식이다.

개행은 반영되지 않고, 엔터나 띄어쓰기는 여러 번 연속으로 해도 한 번만 반영된다.

 

하지만 <pre> 태그를 사용하면?

 

See the Pen Untitled by MinCheol-Sin (@mincheol-sin) on CodePen.

 

보이는가?

이 놀라운 광경이..

 

나는 <br>이나 &nbsp를 하나도 사용하지 않고 문단을 수차례 개행하고 띄어쓰기를 했다.

 

 

오늘도 성장했다.