<aside> 💡 미립자 팁 : textarea 태그에 readonly 속성을 추가하면 읽기만 가능하고 쓰기는 불가능하다. 로그인하지 않은 유저는 댓글을 쓰지 못하게할 때 유용하다. <textarea readonly></textarea>

</aside>

줄바꿈 적용하기

줄바꿈이 하나도 안됐다.

textarea 태그에 엔터키(개행문자)를 눌러 줄바꿈을 적용해도, 입력한 value를 p 태그 등에 출력해보면 줄바꿈이 하나도 적용되지 않는다. 가장 간단한 해결 방법은 텍스트를 표시할 태그의 스타일에 white-space 속성을 추가하는 것. white-space는 공백 문자를 어떻게 처리할지 결정하는 속성이다.

white-space: normal — 기본값

• 여러 공백 : X (1개로 표시)
• 改行문자 \\n 표현 : X
• Wrap : O

white-space: nowrap — normal과 동일하나 wrap이 안됨

• 여러 공백 : X (1개로 표시)
• 改行문자 \\n 표현 : X
• Wrap : X

white-space: pre — <pre> 태그처럼 동작

<aside> 💡 <pre> 태그에 입력한 줄바꿈, 공백 등은 그대로 표현되며, 시스템에 지정된 고정폭 글꼴을 사용한다. 만약 <pre> 태그 안에 다른 (자식)태그가 있다면 해당 자식 태그의 속성은 그대로 유지된다(pre 태그 안에 h1 태그가 있다면 h1 속성을 그대로 가짐)

</aside>

• 여러 공백 : O (구하지... 뒷 부분이 여러 공백)