[css]MDN을 통해 알아보는 white-space property!!

See the Pen white-space by Taejin Kim (@kimtaejin3) on CodePen.

위를 보면 white space가 없을 경우에는 텍스트의 길이가 부모의 너비보다 커지면 그대로 벗어나게 됩니다.

그러면 한 번 white space를 만들어 봅시다.

See the Pen white-space2 by Taejin Kim (@kimtaejin3) on CodePen.

위와 같이 부모의 너비를 벗어나지 않으며 줄바꿈이 됩니다. 대체 왜 줄바꿈이 생기는 걸까요????

 

css의 white-space 속성을 알면 궁금증이 풀리게 됩니다.

mdn으로 가보죠!!

 

white-space 속성의 초기값이 normal 이라고 되어 있습니다. normal의 의미는 무엇일까요?

 

 

위를 통해 normal의 의미는 white-space 를 줄바꿈 시키는 값(value)이라는 것을 유추할 수 있습니다.

 

바로 아래의 white-space: nowrap을 하면 줄바꿈을 하지 않습니다.

 

결론적으로는 white-space의 초기값이 normal이어서 white space가 있을시 줄바꿈이 생기는 것입니다.

 

 

See the Pen Untitled by Taejin Kim (@kimtaejin3) on CodePen.

white-space: nowrap으로 설정하자 white space가 있더라도 줄바꿈이 되지 않는 것을 확인할 수 있습니다.