게시판의 댓글에는 주로 <textarea> 태그를 사용할 것입니다.
그런데 textarea를 사용하게 되면 관습적으로 직면하는 부분이 있어서 그 부분에 대해서 다뤄봤습니다.
1. 내용이 길어질 때 정해진 box를 벗어나는 문제 (word-wrap, word-break)
CSS에서 박스의 크기를 명시한 다음 word-wrap, word-break 속성을 이용하는 것이 좋다.
word-wrap: break-word;
word-break: break-word;
word-break 속성은 단어의 분리를 결정하여 줄 바꿈에 관여
word-wrap 속성은 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하여 줄바꿈에 관여
- 출처 (https://wit.nts-corp.com/2017/07/25/4675)
만약, 한 줄로 쭈우우우욱~ 쓴다면 그건 한 단어로 인식하기 때문에 box에 벗어나지 않게 하려면 word-break를 써야 합니다. 위 두 속성을 경우에 따라 적용하시면 되겠습니다.
2. textarea로 입력 받은 글을 출력할 때 공백과 줄바꿈 유지하기
다음과 같이 줄바꿈, 공백을 살려 내용을 작성했는데 출력된 내용은 줄바꿈을 무시한 채로 출력되고 있습니다.
white-space를 이용하면 줄바꿈과 공백을 인식하여 출력됩니다.
white-space: pre-wrap;
white-space로 줄 수 있는 값은, normal, pre, pre-wrap 등 등이 존재는데, 단순히 pre만 할 경우 박스 크기를 넘쳐서 출력될 수 있습니다. 아무래도 pre-wrap이 제일 상식적인 결과물을 보여주는 태그인 것 같습니다.
'웹 전반, 브라우저 > HTML, CSS' 카테고리의 다른 글
마진 병합 현상과 방지 방법 (0) | 2020.09.05 |
---|---|
이미지를 위한 object-fit, object-position (0) | 2020.08.02 |
input[type="file"]의 스타일링하기 + DOM 조작으로 자동 제출 (0) | 2020.07.22 |
Masonry layouts 구현하기 (0) | 2020.06.30 |
video, audio 태그의 속성, 메서드 (0) | 2020.06.21 |