【HTML&CSS】응답으로 개행의 위치를 바꾸는 방법

프로그래밍 공부 일기

2020년 10월 17일
반응형으로 사이트를 만들 때 PC에서 볼 때와 스마트 폰으로 볼 때 개행 위치를 바꾸고 싶을 때 미디어 쿼리를 사용하여 해결하는 방법을 알았으므로 정리한다.

PC만・스마트폰만으로 개행시키는 방법

우선, 브레이크 포인트를 680px로 했을 때, 680px 이하일 때는 .pc는 숨기고, .sp는 표시한다. 반대로 680px 이상일 때는 .pc 는 표시로, .sp 는 숨긴다.

css

@media screen and (min-width: 680px) {
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width:680px) {
  .pc{ display:none; }
  .sp{ display:block; }
}

　 이것을 개업한다 br 의 class로서 추가한다.

html

<p>パソコンのみで改行したい場合<br class="pc">このようになる。</p>
<p>スマホのみで改行したい場合<br class="sp">このようになる。</p>

PC에서 본 경우

스마트폰에서 보면

참고문헌

PC만 개행·SP만 개행을 CSS로 실장하는 방법【응답 디자인】

Reference

이 문제에 관하여(【HTML&CSS】응답으로 개행의 위치를 바꾸는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mzmz__02/items/f5c6de00858294de041b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집