[CSS] CSS white-space 속성 [6/6 study]

 

 

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

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN

 

🔥마무리

공부를 하면서 white-space라는 속성을 한번 공부해 본 적이 있었는데 오랜만에 다시 보니까 기억이 안나서 포스팅 해보았습니다

오늘도 화이팅!