버전 7.0 커버 페이지가 모바일에서 어떻게 보이는지 미리 보세요.

모든 기기에서 커버 페이지가 잘 보이도록 하기 위해 반응형 디자인은 콘텐츠를 자동으로 하나의 열로 쌓아 올립니다. 즉, 모바일에서는 커버 페이지가 자연스럽게 컴퓨터에서 보이는 것과 약간 다르게 보입니다. 커버 페이지의 정확한 모바일 외관은 레이아웃과 콘텐츠에 따라 달라질 수 있지만, 몇 가지 일반적인 규칙은 다음과 같습니다.

버전 7.1에서는 커버 페이지가 제공되지 않습니다. 비슷한 디자인을 만들려면 특정 페이지에서 머리말과 바닥글을 숨길 수 있습니다.

기기 화면 보기로 미리 보기

기기 화면 보기를 사용하여 모바일 기기, 태블릿 또는 컴퓨터에서 커버 페이지가 어떻게 보이는지 미리 보세요. 또한 자신의 기기에서 사이트를 방문해 보는 것도 권장합니다. 모바일 기기에서 사이트를 방문하려면 모바일 브라우저의 탐색 표시줄에 페이지 URL을 입력하세요. 사이트에는 모바일 기기를 위한 별도의 주소가 없습니다.

Mobile background images

커버 페이지에 배경 이미지를 사용하는 경우, 유연하게 자를 수 있도록 텍스트나 테두리가 없는 이미지를 사용할 것을 권장합니다. 이에 대한 추가 도움이 필요한 경우 배경 이미지 모범 사례를 검토하세요. 

Text on mobile

커버 페이지의 본문 텍스트 글꼴 크기가 매우 큰 경우 모바일 기기에서 긴 단어나 문구가 잘릴 수 있습니다. 최상의 결과를 위해 본문 텍스트를 짧게 유지하고, 본문 텍스트에 작은 글꼴 크기를 사용하고, 단어 사이에 공백을 추가할 것을 권장합니다.

Overall layout changes on mobile

모바일 기기에서 커버 페이지를 볼 때 확인할 수 있는 몇 가지 조정 사항은 다음과 같습니다.

• Split layouts (like Flash and Spotlight) stack vertically with the image stacked above the text.

• Layouts with split text (like Debut and Projector) stack the left-side text above the right-side.

• Harbor 레이아웃에서는 지도가 텍스트 위에 쌓여 가로로 분할됩니다.