300x250
반응형
/* layout */
/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
}#container { padding-top:20px; margin:0; width:95%; }
#left { float:left; width:250px; padding-right:20px; padding-bottom:20px;}
#header { text-align:right; width:250px; padding-top:40px; padding-bottom:20px;}
#sidebar { text-align:right; width:250px; text-align:right;}
#content { float:right; width:95%; padding-bottom:40px; line-height:160%; overflow:hidden;}
/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width:1200px) {
/* layout */
#container { padding-top:20px; margin:0; width:70%; }
#left { float:left; width:250px; padding-right:20px; padding-bottom:20px;}
#header { text-align:right; width:250px; padding-top:40px; padding-bottom:20px;}
#sidebar { text-align:right; width:250px; text-align:right;}
#content { float:right; width:70%; padding-bottom:40px; line-height:160%; overflow:hidden;}
}
easy & past
첫줄(모바일) Small devices { 항목별 내용채우기<--레이아웃)
마지막(컴퓨터) Extra large devices {항목별 내용채우기<--레이아웃}
저는 모바일과 컴퓨터에만 최적화를 했습니다.
타블렛은 없어서 ㅋ
사이즈별로 세팅이 반응형으로 가능하고~
크기를 원하는 수치(530px)로 지정해도 되고, 퍼센트로 지정하면 비율로 먹힙니다 (90% <--이런식)
<뚜뚜월드>의 인생밀접형 잡지식은 앞으로도 계속 연재됩니다. ㅋㅋ
뭔가 여러분에게 도움이 되거나 재밌거나 멋진것이 있다면
작던 크던 <포스팅의 재물>이 될 것입니다.
작은 나눔, 큰 기쁨
정보는 제 뇌로 한번 걸러
효과가 있다고
생각된 정보들만
제 아름다운 지적능력과 신체능력이
케미스트리를 이뤄
집필됩니다. 망했다.... ? ㅋㅋ
그래서 갈길이 멉니다. 같이 가자9 ^^*
똥글이 많은건 그래서였네
뿌직 =3333
300x250
반응형