모바일에서 표로 만들어진 게시판을..가독성있게 보는 방법
본문
다름이 아니라...게시판에서 표를 생성해서 만든다면
(참고로 스마트에디터2 사용중)
EX) 가령 아래와 같이..
pc에서는 당연히 문제없이 보이지만...
모바일로 들어가면, 표 내용이 많을수록..좌우가 찌브러 들고...글자내용도 아래로 깨져서 내려가곤 합니다.
그래서 모바일 폰트 글자를 매우 낮춘다면...표는 유지가 되는데..가독성이...아..눈이 아플정도로 글자가 안보이네요..
그래서 게시판 내용 테이블인
view-content에 min-width 설정하고, overflow-x: auto; 를 넣어서...좌우 스크롤이 가능하게 했는데...
그러다보면....표 내용이 많고...내용물의 x좌표가 가로로 길게 나오면..한도끝도 없이 우측으로 가야만 하며..
화면 내용이 크게들어오니....전체적인 표 내용을 한눈에 담기가 어렵네요.
그래서..본문 게시판 내용을, 모바일에서 글자를 더 낮추고, 좌우 스크롤로 해보려고 하는데..
아 ...이 방법밖에 없는건가..하는..괴로움이 문득 들어서..
다른 좋은 방법 있으면...좀 고견을 듣고 싶어서..이렇게 글을 남겨봅니다.
답변 3
담아야 되는 내용이 많은 상태에서 같은 레이아웃을 고수하려고 하면 당연히 그럴 수 밖에 없는 문제입니다.
PC일 때의 출력화면과 모바일일 때의 출력 화면을 다르게 하여 레이아웃을 별도로 구성하는 수 밖에 없겠고,
그것조차 (표 안에 담는 내용의 문제 때문에) 쉽지 않은 경우가 많죠.
내용물을 다 보여주려고 하는데 도화지가 부족하면 어쩔 수 없는 문제죠.
뭔말하시는건지 모르겠네요..
당연히 표의 너비만큼 줄여야 한눈에 보이는데
그러면 가독성 떨어지는건 당연한거죠.
위 양식으론 어렵고
[A]
[1분기 ----]
[2분기 ----]
[B]
[1분기 ----]
[2분기 ----]
이런식으로 모바일에서 구조 자체를 바꾸지 않는 이상은 어렵죠
모바일에서 표를 세로로 떨어지게 만드는것도 방법인데
이것은 컨텐츠 표기하는것과 연관되는거죠
-------------------------------------
[A ] [내용1] [내용2] [내용3]
-------------------------------------
[B ] [내용1] [내용2] [내용3]
-------------------------------------
형태를
-----------는 표로
[ ] 는 div 의 style:float 형태로 하면
모바일에서
-------------
[제목:A ]
[내용1]
[내용2]
[내용3]
-------------
[ 제목:B ]
[내용1]
[내용2]
[내용3]
--------------
형태로 만들어지겠죠
위의 것은 하나의 예인것이고
모바일의 사이즈정책은 컨텐츠의 종류와 내용에따라 다르게 잡는게 맞습니다.