![[CSS] CSS white-space 속성 [6/6 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FISw5S%2FbtsHZwo6wyQ%2FAAAAAAAAAAAAAAAAAAAAAP3kne8QrLi-tuuyqurJrgWQnMkX-upxEB3PJUZpCV4a%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3Dixf4M0QNzAhVMa93lerGyGfhie0%253D)
CSS white-space 속성
❗️white-space 속성이란?
- white-space 속성은 요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 지정합니다.
❗️사용예시
white-space: normal;
- normal은 초깃값 입니다!
- 연속되는 공백을 하나로 합치는 속성이 있습니다
white-space: nowrap;
- normal 값의 경우와 마찬가지로, 연속되는 공백을 하나로 합칩니다.
white-space: pre;
- <pre> 요소에서 초깃값입니다.
- 연속되는 공백을 인위적으로 하나로 합치지 않으며, 소스(소스 코드를 의미함)에서 줄바꿈 또한 그대로 유지하여 인위적인 공백의 축소를 하지 않습니다.
- 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키지 않습니다. 하지만 <br>에서는 강제로 줄바꿈시키는 것이 유지됩니다.
white-space: pre-wrap;
- <textarea> 요소에서 초깃값입니다.
- pre 값과 모든 것이 동일하게 구현되지만, normal 값의 경우처럼 필요에 따라 한 줄이 너무 길 경우 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시킨다는 것이 다릅니다.
white-space: pre-line;
- normal 값과 모든 것이 동일하게 구현되지만, 소스에서 줄바꿈을 공백 문자로 처리하지 않고 강제 줄바꿈시킨다는 점에서 normal 값과는 다릅니다.
❗️참고자료
https://developer.mozilla.org/ko/docs/Glossary/Whitespace
공백 (Whitespace) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
공백(Whitespace) 은 다른 문자 사이에 가로 또는 세로 간격을 제공하는 데 사용되는 문자열을 나타냅니다. 공백은 HTML, CSS, JavaScript 및 기타 컴퓨터 언어에서 토큰을 구분하는 데 자주 사용됩니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/CSS/white-space
white-space - CSS: Cascading Style Sheets | MDN
CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.
developer.mozilla.org
🔥마무리
공부를 하면서 white-space라는 속성을 한번 공부해 본 적이 있었는데 오랜만에 다시 보니까 기억이 안나서 포스팅 해보았습니다
오늘도 화이팅!
프론트엔드 공부일지 입니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!