줄바꿈 HTML 변환

줄바꿈 HTML 변환 사용법

입력창에 여러 줄로 된 텍스트를 붙여넣으면 별도 버튼 없이 곧바로, 눈에 보이지 않는 줄바꿈 문자가 <br> 태그로 바뀐 한 덩어리의 HTML 코드가 나옵니다. 예를 들어 "안녕하세요"와 "반갑습니다" 두 줄을 넣으면 안녕하세요<br>반갑습니다처럼 출력됩니다. 이 결과를 그대로 복사해 웹페이지 소스, 게시판 HTML 입력 모드, 이메일 템플릿 등에 붙이면 원래 넣었던 줄 나눔이 브라우저에서도 똑같이 유지됩니다. 변환은 브라우저 안에서 즉시 처리되어 입력한 글은 서버로 전송되지 않습니다.

왜 이 변환이 필요한가 - 작동 원리

텍스트 편집기에서 Enter를 누르면 실제로는 눈에 안 보이는 개행 문자(줄바꿈, \n 또는 \r\n)가 들어갑니다. 그런데 HTML은 소스 코드 안의 이 개행을 그냥 공백 한 칸처럼 취급해서, 아무리 여러 줄로 써도 웹페이지에서는 한 줄로 쭉 이어져 나옵니다. 이 도구는 텍스트를 개행 문자 기준으로 잘라, 각 줄 사이에 강제 줄바꿈을 뜻하는 <br> 태그를 끼워 넣습니다. 그 결과 소스가 아니라 화면에서도 원했던 대로 줄이 나뉘게 됩니다. 윈도우식 \r\n, 맥/리눅스식 \n이 섞여 있어도 각각을 하나의 줄바꿈으로 인식해 처리합니다.

이럴 때 씁니다

워드나 메모장에서 정리한 여러 줄 문구를 회사 홈페이지·쇼핑몰 상세페이지에 그대로 옮기고 싶을 때, 게시판이 HTML 모드만 지원해 Enter가 먹히지 않을 때, 자동 발송 이메일이나 알림 메시지 템플릿에 주소·안내문을 줄 맞춰 넣을 때 유용합니다. 특히 데이터베이스에 저장된 여러 줄 텍스트를 웹에 뿌릴 때 개행이 사라지는 문제를 해결하는 용도로 자주 쓰입니다. 반대로 이미 <br>이 들어간 코드를 다시 텍스트로 되돌리는 것은 이 도구의 역방향 작업에 해당합니다.

사용 팁

연속된 빈 줄(Enter를 여러 번 친 부분)도 그 개수만큼 <br>로 바뀌므로, 문단 사이 간격을 그대로 재현할 수 있습니다. 다만 문단 단위로 의미를 구분하고 싶다면 <br>보다 <p> 태그로 감싸는 편이 웹 표준과 검색엔진 인식에 더 좋습니다. 또한 원문에 <, >, & 같은 기호가 있으면 브라우저가 태그로 오해할 수 있으니, 화면에 문자 그대로 보여야 하는 경우엔 변환 전에 이 기호들을 < 등으로 직접 바꿔 주면 됩니다. CSS로 white-space: pre-line을 적용할 수 있는 환경이라면 굳이 br로 바꾸지 않고도 개행을 살릴 수 있습니다.

자주 묻는 질문