그누보드5 ASR 스킨 new-basic테마에서 해상도에 따른 반응형 추가하기

작업실

그누보드5 ASR 스킨 new-basic테마에서 해상도에 따른 반응형 추가하기

우성군 2 6198 0

기존의 테마는 반응형이지만 최대 가로폭이 1200px이었습니다.


요새는 1600px, 1920px, 2560px 등등 모니터의 크기가 커지면서 홈페이지의 가로폭도 커질 필요성이 높아졌습니다.


그래서 부트스트랩 기반의 new-basic테마를 수정하면서 모니터 크기에 따라 홈페이지 가로폭도 넓힐 방법을 알려드리고자 합니다.


/amina/thema/new-basic_0.3/assets/bs3/cssbootstrap.min.css


위 파일에서


@media (min-width:1200px){.container{width:1170px}}


위 내용 찾아서 그 오른쪽에


@media (min-width:1440px){.container{width:1400px}}


위 내용을 붙여넣습니다.


그리고


/amina/thema/new-basic_0.3/colorset/Basic/colorset.css


에서



@media all and (min-width:1200px) {

.at-thema .slider { width: 100%; }

.navbar-wp .dropdown-menu { margin-top: 0px !important; }

.boxed.wrapper { margin: auto; width: 1230px; }

.boxed .navbar-fixed .navbar { max-width: 1230px; }

}



위 내용을


@media all and (min-width:1440px) {

.at-thema .slider { width: 100%; }

.navbar-wp .dropdown-menu { margin-top: 0px !important; }

.boxed.wrapper { margin: auto; max-width: 1440px; width:100%;}

.boxed .navbar-fixed .navbar { max-width: 1440px; }

}


@media all and (max-width:1439px) and (min-width:1200px) {

.navbar-wp .dropdown-menu { margin-top: 0px !important; }

.boxed.wrapper { margin: auto; max-width: 1230px; width:100%;}

.boxed .navbar-fixed .navbar { max-width: 1230px; }

}


위와 같이 변경합니다.



이것을 응용하면 더 다양하게 해상도에 따라 나눌 수 있습니다 ^^

, , , , , , , ,

2 Comments
희망규짱 2014.10.31 21:14  
오우~ 저기저 질문 하나만 할게요 ㅋ
http://eyoom.me/bbs/board.php?bo_table=asr1&wr_id=42 현제 요기 스킨가지고 있는데 요것도 적용시키면 될까나요? 반응형인지라.
우성군 2014.10.31 21:55  
그 스킨은 안써봐서 잘 모르겠지만 ㅠㅠ

전체적인 구조는 비슷할거예요.