위 문장을 깔끔하게 줄바꿈하려면 어떻게 하면 좋을까?
여러가지 방법이 있겠지만 대표적으로 많이 사용되는 방법들을 정리해 보았다.
💡 white-space: nowrap 사용
<p>안녕하세요. 또띠입니다. 반응형에서 자연스럽게 단어 단위로 떨어지도록 줄바꿈하는 방법을 알아 보겠습니다. <span style="white-space: nowrap;">자연스럽게 줄바꿈을 하는 방법은 무엇이 있을까요?</span> br 태그말고 유연하고 예쁘게 떨어지는 텍스트 만들고 싶지 않으세요?!</p>첫번째 방법으로는 white-space: nowrap 속성을 이용해서 자연스럽게 줄바꿈이 일어나도록 하는 방법이다.
이 속성은 보통 '자동으로 줄바꿈이 일어나게 하고 싶지 않은 경우' 주로 사용하게 되는데 이 부분을 이용해서 반응형 웹의 특정 문구가 자연스럽게 뭉탱이로 넘어가고 유지할 수 있도록 도와준다.
예를들어, 자연스럽게~ 부분부터 다음줄로 넘기고 싶을 때, 해당 부분에 대해 속성을 적용해 주면 아래와 같이 자연스럽게 줄바꿈이 발생하는 것을 확인 할 수 있다.
저 부분을 감쌌기 때문에 화면을 줄여도 감싼 텍스트는 절때 떨어지지 않는다!
아래는 width가 320px일때 텍스트 모양이다.
💡 padding 사용
<p style="padding-right: 58px;">안녕하세요. 또띠입니다. 반응형에서 자연스럽게 단어 단위로 떨어지도록 줄바꿈하는 방법을 알아 보겠습니다. 자연스럽게 줄바꿈을 하는 방법은 무엇이 있을까요? br 태그말고 유연하고 예쁘게 떨어지는 텍스트 만들고 싶지 않으세요?!</p>두번째 방법으로는 padding 속성을 이용해서 자연스럽게 줄바꿈이 일어나도록 하는 방법이다.
사실 padding은 조절하기 조금 까다롭긴 하지만 그래도 사용하기 좋은 방법이라고 생각된다.
예시로 글의 오른쪽 부분에만 값을 넣어서 전체적으로 줄넘김을 할 수 있도록 만들어 봤다.
💡 word-break: keep-all 사용
<p style="word-break: keep-all;"> 안녕하세요. 또띠입니다. 반응형에서 자연스럽게 단어 단위로 떨어지도록 줄바꿈하는 방법을 알아 보겠습니다. 자연스럽게 줄바꿈을 하는 방법은 무엇이 있을까요? br 태그말고 유연하고 예쁘게 떨어지는 텍스트 만들고 싶지 않으세요?!</p>세번째 방법으로는 word-break: keep-all 속성을 이용해서 자연스럽게 줄바꿈이 일어나도록 하는 방법이다.
가장 편하고 좋은 방법이라고 생각하는데, 이유는 단어 마디로 줄바꿈이 일어나기 때문에 가독성을 더럽히지 않는다.
💡
</br>태그 사용
<p>안녕하세요. 또띠입니다.<br/> 반응형에서 자연스럽게 단어 단위로 떨어지도록 줄바꿈하는 방법을 알아 보겠습니다.<br/> 자연스럽게 줄바꿈을 하는 방법은 무엇이 있을까요?<br/> br 태그말고 유연하고 예쁘게 떨어지는 텍스트 만들고 싶지 않으세요?!</p>마지막은 css없이 html 태그로만 강제 줄바꿈을 할 수 있는 <br> 태그이다.
가장 좋은점은 css 없이 가능하다는 점이라고 생각한다.
줄바꿈은 사실 여러가지 방법이 있고 이게 정답이야!는 없다.
상황에 따라서 주어진 디자인에 맞춰서 적절한 방법을 사용해서 줄바꿈할 수 있도록 많이 연습해보고 짬을 만들어내는게 답이다. 🫡
