새로운 질서 위키

웹에 올린 시의 줄바꿈 지키기

  1. CSS의 white-space: pre-wrap은 줄바꿈과 공백을 보존하며 창이 좁으면 줄을 더 나눈다. 아래 HTML을 일반 텍스트 파일 poem.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로 인쇄용 원고 만들기에도 적용해보자.

기타 등등

  • pre-line은 행갈이는 남기되 연속된 공백은 합친다. 들여쓰기까지 보존하는 pre-wrap과는 다른 선택이다. 출처
  • 보존되는 탭의 기본 폭은 공백 여덟 칸이며 tab-size로 바꿀 수 있다. 탭으로 벌린 시의 간격도 별도로 살필 설정이다. 출처

#사소한기술 #HTML

검색