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