HTML DOM Textarea wrap 속성이란?
HTML DOM의 Textarea wrap 속성은 HTML 문서 안에서 textarea(텍스트 영역) 요소의 wrap 속성 값을 읽어 오거나 변경할 때 사용됩니다. 이 속성을 활용하면 폼(form)을 제출할 때 텍스트의 줄바꿈을 어떻게 처리할지 프로그래밍 방식으로 제어할 수 있습니다.
wrap 속성의 두 가지 값
- soft(기본값): 화면에서는 텍스트가 자동으로 줄바꿈되어 보이지만, 폼을 제출할 때는 줄바꿈 문자가 텍스트에 포함되지 않습니다.
- hard: 폼을 제출할 때 실제 줄바꿈 문자가 텍스트에 삽입됩니다. 단,
hard값을 사용하려면 반드시cols속성이 함께 지정되어야 합니다.
문법(Syntax)
wrap 속성의 기본 문법은 다음과 같습니다.
1. wrap 값 반환하기
object.wrap
2. wrap 값 설정하기
object.wrap = soft | hard
그럼 HTML DOM Textarea 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>DOM Textarea wrap 속성 데모</h1>
<form action='' method="post">
<textarea rows="5" cols="28" wrap="soft">
안녕하세요! 저는 더미 텍스트를 담고 있는 textarea 요소입니다.
</textarea>
<input type="submit" class='btn' value="폼 제출">
</form>
<button onclick="set()" class="btn">wrap 값 보기</button>
<div class="show"></div>
<script>
function set() {
document.querySelector('.show').innerHTML = "wrap 속성의 값은 " + document.querySelector("textarea").wrap;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행한 뒤 “wrap 값 보기” 버튼을 클릭하면, textarea 요소의 wrap 속성 값이 아래 화면과 같이 표시됩니다.
