작업실

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

컨텐츠 정보

본문

기존의 테마는 반응형이지만 최대 가로폭이 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; }

}


위와 같이 변경합니다.



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

관련자료

  • 서명
    우성짱의 NAS를 운영하고 있습니다.

    저의 즐거움이 여러분의 즐거움이면 좋겠습니다.

댓글 2개 / 1페이지

희망규짱님의 댓글

오우~ 저기저 질문 하나만 할게요 ㅋ
http://eyoom.me/bbs/board.php?bo_table=asr1&wr_id=42 현제 요기 스킨가지고 있는데 요것도 적용시키면 될까나요? 반응형인지라.
Total 157 / 11 Page
RSS
그누보드5 ASR테마에서 네이버 밴드로 보내기 버튼 달기 댓글 4

네이버 밴드로 보내기 기능입니다.앱으로 연결하는 방법은 조금 어려워 그냥 웹으로 올릴 수 있게 했습니다.모바일, PC에서 모두 가능합니다./am…

그누보드5 ASR테마에서 카카오스토리, 구글플러스 PC에서 보내기 추가 댓글 2

페이스북, 트위터 등은 있는데 카카오스토리, 구글플러스가 없더군요. ㅎㅎ1. 카카오스토리 PC에서 보내기/amina/lib/common.lib.…

ASR스킨 new-basic테마 인덱스에 공지사항 붙이기 댓글 16

위 스샷과 같이 첫화면에 공지사항을 붙였습니다.적용 방법은 쉽습니다.new-basic 테마 폴더의 index.php에서제일 위에<div c…

그누보드5 https 전체 사이트 적용 후기 댓글 2

관련링크의 사이트처럼 홈페이지의 모든 부분에서 https를 적용해봤습니다.적용 방법은 매우 쉽습니다.그누보드 루트의 config.php 에서/*…

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

기존의 테마는 반응형이지만 최대 가로폭이 1200px이었습니다.요새는 1600px, 1920px, 2560px 등등 모니터의 크기가 커지면서 홈…

그누보드에 카카오 계정으로 로그인 기능 다는 방법 댓글 32

0. 아미나 사이트에서 바로 다운로드 하기http://amina.co.kr/bbs/board.php?bo_table=skin_amina&…

최근글


새댓글


알림 0