반응형 게시판 만들 때 목록 table or div(ul)
어떤 걸로 하시나요?
그누스터디에서 반응형 주제에 대해 토론을 곁다리로 지켜보던 중 예전부터 생각한 방법(이라 쓰고 꼼수라 읽는)을 실제 코드로 러프하게 적어봤는데 어떤지 모르겠네요.
목표는 table 마크업으로도 반응형에서 한 게시물을 두줄로 표시하는 겁니다.
기존 방식으론 한 줄로만 표시되니까요.
<style>
td.td_title {width:100px;height:60px}
td.td_date {position:relative;width:0}
td.td_date span {display:block;position:absolute;top:30px;left:-100px}
</style><table> <!-- 일부 태그 생략 --><tr><td class='no'><span>번호</span></td><td class='td_title'><span>제목2</span></td><td class='td_date'><span>일자</span></td></tr></table>
위와 같은 소스를 어찌들 생각하시나요?
걍 모바일(해상도가 낮은 디바이스)에서는 div 로 구현하는게 맞을까요?
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 19개
단지 '반응형' 이라고 하셨는데 미디어 스크린 에 대한 정의는 안보이네요
미디어 쿼리와 유동형 레이아웃의 합이 반응형 웹 디자인이 아닐까 하고 조심스럽게 리플 달아봅니다.
풀어적자면 어떤 해상도에서 '2줄로 보일것' 이냐는 것이죠 ㄷㄷ
어짜피 표로 표기를 하는 부분이기에 그건 맞다고 보여집니다.
위 코드는 스크린 크기에 상관없이 고정된거 아닌가요?
제가 뭔말인지 이해를 못해 그러나요? ^^*
테이블에 border값을 주니까 재밌게 되네요.
알맹이만 좌로 100보!
테이블 내의 텍스트를 저렇게 움직일 수도 있다는걸 오늘 알았습니다.
감솨 ㅎㅎ
제가 '꼼수같다'고 해서 화나셨나봐요.. ^^; 죄송..
근데 저도 꼼수 엄청 좋아합니다. 아니 사실은 땜빵 정말 좋아합니다.
그래서 전 table 로 투표..
위를 기반으로, 지운아빠님이 데스크탑-태블릿-스마트폰에서 멋지게 나오는 list.skin.php 하나 맹글어 주세요. 뿌잉 뿌잉 ~~ ( <-- 오..그라 들어서 다시는 못할듯.. 지운아빠님은 어떻게 매번 하시는지..^^;)
꼼수인거 저도 인정합니다. ㅎㅎㅎ 완성도 높은 꼼수를 만드는 것도 퍼블리셔의 일이라면 일이라는 생각이 드네요. 근데 전 퍼블리셔는 아닌... 디자이너도 아닌... 프로그램 학원이나 다닐까봐요... ㅠㅠㅎ
왠지 지운아빠님이 훈련을 자주 간다는 느낌이 드는 이유는 왜일까요?
아, 저번에 반응형 이미지 글올렸을때도 훈련중이셨죠? 그래서 그런듯.. ^^
아예 반응형 테이블로 구현하면 어떨까요? ^^
컬럼별로 우선순위 (클래스 든, data 값이든) 정해놓고, min-width 안되면 자동으로 가리기..
js 없이는 불가능 하겠죠?
어쩌다보니 스터디에 안 쓰고 여기에 쓰고 있네요. 죄송합니다. ㅠ
어디든 무슨 상관입니까? 오히려 자게에서 얘기거리를 만들어 주셔서 고맙죠..
역시 손가락을 놀려야 이해가 빨리...
http://responsivepx.com/?study.gnuboard.org%2Fbbs%2Fboard.php%3Fbo_table%3Dcm_free#320x480&scrollbars
역시 전 프로그램만 할래요.-_-
일반 테이블 형식이랑 비슷하게 하였고요
특정 px 이하에서는 특정 정보는 없앴습니다.
http://ggilggil.com/
이런식으로여 게시판이란게 테이블 형태라서 고민 많이 했는데 그냥 없애는게 편하더라구요.
게시물 안에서도 크기는 13px로 주고 동영상은 맛폰으로 접속시 자동 리사이즈 되게 정도만 하면 문제 없을듯 합니다,
역시 반응형도 멋지게 만드시네요. ^^
그냥 굵직한 영역 설정에는 div, 일반적인 표 모양에는 table 태그를 써도 좋을 듯한데요... 음...'
아직 제가 고수가 아니라...ㅜㅜ