FANDOM


일부 복잡한 위키 문법들은 데스크톱 사용자에게는 잘 보이지만, 모바일 플랫폼 사용자에겐 비정상적으로 보이는 경우가 많습니다. 표 안의 표가 이의 가장 흔한 예입니다.

알아둘 점: 위키 URL 제일 끝에 ?useskin=wikiamobile 코드를 추가하거나, 클래식 편집기의 미리 보기 창에 들어가서 드롭다운 메뉴의 '모바일' 항목을 선택하면 해당 페이지의 모바일 화면을 미리 확인할 수 있습니다.

표 안의 표란 무엇인가요?

표 안의 표는 말 그대로 표 안에 또 다른 표를 넣은 것을 뜻합니다. (표 인셉션이라고 할 수도 있죠!)

다음은 브레이브 프론티어 위키의 표 안의 표 예제입니다. 데스크톱 화면과 달리 모바일 화면은 비정상적으로 표시되는 것을 알 수 있습니다.
Desk Mob

왜 표 안의 표는 안 좋은가요?

표 안에 표를 넣는 행위는 최대한 피하는 게 좋습니다. 표는 기본적으로 최소한의 공간만 차지하려고 하며 공간이 부족할 때는 수직으로 공간을 늘리기도 합니다. 표 안에 또 다른 표를 넣으면 이 표들을 각자 자신이 들어갈 수 있는 공간을 요구하게 되고, 그러면 최종적으로 가장 밖의 표는 더 넓은 가로 길이를 가지게 됩니다. 이렇게 표의 가로 길이가 늘어나 버리면 가로 길이가 상대적으로 짧은 모바일 화면에서는 표가 비정상적으로 표시될 가능성이 높아집니다. 결과적으로 모바일 화면에서 표 안의 표를 보려고 하면 긴 가로 길이 때문에 가로로 스크롤을 해야 하는 불편함이 생깁니다.

만약 이런 상황에서 표를 따로 분리시킨다면 표는 세로로 정리되고, 더 이상 가로로 스크롤을 해야 할 필요도 없어집니다. 또 표가 분리됨으로써 페이지 서식이 더 동적으로 표시될 수도 있습니다. 표는 모바일 화면 크기에 따라 적절한 위치에 표시되는데, 각 표가 분리되어 있다면 콘텐츠 이동의 흐름이 더 자연스러워질 것입니다.

문제 해결하기

표 안에 또 다른 표를 넣지 말고 각 표로 분리하려고 시도해 보세요. 데스크톱에서의 디자인을 해치지 않으면서 표를 분리하는 법은 아래 항목을 참고하세요.

추천하는 관행

표 안의 표 찾아보기

소스 코드에서 표는 항상 {| 코드나 <table> 코드로 시작합니다. 그리고 다시 |} 코드나 </table> 코드로 닫힙니다. 만약 표가 시작되고 다시 끝나기 전에 또 다른 표가 시작되는 게 보인다면 표 안에 표를 넣은 상황일 가능성이 높습니다.

표 안의 표 예제:
Example code 1024

표 안의 표 나누기

가장 먼저 표 안에 얼마나 많은 표가 있는지 확인합니다. 그다음에는 가장 마지막에 위치한 표를 안에서 빼냅니다. 그리고 미리 보기를 눌러 따로 빼낸 표가 어떻게 보이는지 확인합니다. 만약 표를 빼냈는데 예상치 못한 방식으로 작동된다면 그 문제를 수정합니다. 이런 식으로 모든 표를 빼내는 데 성공하면 가장 처음에 있던 (모든 표들을 묶어 두던) 표를 삭제합니다. 그럼 이제 표가 모바일에서도 정상적으로 표시될 것입니다.

데스크톱에서 디자인 유지하기

표를 연결할 때는 반드시 위-아래나 옆-옆으로만 연결되어야 합니다. 이렇게 표를 연결하면 모바일 브라우저가 표를 화면에 맞게 적당히 옮길 것입니다. 예를 들어, 옆-옆으로 연결된 표는 모바일 화면에서 가로 공간이 부족하면 뒤에 위치한 표가 아래로 내려가 공간을 확보할 것입니다.

표를 분리할 때는 데스크톱에서 표시될 표의 모습과 모바일에서 표시될 표의 모습 사이에 적당한 타협을 둬야 합니다. CSS 스타일은 데스크톱에만 적용되고, 모바일에는 적용되지 않으니 CSS를 이용해 데스크톱 전용 스타일을 설정하는 것도 좋습니다. 표에 대한 더 자세한 정보는 아래의 더 많은 정보 항목을 참고하세요.

유용한 정보

  • 그림 또한 위에서 설명한 대로 공간을 필요로 하므로 표 안에 속한 그림은 적절히 크기를 줄이거나 아예 표 밖으로 빼내 주세요. 그림이 너무 클 경우 모바일 브라우저에서 자동으로 그림 크기를 줄여 화면 크기에 맞춥니다.
  • 틀 같이 여러 문서에 영향을 끼치는 곳에서 표를 분리할 때는 신중하게 진행해 주세요.

브레이브 프론티어 위키 사례에서

표 안의 표를 해결하는 데 브레이브 프론티어 위키가 큰 도움을 주었습니다. 저희는 많은 문서에 영향을 끼치는 틀(캐릭터 정보)의 데스크톱 디자인을 망치지 않으면서 모든 표를 분리해냈습니다. 그리고 무엇보다도 이제 이 커뮤니티는 모바일 화면에서 더 나은 레이아웃을 사용할 수 있게 되었습니다:


정확히 코드가 어떻게 변했는지에 대해서는 아래를 참고하세요. 개선 전과 개선 후의 코드를 볼 수 있습니다.

알림: 현재 이 코드는 훼손을 방지하기 위해 보호되었습니다. 코드를 수정하고 싶으시다면 먼저 이 코드를 다른 커뮤니티나 귀하의 개인 문서로 복사/붙여넣기 해주세요.

더 많은 정보

스태프에게 연락하기

표 안의 표를 해결하는 데 문제가 생기셨나요? 특수기능:문의에서 저희에게 연락해 주세요. (표 안의 표에 대해 문의할 때는 제목에 Mobile: Nested tables을 추가해 주세요)

도움말 더 보기...


그 외 지원 서비스...

Community content is available under CC-BY-SA unless otherwise noted.