팁이라기엔 허접해서 걍 자게에 올려봅니다.
각종 기능 추가 테스트 중이어서 불안정할 수 있습니다...

http://kimjiwoon.kr/test.php


지운이녀석 사진 올릴 홈페이지 리뉴얼 좀 생각해보다가 미디어 쿼리 없이 jquery 만으로 반응형을 구축해야 겠단 생각이 들었습니다. 우선 전제조건이 있는데, 테스트 URL 처럼 단순한 구조의 레이아웃이어야 합니다.

다 읽어보시면 의문이 생기시겠지만 걍 css 에서 wrapper 넓이만 잘 잡아주면 되잖아?도 싶으실텐데, 사진 크기가 유동적일 수 있어서 넓이 잡는게 쉽지가 않습니다. 제 머리로는... ㄷㄷㄷ

작동원리는 간단합니다.

문서의 넓이를 구해서, 사진의 크기로 나눈 다음 (php 로 문서 시작지점에 설정, 나중에 관리까지 고려해서)
문서의 넓이에서 나머지값을 뺀 값으로 사진이 나올 부분(#wrapper)의 넓이를 지정합니다.

예를 들어 현재창의 넓이가 1,000 이고 사진은 150 by 150 이라면 나머지는 6 이 되는 거죠. 소숫점은 어떻게 처리되는지 잘 이해를 못했습니다. 구현부터 해보느라...

나머지값을 2 로 나누면 body 의 상하단 여백값이 나와서 (지금 예를 든 경우는 3이 되겠죠) wrapper 의 양여백과 body 의 상하단 여백이 거의 비슷한 값을 갖게 됩니다. 소숫점 처리에 대해 이해를 확실하게 안해서 아마도 거의...

만약 320px 을 최소 크기로 잡는다면 document 넓이 검사 후 320 이면 여백 등에 대해 다른 처리를 해주면 되겠죠.

대충 생각한 아이디어가 구현도 어렵지 않아서 바로 구현해보고 한번 올려봅니다.
허접하지만 필요하신 분 있으시면 한번 참고해보세요.
테스트 링크는 구현 완료 후 삭제할 생각입니다.


현재 가장 큰 난제는 사진 넓이와 높이에서 정 가운데 로고가 나오게 하는 것입니다. ㅠㅠㅠ

대충 아이디어는 떠올랐는데 실구현이 가능한 건지는 모르겠네요... 이래서 경험이...


덧.
최근 html5 게임 제작에 흥미가 생겼는데 그러려면 js 를 알아야겠더라구요.
이번 주말에 js 공부 좀 해보려고 사무실 서 책 챙겨왔는데 뜻하지 않은 가족여행으로 한 장도 못 본게 함정... ㅠ