Div 에서 띄어쓰기, 줄바꿈 (<br> 태그)가 먹지 않을 때

목차

 

일반적으로 HTML에서 띄어쓰기 (줄바꿈)가 되지 않으면 형식에 맞지 않는 태그나 코드로 작성된 경우가 많다. 예를들어 <textarea> 태그에서는 줄바꿈을 <br/> 로 표현하지 않고, 운영체제에 따라서 \r\n 으로 표시하거나 \n으로 표시해야한다.

 

하지만, <div> 태그 내에서 줄바꿈을 하기 위해서는 보통 <br> 태그를 사용해서 적용하는데

이번에 아무리 적용해도 되지가 않아서 확인해보니,

 

<div> 태그는 아래와 같이 white-space 속성이 normal로 되어있다.

  

    
    
    
    
  
white-space: normal;

 

이건 띄어쓰기(\s), 들여쓰기(\t), 줄바꿈(\n)이 그냥 한번의 공백으로 차지하는 방식으로 바뀌는 것인데 이를 해결하기 위해서는 해당 속성값을 pre-wrap으로 변경해주어야 한다.

 

  

    
    
    
    
  
white-space: pre-wrap;

이것을 잘 몰라서 삽질을 하다가.. 해결되어서 기록으로 남겨둔다.