반응형 홈페이지 줄바꿈(br태그) 대응하기 css

반응형 홈페이지를 만들다 보면 PC, 태블릿, 모바일 화면에 따라 br 태그에 의한 줄 바꿈이 다르게 보이는 경우가 있습니다.

가나다라 마바사
아자차카 타파하

예를 들면 PC는 이렇게 나오는데

모바일에선 아래처럼 나오는 경우입니다.

가나다라 마
마사
아자차카 타
파하

 

이럴 경우 br 태그에 css 스타일에 class 부여해서 조정가능합니다.

.pc_br {display:block}
.t900_br{display:none}
.mobile_br{display:none}

@media all and (max-width:899px){
  .pc_br{display:none !important}
  .t900_br {display:block !important}
}
@media screen and (max-width: 480px) {
  .t900_br {display:none !important}
  .mobile_br{display:block !important}
}

/*
가나다라마바사 아자차카타파하<br class="mobile_br">가나다라 마바사 아자차카 타파하<br class="pc_br">
가나다라 마바사 아자차카 타파하 <br class="mobile_br">가나다라마바사 아자차카타파하<br><br>
*/

 

각 기기별 사이즈에 따라 클래스 추가해 주면 됩니다.

대부분은 3가지 클래스로 대응 가능하지만 페이지에 글 내용이 많을 경우 추가해야 될 경우가 생길 수 있습니다.

코드 참고해서 적당히 활용하시기 바랍니다.

 

오늘도 방문해 주셔서 감사드립니다.