XE 공식 자료실

전체보기

XE 공모전 2014 출품작 보기 자료 등록/관리

레이아웃 s4u Nextep 반응형 레이아웃 ver. 1.031

제작자: 페이소스
등록일: 2014-01-17
다운로드 수: 2,249
링크1: site4u.co.kr

반응형 웹디자인 레이아웃, iview 이미지 슬라이더, 2단 본문 구성, 향상된 동적 메뉴, 가변형 레이아웃, 미디어쿼리사용

라이선스: GPL v2
설치경로: ./layouts/nextep
최초 등록일: 2014-01-17
전체 다운로드: 6,950

다운로드 ver. 1.031

모든 버전 보기

체험하기

쉬운설치로 바로 체험할 수 있습니다

상세 설명

1/22 수정 -- 관리자 모드에서 일부의 경우 메인/서브 페이지 선택박스가 활성화되지 않는 문제가 있어

일단 메인용과 서브용을 구분하여 입력하는 방식으로 바꾸었습니다. 이전에 선택되지 않았던 분 들은 Nextep1031.zip 버전 /conf/info.xml을 업데이트하시면 됩니다.

1/22 수정 -- 일부 css를 수정했습니다.

1/18수정--** 일부 페이지에서 검색, 전체메뉴 보기 버튼 스크립트가 작동하지 않는 문제점을 수정했습니다.

-----------------모바일 뷰에서 화면 폭이 제대로 잡히지 않는 부분은 아래 직접 메타 코드를 넣으셔야합니다.

---------------------------------------------------------------

반응형 메타 태그가 관리자 레이아웃 설정>헤더 설정에서는 먹히지 않는 문제점이 발견되었습니다.

xe/common/tpl/common_layout.html 파일의

이렇게 직접 넣어주셔야 모바일에서 제대로 크기가 보입니다. 반응형 메타의 위치가 위에 있어야 적용되는 것 같습니다.

-------------------------------------------------------------

반응형 웹디자인 레이아웃 Nextep v1.0입니다.

미리보기 : http://jeonin.site4u.biz/zbxe/

홈페이지 : http://site4u.co.kr

대형 모니터의 큰 모니터에서부터 휴대폰에 이르기까지 동일한 소스로 적용 가능한 반응형 레이아웃입니다.

동시에 윈도우 창 크기에 따라 본문의 폭이 변하는 가변 레이아웃입니다.

브라우저 ie 9이상 권장 레이아웃입니다. ie7~8에서는 반응형이 동작하지 않으며 추후 업데이트에서 지원할 예정입니다.

1. 배경 이미지의 사용 : 배경 이미지를 사용하게 쉽게 전체 사이트의 분위기를 바꿀 수 있게 했습니다.

별도의 레이아웃 설정은 없으며 img 폴더의 배경 이미지 사이즈에 맞게 바꾸어 주시면 됩니다.

작은 기기에서 큰 이미지를 다운로드할 필요없도록 작은 사이즈 배경도 같이 바꾸어 주시기를 권장합니다.

추후 자동화 스크립트를 넣을 예정입니다. (현재는 제이쿼리 충돌상 빼놓았습니다)

2. ivew 이미지 슬라이더 : 레이아웃 설정 화면에서 총 5장의 이미지와 캡션, url을 입력할 수 있게 했습니다.

더욱 세부적인 사항과 옵션을 통해 막강한 기능을 구현할 수 있는 슬라이더 입니다.

3. Fontawesome 폰트의 사용 : 여러가지 아이콘으로 활용될 수 있는 fontawesome의 폰트를 포함했습니다.

간단한 마크업 태그로 본문 등 여러 곳에서 사용하 실 수 있습니다.

4. 가변형 레이아웃 : 미디어 쿼리를 이용하여 기기 화면의 크기에 따라 레이아웃이 변하는 방식입니다.

본문 내용의 위젯이나 게시판 , 이미지 등은 가변형을 염두에 두고 입력하여 사용하시는 것이 좋습니다.

샘플 사이트를 참고하세요.

5. 탭슬라이딩 컨텐츠 위젯 추가 : s4u 탭슬라이딩 컨텐츠 스킨을 따로 올렸습니다.

반응형이며 폭이 좁아지면 아코디언 슬라이딩 방식으로 바뀌게 됩니다.

6. 하단 3단의 높이 조절 : 반응형 레이아웃의 경우 각 단의 넓이는 물론 높이가 유동적이라 이를 맞추는 것이 어렵습니다. 여러가지 시도를 해보고 있으나, 일단 아래의 3단 위젯 영역의 높이를 자동 조절해주는 제이쿼리를 사용했습니다. 추후 본문 2단 영역 및 본문 3단 영역으로도 업데이트 할 계획입니다.