pre, code 태그에서 줄바꿈, 공백(탭) 문제 해결하기

pre 혹은 code 태그를 사용하면서 귀찮게 하는 문제가 2가지 있습니다.

첫번째는 줄바꿈 문제이고, 두번째는 공백(혹은 탭)에 대한 문제입니다.

이 두가지는 CSS 의 한가지 속성으로 제어가 가능합니다. 그거슨 바로 white-space 입니다.

white-space 의 값에 대하여

자세한 내용은 w3school.com – CSS white-space Property 페이지에서 찾아 볼 수 있지만, 여기에 간단하게 기록으로 남깁니다.

pre { white-space: normal|nowrap|pre|pre-line|pre-wrap }

• normal: 공백은 1개로 처리, 필요시 줄바꿈
• nowrap: 공백은 1개로 처리, <br> 태그가 나오기 전까지 줄바꿈 없음
• pre: 공백 그대로 표시, 반드시 line break에서만 에서 줄바꿈
• pre-line: 공백은 1개로 처리, 필요시 line break 에서 줄바꿈
• pre-wrap: 공백 그대로 표시, 필요시 line break 에서 줄바꿈

코드의 각 라인에 들여쓰기를 했는데 실제 웹에서는 표시 되지 않는다면 white-space 를 pre 혹은 pre-wrap 으로 설정하는 것이 맞고,

줄바꿈이 필요하면서 들여쓰기를 위해 탭이나 빈칸을 넣어둔 경우에는 white-space 를 pre-wrap 으로 설정하는 것이 좋습니다.

끝.