워드프레스 GeneratePress 테마 CSS 미디어 쿼리 반응형 분기점 - 워드프레스 정보꾸러미
베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

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

Last Updated: 2021년 11월 26일 | 댓글 남기기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

디바이스 해상도에 따라 다른 스타일을 적용하고 싶은 경우 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>

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

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

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

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

참고



댓글 남기기

Leave a Comment