[Django + HTML] 첫 줄이 들여쓰기가 적용된 문제 해결

첫 줄이 들여쓰기가 적용된 것 해결

시마당 프로젝트를 진행하는 가운데, 다음과 같은 현상이 몇 번 있었습니다. 시의 첫 줄에서 들여쓰기가 적용되는 것입니다. 물론 인공지능 협업을 통해 작업을 하고는 있지만, 간혹 이런 문제로 밤새는 경우가 생깁니다. 

시의 첫머리에 들여쓰기 적용

 

HTML은 기본적으로 여러 칸의 공백을 한 칸으로 줄이고, 줄바꿈과 탭도 모두 공백 한 칸으로 처리합니다.
공백과 줄바꿈을 그대로 보이게 하려면 <pre> 태그나 CSS white-space 속성을 사용해야 합니다. 그러나 사용된 CSS와 태그들도 해결이 어려웠습니다.

 

해결 과정

결론부터 말하면 핵심은 공백 보존을 끈 것과 줄바꿈은 HTML 태그로 보존한 것입니다. 즉 스타일시트의 'pre-wrap' 적용을 제외하고 대신 'linebreaks'로 해결이 됐습니다. 본래는 'linebreaksbr'이었는데, 'linebreaks'로 변경한 것입니다.

 

'linebreaksbr'과 'linebreaks'의 차이

linebreaksbr는 텍스트의 줄바꿈 문자(\n)를 <br> 태그로만 변환하여 단락 구분 없이 단순 줄바꿈만 표시합니다. 예를 들어 두 줄이 있으면 <br>로 이어집니다.
반면 linebreaks는 두 줄 이상의 빈 줄(\n\n)을 <p> 단락 태그로 변환하고, 단락 내부의 한 줄 줄바꿈(\n)은 <br>로 바꿉니다. 따라서 linebreaks는 문단 구조를 살려 주고, linebreaksbr은 단순히 시각적인 줄바꿈만 처리하는 차이가 있습니다.

 

첫 줄 들여쓰기가 해결된 상태

 

정리하면, CSS의 공백 보존을 끄고(pre-wrap 제거), 줄바꿈만 템플릿 필터로 HTML 태그화했기 때문에 첫 줄 들여쓰기는 사라지고, 시의 줄 나눔은 그대로 살아난 것입니다. 이 방법은 '오유권문학관' 프로젝트 원작 본문 표기에도 적용했던 것이었습니다.