모바일에서 텍스트 줄바꿈 구현 방법 1가지 - 초간단 버전?

반응형 사이트를 만들다 보면 특히, 풋터 카피라이트를 작성시 모바일에서 자동으로 줄바꿈을 하고 싶을 때가 있습니다. 이때 아주 간단하게 사용가능한 코드를 소개 합니다. 먼저 완성된 코드를 살펴 보고 어떻게 구현 했는지 알아보겠습니다.

<!-- Footer -->
<footer class="bg-dark text-white py-4">
   <div class="container">
       <div class="text-center">
           <p class="mb-0">
               © 2025 펜션 웹사이트 제작 서비스 by 
               <a href="https://webworks.co.kr" 
                  class="text-info text-decoration-none" 
                  target="_blank" 
                  rel="noopener noreferrer">웹웍스</a>.<br class="d-sm-none">
               <span class="d-none d-sm-inline"> </span>All rights reserved.
           </p>
       </div>
   </div>
</footer>

핵심 구현 요소

줄바꿈 제어

• <br class="d-sm-none">: 모바일에서만 줄바꿈을 실행하는 핵심 요소입니다
• d-sm-none 클래스로 576px 이상의 화면에서는 이 줄바꿈이 숨겨집니다

공백 처리

• <span class="d-none d-sm-inline"> </span>: 데스크톱에서 텍스트 사이의 적절한 공백을 제공합니다
• 모바일에서는 숨겨지고(d-none), 소형 화면 이상에서만 표시됩니다(d-sm-inline)

작동 원리

모바일 화면 (575px 이하)

• <br class="d-sm-none">이 표시되어 줄바꿈이 발생합니다
• <span class="d-none d-sm-inline"> </span>은 숨겨집니다
• 결과: 두 줄로 표시됩니다

데스크톱 화면 (576px 이상)

• <br class="d-sm-none">이 숨겨집니다
• <span class="d-none d-sm-inline"> </span>이 표시되어 공백을 제공합니다
• 결과: 한 줄로 표시됩니다

마무리

이 방법은 반응형 웹 디자인에서 텍스트 줄바꿈을 제어하는 가장 효율적이고 실용적인 접근법 중 하나입니다.