로그인 회원가입

로그인

아이디
비밀번호
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 51939
223 💖추천 프로젝트 레벤 리워크를 추천합니다. (1) 23.07.20 94
222 ✒️창작 오늘의 원고어 - 연휴 (3) 23.06.03 94
221 💖추천 1961 추천합니다 (4) 23.05.15 94
220 일반 계속해서 새로운 시도를 해보고 있습니다 (1) 22.09.09 94
219 일반 사트 사트 (1) 22.05.30 94
218 🔨설정 "대한미국" 세계관에서 선거인단을 배분하는 방법 22.04.29 94
217 🔨설정 사트 재밌어보이네요 21.12.29 94
216 ❓질문 제이위키 닉네임 (1) 21.09.18 94
215 일반 설정 쉬면서 재미로 해보는 설문조사 (1) 21.09.14 94
214 일반 가상 인물 문서 만들때마다 나타나는 공통점 (1) 21.01.19 94
213 🔨설정 청룡파 인물 정보 완성 (6) 21.01.07 94
212 📢알림 제이위키 창작자 여러분들을 응원합니다. 22.10.22 93
211 ✒️창작 레벤 프로젝트의 단상 22.09.25 93
210 ✒️창작 린크레더블 밈 희망편! (1) 22.03.06 93
209 📰뉴스 노보로시야에서 여객기 추락, 탑승인원 전원사망 / 독립신문-독립 미디어 그룹 21.11.09 93
208 🔨설정 역대 대한민국 상원의원 선거 (2004 - 2019) (2) 21.02.18 93
207 🔨설정 대성제국 교육감 추천! (4) 21.01.04 93
206 🔨설정 <신공의 정당> 생활의당 生活の党 (2) 21.01.04 93
205 일반 틀이 예쁘네요 (3) 22.09.25 92
204 🔨설정 [이뮨 신화] 상태학 참고자료 (1~4주차) (1) 21.10.09 92

로그인

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