모바일 버전 편집

워드프레스 사이트는 반응형 디자인을 사용합니다. 편집할 별도의 모바일 버전이 없습니다. 이 가이드에서는 블록 설정과 CSS를 사용하여 모바일 장치에서 콘텐츠가 표시되는 방식을 사용자 정의하는 방법을 알아봅니다.

탐색 블록에는 모바일 메뉴 버튼(“햄버거” 아이콘으로 알려짐)에 대한 설정이 포함됩니다. 모바일에서 메뉴를 사용자 정의하려면 다음 단계를 따르세요.

1. 사이트 알림판에서 디자인 → 편집기로 이동합니다.
2. 탐색 메뉴를 포함하는 템플릿 또는 템플릿 부분을 선택합니다.
3. 목록 보기를 열고 탐색 블록을 선택합니다.
4. 블록 설정 사이드바에서 세팅 아이콘(톱니바퀴 아이콘)을 클릭합니다.

5. 표시 섹션에서 다음 단계를 따르세요.
   • 햄버거 아이콘을 사용하거나 “메뉴” 텍스트를 표시하려면 “아이콘 버튼 표시“를 토글합니다.
   • 아이콘 스타일(두 줄 또는 세 줄)을 선택하고 오버레이 메뉴 설정을 사용하여 햄버거 아이콘이 표시될 때 선택합니다.

사이트 메뉴 스타일 지정에 대해 자세히 알아보세요.

일부 레이아웃 블록을 통해 콘텐츠가 모바일 화면에서 수직으로 쌓이는지 여부를 제어할 수 있습니다. 기본적으로 워드프레스는 작은 화면에 콘텐츠를 나란히 배치해서 계속 읽을 수 있도록 합니다.

세로 배열 동작을 조정하려면 다음 단계를 따르세요.

1. 사이트 알림판에서 디자인 → 편집기로 이동합니다.
2. 조정하려는 블록이 포함된 페이지나 템플릿을 편집합니다.
3. 목록 보기를 열고 블록을 선택합니다.
4. 블록 설정에서 “모바일에서 세로 배열“을 켜거나 끄기로 전환합니다.

“모바일에서 세로 배열” 설정이 있는 블록:

• 열
• 미디어 & 텍스트
• 최신 Instagram 글

모바일 환경에서는 버튼과 메뉴의 모든 콘텐츠가 한 줄에 모두 표시되는 것보다 여러 줄로 나누어 표시될 때 더 쉽게 읽을 수 있습니다. 기본적으로 여러 줄을 줄 바꿈하는 설정은 꺼져 있습니다.

줄 바꿈을 활성화하려면 다음 단계를 따르세요.

1. 사이트 알림판에서 디자인 → 편집기로 이동합니다.
2. 조정하려는 블록이 포함된 페이지나 템플릿을 편집합니다.
3. 목록 보기를 열고 블록을 선택합니다.
4. 블록 설정에서 “여러 줄로 줄 바꿈 허용“을 켜기로 전환합니다.

“여러 줄로 줄 바꿈 허용” 설정이 있는 블록:

• 버튼
• 공유 버튼
• 탐색
• 소셜 아이콘
• 댓글
• 행과 세로 배열

픽셀(px) 크기의 텍스트는 한 가지 크기로 잠금 상태로 유지됩니다. 방문자의 설정과 화면 크기에 따라 em 또는 rem 크기의 텍스트가 조정되므로 다양한 기기에서 사이트에 더 접근하고 더 쉽게 읽을 수 있습니다.

텍스트를 픽셀에서 상대 단위로 변경하려면 다음 단계를 따르세요.

1. 크기를 조정할 텍스트가 있는 블록을 클릭합니다.
2. 블록 설정에서 타이포그래피 섹션을 찾습니다.
3. 글꼴 크기에서 사용자 정의 크기 아이콘(점이 있는 가로줄 2개)을 클릭합니다.
4. px 단위를 클릭하여 em 또는 rem으로 변경합니다.
5. 숫자 값을 입력하고 필요에 따라 조정합니다.

em과 rem 중에서 선택합니다.

• em — 컨테이너를 기준으로 텍스트 크기 조정(캡션, 레이블 또는 특정 블록 내부의 텍스트에 적합)
• rem — 전체 사이트에서 텍스트를 일관되게 유지(본문, 제목, 버튼에 적합)

개별 블록을 조정하는 대신 사이트 전체의 글꼴 크기를 사용자 정의할 수도 있습니다.

가이드의 이 섹션은 워드프레스닷컴 프리미엄, 비즈니스, 상거래요금제를 이용하는 사이트에 적용됩니다. 무료 사이트나 개인 요금제를 사용하는 사이트의 경우 요금제를 업그레이드하여 이 기능에 접근하세요.

CSS 클래스를 사용하여 데스크톱이나 모바일 장치에서 특정 블록을 숨길 수 있습니다. 이를 설정하려면 다음 단계를 따르세요.

1. 숨기려는 블록이 포함된 페이지, 글, 템플릿을 편집합니다.
2. 블록을 클릭하거나 목록 보기에서 선택합니다.
3. 블록 설정에서 고급을 클릭합니다.
4. “추가 CSS 클래스” 상자에서 hide- desktop 또는 hide-mobile을 입력합니다 .

5. 사이트의 사용자 정의 CSS 설정으로 이동합니다.
   • 블록 테마: 디자인 → 편집기 → 스타일 → ⋮ → 추가 CSS
   • 클래식 테마: 디자인 → 사용자 정의 → 추가 CSS
6. 다음 코드를 붙여넣고 저장을 클릭합니다.

/* 모바일에서 요소 숨기기*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* 데스크톱에서 요소 숨기기*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

CSS 코드를 사이트에 한 번 추가합니다. 그런 다음 hide-mobile 또는 hide-desktop 클래스를 모든 블록에 추가할 수 있으며, CSS는 지정된 기기에서 자동으로 숨깁니다.