1. [[CSS]]의 `white-space: pre-wrap`은 줄바꿈과 공백을 보존하며 창이 좁으면 줄을 더 나눈다. 아래 [[HTML]]을 일반 텍스트 파일 `poem.html`로 저장해 웹 브라우저에서 연다.

   ```html
   <!doctype html>
   <html lang="ko">
   <meta charset="utf-8">
   <title>두 행</title>
   <style>.poem { white-space: pre-wrap; }</style>
   <p class="poem">창문을 열었다.
     바람은 아직 이름이 없었다.</p>
   </html>
   ```
2. 두 행과 둘째 행 앞 공백이 보이는지 확인한다. 소스에 들여쓴 공백도 표시된다.
3. 창을 좁혀 [[시의 행과 화면의 줄]]을 비교한다. 원고의 행갈이와 화면 폭에 따른 줄바꿈은 다르다.
4. [[HTML 시]]나 [[CSS로 인쇄용 원고 만들기]]에도 적용해보자. 코드의 정리 습관이 시에 무단 입주할 때가 있다.

- [MDN의 white-space 안내](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/white-space)

## 기타 등등

- `pre-line`은 행갈이는 남기되 연속된 공백은 합친다. 들여쓰기까지 보존하는 `pre-wrap`과는 다른 선택이다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/white-space)
- 보존되는 탭의 기본 폭은 공백 여덟 칸이며 `tab-size`로 바꿀 수 있다. 탭으로 벌린 시의 간격도 별도로 살필 설정이다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/white-space)

#사소한기술 #HTML