html의 br 태그는 텍스트 안에 줄바꿈을 생성합니다.
그런데 PC 화면에서는 줄바꿈이 필요했지만, 작은 화면에서 줄바꿈을 하면 스크롤이 길어지는 문제로 해당 기능을 없애고 싶은 경우가 있을 수 있습니다.
예를 들어, PC 화면인 경우에는 아래와 같이 br 요소가 포함된 텍스트를 그대로 배치하지만
태블릿 화면인 경우, br 요소가 줄바꿈 기능을 하지 않게 만들고 싶은 상황입니다.
이때 제가 잊고 있던 기본적인 내용만을 활용하여 이를 해결할 수 있습니다.
<br> 태그에도 class를 적용할 수 있습니다.
너무 당연한 이야기지만 이상하게 br 태그에는 적용할 생각을 하지 못했습니다.
간단한 방법으로 br 태그의 display 속성을 none으로 설정하면 br 태그는 줄바꿈을 하지 않습니다.
하지만 더 나아가 줄바꿈 기능을 하지 않았으면 하는 일부 br 태그에게 class="onlyPC"와 같은 클래스를 부여하고,
해당 클래스 안에 display:none을 지정하면 특정 br 태그만 줄바꿈을 수행하지 않도록 만들 수 있습니다.
<h1 class="title">
일상의 모든 물건을 <br class="onlyPC" />거래해 보세요
</h1>
-------------------------------------------------
/* PC가 아닌 화면에서는 줄바꿈이 일어나지 않게 함 */
@media (max-width: 1199px) {
br.onlyPC {
display: none;
}
}따라서 br 태그가 아닌 다른 태그에도 아래와 같은 클래스를 부여하는 방식을 사용하면
<태그명 class="onlyPC"></태그명>
여러 개의 같은 태그 중에서 일부 태그만 그룹화하여 컨트롤 할 수 있게 됩니다.
해당 블로그를 참고하여 작성하였습니다.
읽어주셔서 감사합니다:)
