CSS 속성 두 가지만으로 pre 태그를 100% 반응형으로 만드는 방법

CSS 속성 두어 가지만 추가하면 HTML pre 태그를 빠르게 100% 반응형으로 만들 수 있습니다. 이 글에서 그 방법을 단계별로 알아보겠습니다.

문제 상황: 코드 블록이 레이아웃을 깨뜨릴 때

여러 튜토리얼 사이트에서 자주 발견되는 문제 중 하나는, pre 태그로 감싸진 긴 코드 스니펫이 페이지 너비를 벗어나면서 전체 레이아웃이 깨지는 경우입니다.

그 이유는 기본적으로 pre 태그의 CSS white-space 속성이 다음과 같이 설정되어 있기 때문입니다.

pre {
  white-space: normal;
}

1단계: white-space 속성 변경하기

이 문제를 해결하는 방법은 간단합니다. normal을 pre-wrap으로 바꾸기만 하면 됩니다.

pre {
  white-space: pre-wrap;
}

이것만으로도 큰 개선 효과를 볼 수 있지만, 오버플로우 문제가 완전히 해결되는 것은 아닙니다. pre-wrap은 코드 한 줄 전체, 즉 공백으로 구분된 코드 요소들의 모음에만 적용되기 때문입니다.

2단계: word-break 속성 추가하기

그렇다면 코드 줄 안의 개별 단어가 너무 길어서 페이지 너비를 초과하는 경우에는 어떻게 될까요?

이 경우에도 레이아웃은 여전히 깨집니다. pre-wrap은 개별 단어까지는 처리해 주지 않기 때문입니다.

대표적인 예가 디렉터리 경로입니다. 디렉터리 경로는 쉽게 50자를 넘을 수 있는데, 이는 특히 모바일 환경에서 대부분의 레이아웃에는 너무 깁니다. 실제 예시를 보겠습니다.

cd /Users/david/Dev/techstacker/content/posts/how-to-make-seo-friendly-urls/how-to-make-seo-friendly-urls.md

위 코드 줄에는 단어 사이에 공백이 없기 때문에 브라우저는 이를 하나의 아주 긴 단어로 인식합니다. 만약 각 단어 사이에 공백이 있었다면 앞서 설명한 pre-wrap 속성 덕분에 자연스럽게 줄바꿈되었을 것입니다. 하지만 실제로는 하나의 긴 단어로 읽히는 것이죠.

이 문제를 해결하려면 pre 태그에 word-break라는 또 다른 CSS 속성을 추가하고, 값을 break-all로 지정하면 됩니다.

pre {
  white-space: pre-wrap;
  word-break: break-all;
}

마무리

이제 여러분의 pre 태그는 어떤 화면 크기에서도 코드가 밖으로 삐져나가지 않는, 완벽하게 반응형 상태가 되었습니다. 두 속성만 기억해 두면 코드 블록으로 인한 레이아웃 깨짐 문제를 더 이상 걱정할 필요가 없습니다.