데이터베이스의 개행문자를 HTML에서 줄바꿈으로 표시하는 3가지 방법

웹 개발을 하다 보면 데이터베이스에 저장된 텍스트 데이터를 웹 페이지에 표시해야 할 때가 많습니다. 특히 데이터가 여러 줄로 나뉘어 저장된 경우, 줄바꿈이 웹 브라우저에 제대로 표시되지 않으면 가독성이 떨어질 수 있습니다. HTML에서는 줄바꿈을 위해 <br> 태그를 사용해야 하지만, 개행 문자(\n, \r\n)는 HTML에서 무시됩니다.

이번 글에서는 HTML 태그와 CSS 스타일을 활용한 방법, 그리고 서버와 클라이언트에서 데이터를 처리하는 방법을 예제와 함께 소개합니다.

---

1. 문제 상황

예시 데이터

데이터베이스에 아래와 같은 텍스트가 저장되어 있다고 가정합니다.

안녕하세요.
저는 데이터베이스에서 온 텍스트입니다.
개행 처리가 필요합니다.

 

이 데이터를 HTML에 출력하면 다음과 같이 표시됩니다.

안녕하세요. 저는 데이터베이스에서 온 텍스트입니다. 개행 처리가 필요합니다.

 

줄바꿈이 무시되어 모든 텍스트가 한 줄로 나타납니다.

---

2. 해결 방법

해결책 요약

1. 서버 측에서 개행 문자를 <br> 태그로 변환.
2. 클라이언트 측에서 JavaScript로 개행 문자를 변환.
3. CSS 스타일로 개행 문자를 줄바꿈 처리.

아래에서 각각의 방법을 구체적으로 살펴보겠습니다.

---

3. 서버 측에서 처리

백엔드에서 데이터를 HTML로 전달하기 전에 개행 문자를 <br> 태그로 변환합니다.

예제: Java Spring Boot

import org.springframework.web.util.HtmlUtils;

public class TextFormatter {

    public static String formatText(String input) {
        if (input == null) {
            return "";
        }
        // HTML 이스케이프 처리 후 개행 문자 변환
        return HtmlUtils.htmlEscape(input).replace("\n", "<br>").replace("\r", "");
    }
}

 

Controller 예시

@RestController
public class TextController {

    @GetMapping("/display")
    public String displayText() {
        String dbText = "안녕하세요.\n저는 데이터베이스에서 온 텍스트입니다.\n개행 처리가 필요합니다.";
        return TextFormatter.formatText(dbText);
    }
}

 

---

4. 클라이언트 측에서 처리

JavaScript를 사용하여 개행 문자를 <br>로 변환합니다.

JavaScript 예제

function formatText(text) {
    if (!text) return "";
    return text.replace(/\n/g, "<br>").replace(/\r/g, "");
}

// 예제 데이터
const dbText = "안녕하세요.\n저는 데이터베이스에서 온 텍스트입니다.\n개행 처리가 필요합니다.";

// HTML에 출력
document.getElementById("output").innerHTML = formatText(dbText);

 

HTML 예제

<div id="output"></div>

 

---

5. CSS 스타일을 활용한 처리

CSS를 사용하면 데이터의 개행 문자를 <br>로 변환하지 않고도 HTML에 줄바꿈을 표시할 수 있습니다. 이 방식은 데이터를 변경하지 않고 스타일링만으로 해결할 수 있어 간단하고 효율적입니다.

CSS 설정

white-space 속성을 사용합니다.

<style>
    .preserve-line-breaks {
        white-space: pre-line;
    }
</style>

 

white-space 속성 값:

• pre-line: 개행 문자를 HTML에서 줄바꿈으로 처리합니다.
• pre: 개행 문자를 유지하되 공백도 그대로 표시합니다.
• nowrap: 줄바꿈을 하지 않습니다.

HTML 예제

<div class="preserve-line-breaks">
    안녕하세요.
    저는 데이터베이스에서 온 텍스트입니다.
    개행 처리가 필요합니다.
</div>

 

데이터 적용 방식

서버에서 데이터를 그대로 전달하거나 JavaScript로 삽입한 텍스트도 CSS로 줄바꿈을 적용할 수 있습니다.

const dbText = "안녕하세요.\n저는 데이터베이스에서 온 텍스트입니다.\n개행 처리가 필요합니다.";
document.getElementById("cssOutput").textContent = dbText;

 

HTML:

<div id="cssOutput" class="preserve-line-breaks"></div>

 

6. 결과 비교

방법	장점	단점
서버 처리	브라우저 호환성 걱정 없음. 모든 데이터에 일관된 처리 가능.	서버 부하 증가 가능.
클라이언트 처리	서버 부담 없음. 동적으로 데이터를 처리할 수 있음.	JavaScript 비활성화 시 동작하지 않음.
CSS 스타일 처리	가장 간단한 구현. 데이터 변환 없이 스타일링만으로 해결 가능.	브라우저 white-space 속성 지원 필요. HTML 이스케이프 필요.

 

7. 마무리

데이터베이스의 개행 문자를 줄바꿈으로 표시하는 방법은 여러 가지가 있습니다.

• 서버 또는 클라이언트에서 개행 문자를 <br>로 변환하는 방법은 유연하지만, 구현 복잡도가 조금 더 높을 수 있습니다.
• CSS의 white-space: pre-line 속성은 간단하고 효율적인 방법으로, 대부분의 상황에서 적합합니다.