- [CSS] CSS white-space 속성 [6/6 study]2024년 06월 06일 16시 32분 03초에 업로드 된 글입니다.이 글은 2024년 06월 14일 06시 38분 40초에 마지막으로 수정되었습니다.작성자: 동혁이
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라는 속성을 한번 공부해 본 적이 있었는데 오랜만에 다시 보니까 기억이 안나서 포스팅 해보았습니다
오늘도 화이팅!
다음글이 없습니다.이전글이 없습니다.댓글