GeneratePress는 기능이 슬림하면서 속도가 빠른 인기 워드프레스 테마 중 하나입니다. 빠른 속도와 깔끔한 레이아웃 덕분에 수익형 블로그에서 많이 사용되고 있습니다. 아바다(Avada) 등과 같은 인기 다목적 테마를 사용하면 코딩 지식이 없어도 쉽게 사이트를 만들 수 있지만 사이트가 무겁다는 단점이 있습니다.
제너레이트프레스 테마도 다목적 테마 중 하나이기 때문에 잘 활용하면 거의 모든 사이트 구축에 사용할 수 있습니다. 코딩 지식이 부족할 경우 유료 버전을 사용하여 다양한 사이트를 만들 수 있습니다.
워드프레스 GeneratePress 테마: hide-on-* 클래스 (반응형 디스플레이)
GeneratePress 테마 개발자가 밝힌 이 테마의 반응형 분기점은 다음과 같습니다.
@media (max-width: 768px) {
/* 모바일 전용 CSS를 여기에 입력 */
}
@media (min-width: 769px) and (max-width: 1024px) {
/* 태블릿 전용 CSS를 여기에 입력 */
}
@media (min-width: 1025px) {
/* 데스크톱 전용 CSS를 여기에 입력 */
}또한, GeneratePress 테마에는 hide-on-* 클래스가 내장되어 있습니다. 각 기기 해상도에 따라 쉽게 숨길 수 있습니다.
- hide-on-mobile: 모바일 기기에서 숨김
- hide-on-tablet: 태블릿 기기에서 숨김
- hide-on-desktop: 데스크탑(PC) 기기에서 숨김
특정 요소를 모바일 기기나 태블릿, 또는 데스크탑에서 숨기고 싶은 경우 자체적으로 내장된 hide-on-* 클래스를 사용하여 쉽게 숨길 수 있습니다.
예시: 데스크톱에서만 표시되도록 하기 (모바일과 태블릿에서 숨김)
<div class="hide-on-mobile hide-on-tablet">
이 부분의 콘텐츠는 PC에서만 표시됩니다.
</div>CSS를 통해 숨기더라도 실제로 제거되는 것은 아니고, 브라우저에서 로드는 되지만, 브라우저에서만 해당 해상도에서 표시되지 않을 뿐입니다.
엘리멘터(Elementor) 등 페이지 빌더를 사용하는 경우 페이지 빌더에서 특정 기기에 대하여 해당 요소를 숨길 지 여부를 지정할 수 있는 옵션을 제공합니다.
페이지 빌더를 사용하면 CSS를 모르더라도 페이지 빌더 세팅으로 웬만한 디자인을 구현할 수 있지만, CSS를 조금 알면 보다 정교하게 스타일을 지정할 수 있습니다. CSS는 배우는데 그리 시간이 많이 들지 않으므로 홈페이지 만드는 업무를 하거나 홈페이지 관리를 하는 경우 CSS를 배우면 도움이 될 것입니다.
마치며
이상으로 블로그 사이트에 많이 사용되는 워드프레스 GeneratePress 테마에서 자체적으로 제공하는 hide-on-* 클래스를 활용하는 방법에 대해 살펴보았습니다.
