토스 웹 페이지 메인 부분의 글자 부분을 개발하면서
줄 바꿈을 어떻게 처리할지 고민했다.
내가 알고 있는 줄바꿈은 br을 사용해서 줄바꿈을 하는 것인데
코드 사이에 br을 사용하니 뭔가 마음에 들지 않고 불편하다.
css가 아닌 html 코드를 이용해서 글자의 줄바꿈을 하려니 퍼즐 하나만 따로 노는 느낌이 들어 다른 방법으로 고민해봤다.
처음에는 css에 글자를 포함하고 있는 box의 width 값을 줄여서 줄바꿈을 시도했다.
이렇게 하니 줄바꿈은 되는데 원하는 곳에서 줄바꿈을 할 수가 없었다.
당연하게도 위에 문단은 짧게, 하단은 긴 형태의 문장은 이 방법으로 어려웠다.
그래서 찾아본 결과,
word-break 와 white-space
라는 기능이 있었다.
word-break는 말 그대로 단어를 쪼갠다는 것이다.
width 값을 사용해 줄바꿈을 할 때는 단어나 띄어쓰기 하지 않은 문장도 단어로 인식해 줄바꿈 시 함께 내려가는데,
word-break를 사용하면 이어진 단어들도 해당하는 width의 값에 도달하면 잘려서 줄바꿈이 된다.
이 방법도 좋은 방법이였지만 내가 구현하고 싶은 것을 할 수 없기에 넘어간다.
다음은 white-space이다.
white-space에는 다양한 속성이 있는데 그 중에서도 내가 활용할 수 있는 속성은 pre라는 속성이다. pre는 html에서 엔터를 활용해 줄바꿈한 것을 인식해서 줄바꿈 처리를 해주는 것이다. 물론 그 외의 것들은 width 값을 넘어가도 줄바꿈 처리가 되지 않는다.
하지만 pre로 설정했을 때, html의 코드가 아래와 같다면
<div class="section_1_word">
<h1>금융의 모든 것
토스에서 쉽고 간편하게</h1>
</div>'금융의 모든 것'-> 엔터 -> tab -> '토스에서 쉽고 간편하게'
로 인식하여 아래처럼 구현된다.
그래서 white-space의 다른 속성 중 pre-line이 있는데 이 속성을 사용하면
일련의 공백이 축소되며, 줄 바꿈 문자, br, 및 필요에 따라 줄 상자를 채우는 데 줄이 끊어집니다.
따라서 위의 '금융의 모든 것'-> 엔터 -> tab -> '토스에서 쉽고 간편하게' 에서
tab -> '토스에서 쉽고 간편하게' 가 줄 상자의 앞부분 공백을 두고 작성되기에 이 공백을 채우기 위하여 tab 부분이 축소된다.
구현된 결과는 아래와 같다.
이 방법을 활용하면 html 에도 쓸데없는 태그가 들어가지 않고 css만을 활용해 줄바꿈 처리를 할 수 있어 만족했다.
더불어 css를 열심히 공부했다 생각했지만, 하면할수록 끊임없이 새로운 무엇인가 나오는 것 같다. 다외우려고 하기보단 필요한 것을 바로 검색하고 적용할 수 있는 능력을 길러야겠다는 생각이 든다.
