HTML에서 <textarea> 요소에 입력된 텍스트가 화면에 어떻게 줄바꿈되어 표시될지를 제어하려면 wrap 속성을 사용합니다. 이 속성은 폼(form)을 전송할 때 텍스트 영역의 줄바꿈이 실제 데이터에 반영될지 여부를 결정하는 중요한 역할을 합니다.
wrap 속성의 주요 값
- soft (기본값): 화면상에서만 자동으로 줄바꿈되며, 서버로 전송되는 값에는 줄바꿈 문자가 포함되지 않습니다.
- hard: 화면상의 줄바꿈 위치 그대로 줄바꿈 문자(\n)가 삽입되어 서버로 전송됩니다. 단, cols 속성이 함께 지정되어 있어야 합니다.
- off: 자동 줄바꿈이 비활성화되어, 한 줄로 길게 표시되며 가로 스크롤이 생길 수 있습니다.
예제 코드
아래 예제는 wrap="hard" 속성을 적용하여, 입력된 텍스트가 지정된 열(col) 너비에 맞춰 강제로 줄바꿈된 상태로 전송되도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<body>
<form action = "">
<textarea rows = "2" cols = "12" name = "details" wrap = "hard">
This is demo text This is demo text This is demo text This is demo text</textarea><br>
<input type = "submit">
</form>
</body>
</html>사용 시 주의사항
wrap="hard"를 사용할 때는 반드시 cols 속성을 함께 지정해야 하며, 그렇지 않으면 브라우저가 의도대로 동작하지 않을 수 있습니다. 또한 대부분의 경우 기본값인 soft로 충분하므로, 서버 측에서 물리적인 줄바꿈 정보가 꼭 필요한 경우에만 hard를 사용하는 것이 좋습니다.