[이윰] 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기

페이지 정보

yadolee 루루아빠 2,923 2016.11.22 22:49:33

본문

반응형 테마 - PC에서 메인은 오른쪽, 사이드는 왼쪽에 위치하고 모바일에서는 메인이 위쪽, 사이드는 아래쪽에 위치
1. 사이드 레이아웃 설정은 이윰환경설정에서 오른쪽으로 설정한다.

2. 그누보드5/eyoom/theme/설치된 테마/layout/head_bs.html 를 열어 아래 예제처럼 사용자 임의의 class(예:main-box)를 추가한다.

<div class="basic-bs-main {? eyoom.pos_side_layout == 'left'}right{:}left{/}-main col-md-9 main-box"> 

3. 그누보드5/eyoom/theme/설치된 테마/layout/side_bs.html 를 열어 아래 예제처럼 사용자 임의의 class(예:side-box)를 추가한다.

<div class="basic-bs-main {? eyoom.pos_side_layout == 'left'}right{:}left{/}-main col-md-9 side-box"> 

4. 그누보드5/eyoom/theme/설치된 테마/css/custom.css 에 아래와 스타일 정의를 추가한다.

@media (min-width:992px){
    .main-box {float:right !important}
    .side-box {float:left !important}
} 
메인과 사이드 레이아웃(col-md-9, col-md-3) 각각의 클래스명에 flaot 속성 스타일을 줘서 디바이스 화면 넓이 992px 이상에세 메인 레이아웃은 오른쪽으로 사이드 레이아웃은 왼쪽으로 위치하게 만든다.
991px 이하에서는 콘텐츠의 위치에 따라 메인이 먼저 위에 위치하게 된다.
레이아웃 반대의 경우 float속성을 반대로 하면 되며 변경에 따라 스타일은 맞게 수정하면 된다.
추천인
  • 추천해 주세요
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,345,221
레벨 101
경험치 1,516,928

Progress Bar 6.37%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 7691426 페이지

제목 글쓴이 날짜 조회 추천
이윰  🏆 Eyoom Builder 1.2.6 패치 루루아빠 2016.08.26 3.0k 0
그누•영카트  🏆 그누보드 5.1.19 패치 루루아빠 2016.07.06 3.0k 0
제로  댓글+1🏆 서버OS가 WindowsNT일경우 가입폼에서 메일체크 에러방지 루루아빠 2005.07.07 2.9k 0
그누•영카트  🏆 📸 5.2.9.8.4 버전에서 5.3.1 정식버전으로 패치 루루아빠 2018.04.06 2.9k 0
그누•영카트  🏆 🎞️ 그누보드 5.1.8 패치 루루아빠 2015.11.25 2.9k 0
그누•영카트  🏆 영카트 5.1.4 (2015.11.02) 루루아빠 2015.11.09 2.9k 0
이윰  🏆 Eyoom Builder 3.0.6 패치 shadow2fox 2018.09.18 2.9k 0
제로  🏆 💾 등록실패 방지 (글 등록 실패로 인한 글날림 방지) 루루아빠 2005.07.05 2.9k 0
기타  🏆 Font Awesome 4.7.0 - Form Control, Video Player, Chart, Text Editor, File Type, Spinner 루루아빠 2017.11.20 2.9k 0
이윰  🏆 메인일때만 사이드 레이아웃을 없애기 루루아빠 2015.04.24 2.9k 0
이윰  🏆 Eyoom Builder 3.0.9 패치 shadow2fox 2019.03.25 2.9k 0
JavaScript  🏆 반응형 테마에서 Theia Sticky Sidebar 사용시 레이아웃이 중첩되는 문제 해결하기 루루아빠 2017.04.22 2.9k 0
이윰  🏆 블로그 스킨(blog skin) 갤러리 목록에서 box 이미지 높이 줄이기 루루아빠 2016.02.17 2.9k 0
이윰  🏆 이윰빌더 외부이미지 로컬 저장시 용량 줄이기 루루아빠 2017.11.23 2.9k 0
이윰  🏆 Eyoom Builder 1.3.15 패치 루루아빠 2018.01.05 2.9k 0
이윰  🏆 🚩 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기 루루아빠 2016.11.22 2.9k 0
이윰  🏆 모바일에서 이미지 넓이 높이 태그 제거하기 루루아빠 2015.05.07 2.9k 1
그누•영카트  🏆 영카트 5.2.9.7 패치 루루아빠 2017.12.16 2.9k 0
그누•영카트  🏆 💾 다음 스마트 워크를 이용해 소유 도메인으로 메일 서비스 이용하기 루루아빠 2017.03.27 2.9k 1
이윰  🏆 이윰빌더에 태그 검색창 달기 루루아빠 2017.04.18 2.9k 0
이윰  🏆 🎞️ Input 관련 버튼과 이윰 버튼 정렬 맞추기 루루아빠 2015.11.17 2.9k 0
제로  🏆 💾 [스킨만들기] view_foot.php(이전 다음글, 버튼 표시 부분)의 설명입니다 루루아빠 2005.06.23 2.9k 0
이윰  🏆 Eyoom Builder 1.3.13 패치 루루아빠 2017.11.21 2.9k 0
그누•영카트  댓글+1🏆 첨부된 이미지 링크 없애기 루루아빠 2015.04.04 2.9k 0
서버  🏆 Nginx에서 HTTP → HTTPS 301 리다이렉트(Redirect) 하기 루루아빠 2017.12.11 2.9k 0
그누•영카트  🏆 그누보드 5.2.9.6 패치 루루아빠 2017.11.21 2.9k 0
그누•영카트  🏆 영카트 5.0.43 패치 루루아빠 2015.07.27 2.9k 0
이윰  🏆 Eyoom Builder 3.0.3 - 패치에 문제가 있는 버전입니다. shadow2fox 2018.08.20 2.9k 0
이윰  댓글+1🏆 관리자는 쪽지 보낼 때 캡챠코드 적용하지 않기 shadow2fox 2019.01.10 2.9k 1
이윰  🏆 Eyoom Builder 1.3.4 패치 루루아빠 2017.11.21 2.9k 0