워드프레스 GeneratePress 테마 CSS 미디어 쿼리 반응형 분기점

디바이스 해상도에 따라 다른 스타일을 적용하고 싶은 경우 CSS 미디어 쿼리를 사용하여 기기 해상도에 따라 다른 CSS 스타일을 지정할 수 있습니다. GeneratePress 테마의 기본 반응형 분기점은 모바일의 경우 768px, 데스크톱에 경우 1024px이며 태블릿은 768px와 1024px 사이입니다.

워드프레스 GeneratePress 테마 CSS 미디어 쿼리 반응형 분기점

워드프레스 GeneratePress 테마 CSS 미디어 쿼리 반응형 분기점

기본 반응형 분기점

GeneratePress 테마에서는 다음과 같은 @media를 사용하여 특정 기기 해상도에 대한 CSS를 지정할 수 있습니다.

@media (max-width: 768px) {
    /* CSS in here for mobile only - 모바일 전용 CSS 코드 */
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only - 태블릿 전용 CSS 코드 */
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only - 데스크톱 전용 CSS 코드 */
}

IE10+ 특정 스타일

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /* IE10+ specific styles go here - IE10 이상 브라우저 특정 스타일 */
}

hide-on-* 클래스를 사용하여 특정 디바이스에서 숨김

장치 해상도에 따라 특정 콘텐츠를 표시/숨기고 싶은 경우 GeneratePress 테마에 내장된 클래스를 사용하면 편리합니다.

  • hide-on-mobile - 모바일에서 숨김/표시하지 않음
  • hide-on-tablet - 태블릿에서 숨김
  • hide-on-desktop - 데스크탑에서 숨김

예시:

모바일 기기에서 특정 메뉴 항목을 숨기고 싶은 경우 CSS 클래스 필드에 hide-on-mobile를 추가할 수 있습니다. 메뉴 항목에 CSS 클래스를 지정하는 방법은 "워드프레스의 특정 메뉴 항목에 다른 CSS 스타일 적용하기"를 참고해보세요.

PC에서만 특정 콘텐츠를 표시하고 싶은 경우 다음 코드와 같이 hide-on-mobilehide-on-tablet 클래스를 동시에 추가하면 모바일과 태블릿에서 표시되지 않고 데스크탑에서만 표시됩니다.

<div class="hide-on-mobile hide-on-tablet">
    Content here will only display in Desktop - PC에서만 표시될 콘텐츠
</div>

hide-on-* 클래스는 GeneratePress 문서에 제시되어 있지만, 실제 작동하는지 체크하시기 바랍니다. 저는 테스트해보니 잘 작동하지 않았습니다.

사용자 정의 CSS 코드 추가하기

사용자 정의 CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS에 추가하거나 차일드 테마 폴더 내의 스타일시트 파일(style.css)에 추가 하면 됩니다.

아바다 등 일부 테마에서는 자체 테마 옵션 내에서 사용자 정의 CSS 코드를 넣을 수 있는 섹션을 제공하기도 합니다. GeneratePress 테마는 별도의 옵션을 제공하지 않으므로 기본적인 워드프레스 방식에 따라 맞춤형 CSS 코드를 넣으시면 됩니다.

CSS에 대한 기본적인 사항은 "생활 코딩"과 같은 무료 인터넷 강의를 통해 익히거나 시중에서 CSS 관련 책을 하나 구입하여 보시면 도움이 될 것입니다.

부록: PC에서 모바일 메뉴(햄거버 메뉴) 표시 방법

PC에서도 모바일 메뉴를 표시하고 싶은 경우 이 글의 "PC에서 모바일 버전처럼 보이도록 설정하기" 섹션을 참고해 보세요.

참고


10개 댓글

  1. 그냥 GeneratePress 차일드 테마를 하나 만들어서 Any Mobile Theme Switcher 플러그인 설정을 데스크탑과 태블릿에는 GeneratePress 테마를 모바일에는 GeneratePress 차일드 테마를 적용 했습니다..ㅋㅋ

    1. 요즘은 대부분의 워드프레스 테마가 반응형이기 때문에 굳이 모바일 테마를 사용할 필요는 없는 것 같습니다. 아스트라 테마의 경우 유료 버전을 이용하면 수월하게 모바일 레이아웃을 만들 수 있을 것입니다.

  2. 아래 CSS 코드를 사용하여 GeneratePress 테마 무료 버전 레이아웃을 리스트 형태로 만들었는데요. 문제는 모바일에서 세로 모드일 경우 화면이 이상하게 보이는데 @media 코드를 어떻게 적용하면 될까요?

    https://issue-note.com/

    /* 메인페이지 레이아웃 변경 */
    .wp-post-image {
    display: inline-block;
    width: 250px; /* 이미지 너비 */
    height: 150px; /* 이미지 높이 */
    object-fit: cover;
    margin-right: 15px; /* 이미지와 요약문 사이 간격 */
    float: left;
    }.entry-summary {
    overflow: hidden;
    width: calc(100% - 265px); /* 남은 너비 계산 */
    }.post-image:empty {
    display: none;
    }.entry-summary {
    margin-left: 150px;
    }

    1. 위의 코드를 데스크탑(PC)에서만 표시하도록 미디어쿼리를 추가해보시기 바랍니다.

      @media (min-width: 1025px) {
      /* 상기 CSS 코드 */
      }

      1. 수치를 720px로 조정하니까 데스크탑과 태블릿에서만 표시가 되고 모바일에서는 가로모드일 경우만 표시가 돼서 딱 제가 원하는 대로 되긴 됐는데 다른 기기에서는 어떻게 보일지 모르겠지만 제가 한 방법이 맞는 건가요?ㅋ

댓글 남기기

* 이메일 주소는 공개되지 않습니다.