로그인 회원가입

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기

표에서 모바일 반응성을 확보하는 방법

Profile
모니터링

제이위키와 저스트보드 모두 모바일 반응형 레이아웃을 사용하고 있습니다. 하지만 내용물은 그렇지 않죠.

 

pc에서 예쁘게 보이던 표도 모바일에서 볼 때는 좌우가 짤려있거나, 표간격이 너무 좁아 글자가 세로로 나열되는 문제가 있습니다.

 

열은 4~5개를 넘어가지 않는게 보기 좋습니다.

 

PC에서 볼 때는 4~5개로 하고 밑으로 내릴 경우 상하로 너무 길어진다는 단점이 있습니다. 이것은 에른스트의 아무튼 공방에서 개발한 펼치기/접기 기술을 통해 접어두는 것으로 해결할 수 있습니다.

 

이 펼치기/접기에 관한 자세한 내용은 공방의 문서를 천천히 읽어보거나, 코드를 직접 뜯어보시면서 익힐 수도 있습니다. 나중에 이와 관련한 포스팅을 하겠습니다.

 

모바일 반응성을 올려주는 태그

 

{| class="wikitable" style="~" .... 으로 시작하는 우리의 표 앞에 다음과 같은 내용을 넣어주세요.

 

<table class="wikitable"><td style="padding:0 0 0 0px;" width="원하는 넓이"> 이 코드를 앞에 삽입한 이후에는 원래 있었던 {| class="wikitable" 부분을 삭제해 주면 됩니다. 즉 <table class="wikitable"><td style="padding:0 0 0 0px;" width="원하는 넓이"> {| style="~"....이 되는 거죠.

 

그리고 맨 표 마지막 |} 뒤에 </td></table>을 입력하여 태그를 종료합니다. 

 

<td> 안에서 많은 속성을 정의할 수 있습니다. 다른 용도로도 얼마든지 사용 가능합니다. 

댓글
1
  • 이라이라
    2021.01.22
    좋은 글 정말 감사합니다. 에 대해 더 공부해 봐야 겠네요~ 사실 표도 그렇지만 이미지도 고민이 많았는데 적용이 가능할지 봐야겠습니다. (PC에서는 적당한 크기의 이미지가 모바일에서는 너무 작다는 문제가 발생하기도 하더라구요.)
Profile

대체역사, 설정, 창작, 위키이용시 궁금한 점이나 팁 등 제이위키에 대한 광범위한 내용을 다룹니다.

번호 제목 글쓴이 날짜 조회 수
공지 🔨설정 이곳은 대체역사/설정/창작/위키 게시판입니다. (2) 21.09.20 2883
일반 표에서 모바일 반응성을 확보하는 방법 (1) 21.01.21 91
41 일반 월본국에서 왔습니다. (3) 21.01.20 143
40 일반 가상 인물 문서 만들때마다 나타나는 공통점 (1) 21.01.19 90
39 🔨설정 제20대 대선 포스터 만들어봄 2 (3) 21.01.19 170
38 🔨설정 제20대 대선 포스터 만들어봄 21.01.19 343
37 🔨설정 제27회 대백제국 총선거 결과 (1) 21.01.19 88
36 일반 접이식 목록이 오류났습니다. (4) 21.01.17 77
35 일반 밸런스게임 만들었다 21.01.16 61
34 일반 네임택 svg파일 의뢰 받습니다. (1) 21.01.16 63
33 🔨설정 2022 대선 (3) 21.01.16 135
32 일반 만들고 싶은 틀 21.01.15 58
31 🔨설정 라레스 후속작 설정 최종본 (2) 21.01.10 82
30 🔨설정 독일 연방 (1815) 가입국 21.01.10 82
29 📢알림 <제기협> 제기협 설립 (1) 21.01.09 84
28 일반 아울라이트님 세계관 응원 부탁드립니다! (6) 21.01.09 97
27 일반 신기하네 (1) 21.01.08 79
26 🔨설정 라레스를 독일에 비유해보자 (2) 21.01.08 104
25 🔨설정 청룡파 인물 정보 완성 (6) 21.01.07 86
24 일반 에른심으로 대동단결 (2) 21.01.06 83
23 💡정보/팁 하나님 맙소사 펼치기 접기에 색 넣는걸 해냈단 말입니까 (9) 21.01.06 498

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기