HTML에서 줄 바꿈을 넣을 때 흔히 <br> 태그를 사용하지만, CSS 가상 요소(pseudo-element)를 활용하면 br 태그 없이도 줄 바꿈을 구현할 수 있습니다. 가상 요소는 요소의 특정 부분에 스타일을 적용할 때 사용되며, 여기서는 ::after를 이용해 HTML 요소에 줄 바꿈을 추가하는 방법을 알아보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ::after With \a</title>
</head>
<style>
span {
padding: 1px 8px;
}
span::after {
content: '\a';
white-space: pre;
}
</style>
<body>
<div>
<span>Dumbledore</span>
<span>McGonagall</span>
<span>Snape</span>
<span>Trelawney</span>
</div>
</body>
</html>::after와 \a 개행 문자의 동작 원리
위 코드에서는 각 인라인 요소(span)에 ::after 가상 요소를 적용하여, 텍스트 뒤에 개행 문자("\a")를 삽입했습니다. 이때 ::after에는 content 속성과 white-space 속성이 함께 사용됩니다.
content 속성은 span에 삽입할 내용을 지정하며, 여기서 "\a"는 개행 문자(newline)를 의미합니다. white-space: pre 속성은 이 개행 문자가 일반적인 공백 처리 과정에서 무시되지 않고 실제 줄 바꿈으로 렌더링되도록 보장하는 역할을 합니다. 이 속성을 빼먹으면 \a가 단순히 무시되어 줄 바꿈이 일어나지 않으므로 반드시 함께 지정해야 합니다.
패딩과 배경색이 있을 때 발생하는 문제
스타일링과 레이아웃 작업이 익숙해질수록 위 방법이 항상 최선의 해결책은 아니라는 점을 알게 될 것입니다. 예를 들어 패딩(padding)이나 배경(background)을 추가하면, 배경이 의도했던 위치와 다르게 렌더링되는 문제가 발생합니다. 아래 코드 예제로 이 현상을 직접 확인해 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Line Break</title>
</head>
<style>
span {
padding: 1px 8px;
background: pink;
}
span::before {
content: "\A";
white-space: pre;
}
</style>
<body>
<div>
<p>Professor <span>Dumbledore</span></p>
<p>Professor <span>McGonagall</span></p>
<p>Professor <span>Snape</span></p>
<p>Professor <span>Trelawney</span></p>
</div>
</body>
</html>비슷한 결과를 얻을 수 있는 다른 방법도 있습니다. 배경이 이전 줄부터 시작해서 개행된 후, 다음 줄의 텍스트에 올바른 배경이 적용되는 형태죠. box-decoration-break: clone 속성을 앞서 살펴본 span 클래스에 추가하면 유사한 효과를 낼 수 있지만, 우리가 원하는 결과를 정확히 얻기는 어렵습니다.
display: table을 활용한 깔끔한 해결책
<p>나 <div>처럼 블록 레벨(block-level) 요소를 사용하는 방법도 생각해 볼 수 있습니다. 하지만 display 값을 다르게 활용하고 싶은 경우에는 어떻게 해야 할까요? 이럴 때 유용한 것이 바로 table 레이아웃 방식입니다.
코드 에디터에서 span CSS 선택자의 기존 속성들을 모두 삭제하고 display: table로 교체해 보세요. 이 방식은 코드를 더욱 깔끔하게 만들어줄 뿐만 아니라, 정보를 표시하는 데 필요한 레이아웃을 정확하게 구현해 줍니다. 물론 전통적인 의미의 table 레이아웃을 사용하는 것은 아니지만, 원하는 결과를 얻는 데 꼭 필요한 기능을 제공합니다.