Syncst 테마제작 10일째
당초 계획은 답글 기능 삽입이었는데, 맘에드는 모바일 플러그인이 없어 직접 모바일 테마를 만들어보기로 했다.
화면 크기에 따라 다른 테마를 불러올 수 있을까? 아직 초보인 관계로 그런 기능은 못찾았다.
여러 선구자들의 자료를 조회한 결과 “반응형 웹“이라고들 하는 것이 뭔지 알게되었다.
처음엔 SK 그룹 사이트에서 봤는데 브라우저 사이즈를 조정하면 해당 사이즈에 맞게 사이트 구조가 재구성 되는 것이었다. javascript를 썻을 것이라고 생각했는데, 이제보니 css로 간단히 해결된다는걸 알게되었다.
.wrap{ width:960px; margin:auto; }
.content{ width:690px; }
.sidebar{ width:250px; float:right; }
.footer{ min-width:960px; }
}@media screen and (max-width: 610px) {.wrap{ width:100%; min-width:450px; margin:auto; }
.content{ width:98%; }
.sidebar{ clear:both; width:98%; margin:auto; }
.footer{ width:100%; min-width:450px; }
}
css에 위 내용이 포함되면 화면 사이즈에 따라 다른 스타일을 적용할 수 있다.
제작중인 테마의 콘텐츠 영역 폭을 감안해 해당 폭 610픽셀 보다 큰가 작은가를 따져 작으면 사이드바를 콘텐츠 영역 아래로 내려버린다.
@media screen and (min-width: 611px) 에서 min-width와 max-width가 계속 헷갈렸는데 범위를 지정하는 기능인듯 하다. if문 안에 보다 크다 보다 작다를 넣는 식이다.
이런 식으로도 가능하다.
아이패드, 아이폰에서 테스트 결과 아래 코드가 필요하다는 것을 알았다.
일반적으로 scail-init 등으로 확대 비율을 정해주기도 하는데, 1.0으로 설정하면 아이폰에서는 너무 크게 나온다. 그래서 그냥 스케일 부분을 없애고 콘텐츠, 메뉴 클래스에 min-width를 넣어 해결했다.
글에 삽입된 이미지 크기도 이슈가 되었는데, 화면 크기를 줄여도 이미지는 줄어들지 않는 문제가 있었다. 아래 스타일로 해결했다.
max-width:100%;
height: auto;
}
max-width만 넣으면 비율 유지가 안된다.
워드프레스 사이트에서는 contents 폭 변수를 손대라고 하던데 복잡할 것 같아 안해봤다.^^;
다음 계획 – 답글 달기 진짜로..ㅋㅋ
2 Comments
özgür haber · 2013년 5월 19일 at 02:03
This is awesome! Great job!
kimsreal · 2013년 5월 20일 at 10:34
Thank you ^^