HTML wrap 속성 완벽 정리 – 텍스트 영역 줄바꿈 설정 방법

HTML의 wrap 속성은 폼(form)이 제출될 때 텍스트 영역(<textarea>) 안에 입력된 텍스트가 어떤 방식으로 줄바꿈되어 전송될지를 지정하는 속성입니다.

문법(Syntax)

wrap 속성의 기본적인 사용 문법은 다음과 같습니다.

<textarea wrap="hard | soft"></textarea>

wrap 속성의 값

wrap 속성에는 두 가지 값을 사용할 수 있습니다.

soft(기본값) : 화면 상에서는 입력란의 너비에 맞춰 텍스트가 줄바꿈되어 보이지만, 실제로 폼을 제출할 때는 줄바꿈 문자 없이 원본 텍스트 그대로 전송됩니다.
hard : 화면에 표시된 모양 그대로 줄바꿈 문자(\n)를 포함하여 텍스트가 전송됩니다. 이 값을 사용하려면 반드시 cols 속성을 함께 지정해야 합니다.

예제

다음은 HTML wrap 속성을 활용한 예제 코드입니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
    }
    .show {
        font-size: 1.5rem;
        margin: 1rem 0;
    }
</style>
<body>
<h1>HTML wrap Attribute Demo</h1>
<form action='' method="post">
<textarea rows="5" cols="28" wrap="soft">Hi! I'm a text area element with some dummy text.</textarea>
<input type="submit" class='btn' value="Submit Form">
</form>
<button onclick="set()" class="btn">Show wrap value</button>
<div class="show"></div>
<script>
    function set() {
        document.querySelector('.show').innerHTML = "The value of wrap attribute is " + document.querySelector("textarea").wrap;
    }
</script>
</body>
</html>

실행 결과

HTML wrap 속성 완벽 정리 – 텍스트 영역 줄바꿈 설정 방법

위 예제를 실행하면 텍스트 영역과 제출 버튼, 그리고 'Show wrap value' 버튼이 화면에 나타납니다.

여기서 'Show wrap value' 버튼을 클릭하면 텍스트 영역 요소에 설정된 wrap 속성의 현재 값이 아래에 출력됩니다.

HTML wrap 속성 완벽 정리 – 텍스트 영역 줄바꿈 설정 방법

정리

wrap 속성은 주로 긴 텍스트를 입력받는 게시판, 댓글, 메모 등의 폼에서 유용하게 활용됩니다. 제출 시 줄바꿈을 유지하고 싶다면 hard, 단순히 화면상에서만 줄바꿈되도록 하려면 기본값인 soft를 사용하면 됩니다.