워드프레스 반응형 스타일 : 기기별 글자 크기와 여백 따로 지정(WP 7.1 ver.)

워드프레스 반응형 스타일은 7.1부터 들어온 기능입니다. 예전에는 편집기의 데스크톱·태블릿·모바일 버튼이 화면 폭만 바꿨지만, 이제는 그 상태에서 만진 글자 크기와 여백이 해당 기기에서만 적용됩니다.

1️⃣ 워드프레스 반응형 스타일: 이해 및 변경점

워드프레스 편집기 위쪽에는 모니터 모양 아이콘이 있고, 누르면 데스크톱·태블릿·모바일이 나옵니다. 지금까지 이 버튼은 편집 화면의 폭만 좁혔다 넓혔다 하는 역할이었습니다. 모바일로 바꿔 봐야 “아, 좁은 화면에서는 이렇게 보이는구나” 하고 눈으로 확인하는 용도였고, 그 상태에서 글자 크기를 20px로 바꾸면 데스크톱에서도 똑같이 20px이 됐습니다. 값은 하나뿐 이었습니다.

7.1부터 그 목록 아래에 Responsive styles라는 항목이 하나 더 생겼습니다. 이걸 켜면 성격이 바뀝니다. 모바일 뷰로 전환한 상태에서 글자 크기를 16px로 줄이면, 그 16px은 모바일에서만 적용됩니다. 데스크톱은 원래 값 그대로 남습니다. 태블릿도 마찬가지로 따로 지정할 수 있습니다. 한 블록이 기기마다 다른 값을 가질 수 있게 된 것입니다.

내부적으로는 워드프레스가 미디어 쿼리 CSS를 자동으로 만들어 붙입니다. 예전 같으면 자식 테마나 추가 CSS 칸에

@media (max-width: 781px) {
  .my-block { font-size: 16px; }
}

위와 같이 직접 써 넣어야 했던 것을, 이제 편집기에서 버튼 몇 번으로 처리하게 변경되었습니다.

적용 방향은 데스크톱이 기준입니다. 데스크톱에 넣은 값이 태블릿·모바일로 그대로 흘러 내려가다가, 해당 기기에서 따로 지정한 값이 있으면 그것으로 덮어씁니다. 그래서 모바일만 손보고 싶으면 모바일 값만 건드리면 되고, 나머지는 신경 쓸 필요가 없습니다.

한 가지 구분해 둘 것이 있습니다. 같은 메뉴 맨 아래의 새 탭에서 미리보기는 이 기능과 별개입니다. 그건 저장된 글을 실제 사이트 화면으로 띄워 보는 것뿐입니다. 다만 위에서 지정한 모바일 전용 값은 이미 CSS로 저장돼 있으니, 새 탭에서 열어 봐도 방문자가 보는 화면에도 똑같이 반영됩니다.

2️⃣ 워드프레스 반응형 스타일 사용법

워드프레스 반응형 스타일의 토글을 켜는 경로입니다. 편집기 우측 상단 모니터 아이콘 → 목록 맨 아래 Responsive styles 클릭. 켜면 위쪽 세 항목의 설명 문구가 Preview에서 Style로 바뀝니다. 이 한 줄이 블록을 보는 기준이 됩니다.

🖥️ 뷰포트별 편집 화면 Responsive styles 켠 상태

데스크톱 태블릿 모바일

Style all viewports. 여기서 바꾼 값은 모든 화면 크기의 기준이 됩니다.

Style tablet only. 태블릿 폭에서만 적용됩니다. 데스크톱 값은 그대로 남습니다.

Style mobile only. 모바일 폭에서만 적용됩니다. 편집 캔버스도 함께 좁아집니다.

위 탭을 눌러 세 화면을 비교해 보세요. 이미지를 누르면 크게 볼 수 있습니다.

닫기 ✕

기기를 고른 뒤 블록을 선택하고 우측 사이드바에서 값을 바꾸는 부분입니다. 지금 어느 뷰포트를 편집 중인지 알려주는 배지가 사이드바에 뜬다는 점, 데스크톱으로 되돌려 원래 값이 그대로인지 확인하는 절차, 토글을 끄면 다시 공통 편집으로 돌아온다는 점까지가 여기 들어갑니다.

오른쪽 사이드바를 보면 블록 이름(단락) 아래에 ⓘ 모바일이라는 작은 배지가 떠 있습니다. 지금 모바일 뷰포트를 편집 중이라는 표시입니다. 이 배지가 붙어 있는 동안 아래 항목에서 만진 값은 전부 모바일 전용으로 저장됩니다.

바꿀 수 있는 항목은 서체, 배경, 치수, 테두리, 요소입니다. 글꼴 크기의 S · M · L · XL · XXL 중 하나를 고르면 모바일에서만 그 크기가 됩니다. 여백을 좁히고 싶으면 치수를 펼쳐 패딩이나 마진 값을 조절하면 됩니다.

값을 넣었으면 다시 상단 메뉴에서 데스크톱을 눌러 봅니다. 원래 크기 그대로 남아 있으면 제대로 들어간 것입니다. 여기서 값이 같이 바뀌었다면 Responsive styles 토글이 꺼진 상태로 작업한 것이니, 토글을 확인하고 다시 하시면 됩니다.

작업이 끝나면 Responsive styles를 꺼 둡니다. 끄면 어느 기기 뷰에 있든 예전처럼 전 기기 공통 값을 편집하게 됩니다. 이미 저장해 둔 모바일·태블릿 전용 값은 지워지지 않고 그대로 작동합니다. 켜 둔 걸 잊고 편집하면 데스크톱 값을 고쳤다고 생각했는데 모바일만 바뀌어 있는 상황이 생기니, 쓰고 나면 끄는 편이 안전합니다.

ℹ️ 제휴 안내
본 사이트의 콘텐츠에는 제휴 링크가 포함되어 있습니다. 방문자가 이 링크를 통해 상품 또는 서비스를 구매하면 본 사이트는 판매처로부터 수수료를 지급받습니다. 이 과정에서 구매자가 지불하는 금액^{(이벤트 할인 시 금액이 내려갑니다↓)}은 오르지 않습니다. 게시된 가격·할인·재고 정보는 작성 시점 기준이며 실제와 다를 수 있으므로, 구매 전 판매처에서 최종 확인하시기 바랍니다. 상품 선정과 평가는 자체 기준에 따라 작성되며, 수수료 지급 여부가 소개 순서나 평가 내용에 영향을 주지 않습니다.