XETOWN

포인트 XE 마켓

타운 포인트로 XE 서드파티 자료를 거래할 수 있습니다.

내정보

Guest 님
보유포인트
0
  • 재구매 할인
    30%
  • 컨텐츠 환불
    100%
  • 평점 포인트
    10%
  • 포인트 자동책정
    0%
콘텐츠 수 164

Equeer 레이아웃 1.4.5 (반응형 지원)

최초 등록일: 2017.07.16 조회수 : 1083

200P

4.9점 / 총 26명 참여
  • 구매자 55
  • 설치경로 /layouts/equeer_layout
    /widget/point_status/skins/equeer_point 
  • 라이선스 XPM License (재배포 금지) 
  • 분류 레이아웃
  • 제작자 Booth
  • 다운로드
    equeer V1.0.zip 56.12KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.1.1.zip 56.58KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.1.2.zip 56.65KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.2.2.zip 60.05KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.2.3.zip 60.26KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.3.4.zip 60.86KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.4.4.zip 65.54KB (잔여일 : -, 잔여횟수 : -)
    equeer V1.4.5.zip 65.59KB (잔여일 : -, 잔여횟수 : -)
  • URL Booth님의 웹사이트

equeer_layout_scr.png

제작자의 말

 

UI/UX 전공이지만 편집 프로그램만 다룰 줄 알았고, 직접 코드로 무언가를 만들어 본 적이 없었습니다. 작은 커뮤니티를 운영하게 되면서 만들게 된 자작 레이아웃을 기반으로 제 첫 작품을 공개합니다. 생활코딩으로 가볍게 배운 실력인지라 가독성을 높이고, 재사용성을 극대화하는 코딩에 대해 이해도가 부족합니다. 이점 양해해주세요.

 

레이아웃 소개

equeer layout ver.1.4.5 Updated!

 

미리보기 레이아웃 설치하기

 

 

커뮤니티 레이아웃을 기반으로 만들어졌기에 회원 가입을 받는 사이트에 적합합니다. 레이아웃 본연의 기능에 충실하고 필수 불가결한 요소들만을 남겨 여기에 적절한 색 조정과 애니메이션으로 멋을 냈습니다.

 

자바 스크립트를 최대한 지양하고 CSS3를 활용하여 사용자의 행동에 최대한 반응하는 UX를 구현했습니다. 마우스를 가져다대고, 누르는 과정에서 빛과 그림자, 모양이 동적으로 변합니다. 플랫한 디자인의 요소에 동적인 애니메이션을 활용하여 무게감, 입체감을 만들고 디자인에 생동감을 부여합니다.

 

btn.gif search.gif gnb.gif usermenu.gif

 

 

업데이트 내역

V.1.4.5 (2017-07-22)

  • 로고를 텍스트로 사용할 경우 로그인 팝업 내 로고도 텍스트로 변경됩니다.

 

V.1.4.4 (2017-07-21)

  • 본문의 가로폭을 넓히고 서브 메뉴의 가로폭을 줄였습니다.
  • 서브 메뉴 - 위젯 타이틀 URL을 입력해야만 타이틀에 MORE가 뜨도록 수정되었습니다.
  • 모바일에서 일부 패딩값이 개선되었습니다. (가로폭 100%)
  • 서브 메뉴에서 배너를 수정하지 않을 시 나타나는 배너 이미지가 변경되었습니다. 또한 서브 메뉴 배너의 기본 URL이 http://calvinsnax.xyz로 연결되도록 변경되었습니다.
  • layout.html 파일 내 쓸떼없는 태그를 제거했습니다. (DOCTYPE, html, head, body 등)

 

V.1.3.4 (2017-07-20)

  • 서브 메뉴 위젯 타이틀의 디자인이 개선되었습니다.
    subnav_widget.png
  • 모바일에서 상하 패딩값이 개선되었습니다.
  • 모바일에서 헤더 부분이 지원할 수 있는 가로폭이 소폭 늘어났습니다.
  • 모바일에서 네비게이션 드로어(서브 메뉴)와 유저 메뉴가 분리되었습니다. 이제 헤더 부분의 프로필 이미지를 누르면 유저 메뉴가 '팝오버'됩니다.
  • 모바일에서 네비게이션 드로어의 패딩값이 개선되었습니다.
  • 모바일에서 로그인 화면 내 "로그인 상태 표시 / 비밀번호를 잊어버리셨나요?" 문구가 가로폭이 너무 작을 시 겹치는 문제에 대해 문구를 두 줄로 변경하면서 해결되었습니다.
  • 모바일에서 로그인화면 내 회원가입 텍스트가 보이지 않는 문제 해결.
  • Samsung Pass 사용 시 로그인 후에도 Samsung Pass 인증이 뜨는 오류 해결.

 

V.1.2.3 (2017-07-20)

  • 사용자 메뉴에서 레이아웃 수정 메뉴 추가 (유경수님 의견 감사합니다.)
  • 모바일 화면에서 로고가 텍스트일 경우 밑으로 내려가는 문제 해결

 

V.1.2.2 (2017-07-20)

  • 반응형 모바일 지원
    (모바일 뷰 사용 안함 체크 또는 m.layouts에 넣어 사용. XE의 경우 모바일 레이아웃 설정에서 'PC와 동일한 반응형 레이아웃 사용'으로 변경)

    mobile.gif

  • 이제 서브 메뉴 최상단 및 최하단에 원하는 HTML 태그를 삽입할 수 있습니다.
  • 서브 메뉴에서 위젯 사용 여부를 설정할 수 있습니다. 또한 위젯 타이틀 링크를 수정할 수 있습니다.

 

V.1.1.2 (2017-07-19)

  • 서브 메뉴에서 배너 사용 여부 설정에서 사용안함을 체크해도 배너가 표시되던 문제 해결

 

V.1.1.1 (2017-07-19)

  • 새로운 버전명 규칙 적용 (대규모 업데이트 > 기능 추가 > 버그픽스 순서)
  • 메인 비주얼 표시 여부 설정 기능 추가
  • 메인 비주얼 배경 컬러 직접 설정 및 그라데이션/단색 설정 기능 추가
  • 메인 비주얼 이미지 등록 설명에 "(배경이 투명한 png 파일 추천)" 문구 추가
  • 메인 비주얼 이미지 사이즈 맞춤 선택 기능 추가 (원본크기, 맞춤, 채우기)
  • 서브 메뉴에서 배너 사용 여부 설정 가능 (사용함 기본값)
  • 포인트 위젯 표시안함 체크 시에도 포인트 위젯이 표시되는 버그 수정

 

V.1.0 (2017-07-16)

  • equeer layout 1.0 첫 배포

 

설치 방법

  1. 첨부 파일의 압축을 풀어주세요.
  2. equeer_layout 폴더를 ./layouts/equeer_layout 이 경로로 넣어주세요.
  3. 레이아웃 설정에서 공지사항 srl 및 서브 메뉴 위젯을 설정하여 본인의 입맛대로 커스터마이징하세요.
    ※ 공지사항 srl은 게시판 모듈의 고유번호를 뜻합니다. [관리자 > 게시판] 페이지에서 아래 이미지와 같은 곳에 마우스를 가져다대면 하이퍼링크에 module_srl 을 알 수 있습니다.

    srl.png

    srl_2.png

사용자 팝업 메뉴에서 포인트 위젯을 사용하기 위해서는 다음 과정 진행하세요.

  1. XE 자료실에서 포인트 현황 위젯을 다운받아 설치해주세요. (https://www.xpressengine.com/index.php?mid=download&package_id=18324347)
  2. equeer_point 폴더를 ./widget/point_status/skins/equeer_point 이 경로로 넣어주세요.

 

SVG 사용 방법

레이아웃 설정 내 이미지 등록은 png, jpg, gif 등의 이미지 파일만 업로드 가능하기 때문에 svg 파일을 사용하시는 경우 /img/logo.svg 파일을 변경하시고, 레이아웃 설정에서 로고 이미지가 등록된 경우 삭제해주시면 정상적으로 svg 사용이 가능합니다.

 

기술지원

아직 기술지원을 하지 않고 있습니다. 꾸준히 자기개발하여 추후에 기술지원도 가능하게끔 실력을 키워보겠습니다.

 

라이센스

레이아웃에 동봉된 이미지는 자체 브랜드 및 작가 Calvin Snax의 ArtWork들입니다. 레이아웃 자체의 라이센스와 무관하게 Calvin Snax가 소유권을 가지고 있으며, 무단 사용 적발시 법적 책임을 물을 수 있습니다. 꼭 수정하셔서 사용하시기 바랍니다.

profile equeer layout 제작
미리 보기: http://calvinsnax.xyz/equeer
무료 버전 다운받기: https://winx.kr/4EftI

댓글 '84'

프로필 사진 profile
유정수 2017.07.19 15:23 댓글 별점
오류 확인좀 부탁합니다.
메인에서 서브 메뉴 표시 여부에서 표시함에서 "표시안함(기본값)"으로 선택 해도 서브메뉴로 있어서요 메인으로 변경이 안되는것 같습니다. 확인요청합니다.


로그인 정보안에 레이아웃 수정 버튼을 추가 해주시면 어떨까요 .(다음 업데이트시 의견)
소스
<li cond="$grant->manager"><a href="{getUrl('','module','admin','act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}" onclick="window.open(this.href);return false;"><i class="fa fa-pencil"> </i>LayoutEdit</a></li>
프로필 사진 profile
Booth 2017.07.20 00:39 댓글 별점
1.1.2 버전에서 해당 오류 해결되었습니다. 적용 이후에도 계속 같은 증상이 나타나신다면, 레이아웃 설정에서 레이아웃 삭제 후(레이아웃 초기화) 다시 시도해주세요!

레이아웃 수정 버튼 참고하겠습니다.
프로필 사진 profile
블루 2017.07.19 20:38 댓글 별점
와 정말 깔끔하고 좋습니다
프로필 사진 profile
휴리파파 2017.07.20 10:26 댓글 별점
반응형에서 가로폭 좁아질때 왼쪽 상단에 메뉴 아이콘 나타나면서 기존의 메뉴들이 로고 바로 아래쪽으로 붙는데 실제로 사용해보니 불편해요 아예 로고 밑에 메뉴를 좁은 폭에서는 없애는게 좋을 것 같아요. 드롭다운메뉴도 안나타나서 오히려 이용자들이 헷갈릴것 같아요.
저는 다음과 같이 스타일 줘서 없앴습니다..
@media only screen and (max-width: 767px) {
.gnb-wrapper {display: none;}
header, .header, .header .float-left {height: 60px !important;}
}
프로필 사진 profile
Booth 2017.07.20 10:33 댓글 별점
반응형 디자인은 모바일에 특화되어 있습니다. 더 나아가 멀티 플랫폼을 위해서 존재하는 기술입니다.
PC 환경(마우스를 사용하는)에서의 사용을 염두하고 제작하는 것이 아니라 스마트폰, 태블릿 등의 터치 방식 멀티 플랫폼을 지원하기 위해 만들어진 것입니다.
가로폭이 좁아질 때 전체적인 디자인이 안드로이드 Material Design과 흡사한 형태로 변화하는데요. 이것은 모바일 유저(터치를 사용하는)의 환경에 맞춰 UX가 변화한 것입니다.
되려 모바일 유저에게 팝오버 메뉴를 지원하게되면 호버의 개념이 오브젝트의 반응 정도로만 사용되고 직접적인 인터랙션으로 잘 이어지지 않는 모바일 환경에서는 되려 혼란과 불편을 초래할 수 있습니다.

그리고 궁극적으로, 가로폭이 768px 이하로 내려갈 경우 메뉴의 개수가 해당 폭을 지원하기 어려워집니다.
프로필 사진 profile
간장게장 2017.07.20 11:43 댓글 별점
역시 훌륭합니다. 멋지네요.. 반응형도..

한가지 확인하시면 좋을 것 같습니다.
가로폭 440px 이하에서는 로그인 단추가 나타나질 않네요.. ^^;;
아무래도 사이트 제목 등과 겹치는 부분 때문에 설정하신 것 같은데..
아니면 사이드 메뉴 쪽에라도 로그인 메뉴를 추가해 주시는 게 어떠실런지요..
프로필 사진 profile
Booth 2017.07.20 13:17 댓글 별점
사이드 메뉴에 로그인 메뉴 추가해보겠습니다.

그리고 가로폭 440px이면 스마트폰 가로폭보다 훨씬 큰 편입니다. 로고 가로폭이 어느정도 이신가요?
로고의 가로폭이 비정상적(140px 이상)으로 길 경우에만 로그인 버튼과 검색 버튼이 사라집니다.
사용하신 브라우저(모바일 환경의 경우 OS와 브라우저 어플명)와 적용하신 사이트 주소 알려주시면 보다 정확하게 확인 가능합니다.
프로필 사진 profile
간장게장 2017.07.20 13:23 댓글 별점
그렇군요.. 로고 가로 사이즈 때문이네요
제 경우에는 이미지 로고가 아니라 텍스트로 되어 있어서요..
http://undergo.kr 참고하시면 좋을 것 같습니다.

사용환경
노트5,
삼성 브라우저, 크롬
OS 누가

그리고 말씀 드린 김에..
요즘 삼성 스마트폰에서는 Galaxy Pass 라는 기능을 이용해 지문으로 자동 로그인하는데요..

위 사이트 역시 자동 로그인하도록 설정했습니다.
이전 레이아웃에서는 로그인되어 있으면 아무런 반응이 없고,
비로그인 상태에서만 지문 로그인 하라는 창이 떴는데요.
현재 레이아웃에서는 로그인, 비로그인 상태 관계없이 Galaxy Pass 지문 로그인 창이 뜹니다.
할 수 없이 Galaxy Pass 설정에서 해당 사이트를 제외(삭제)하고 사용 중입니다.
다른 레이아웃으로 바꾸면 정상 작동합니다.

감사합니다.
프로필 사진 profile
Booth 2017.07.20 14:46 댓글 별점
최신버전(1.3.4) 나왔습니다. 적용해주세요.
어느정도 큰 로고 사이즈에서도 대응할 수 있도록 지원 가로폭을 소폭 상향하였습니다. Samsung Pass 관련 이슈해결했습니다. 적용해보시고 확인 부탁드려요.
프로필 사진 profile
간장게장 2017.07.20 16:58 댓글 별점
와우 감사합니다. ^^
프로필 사진 profile
가이더 2017.07.20 13:25 댓글 별점
본문 너비를 조절할려고 합니다. 위치좀 알려주시면 감사하겠습니다.
프로필 사진 profile
구미호 2017.07.20 13:54 댓글 별점
equeer.css 에서 268 라인

.content-wrap {
float: left;
width: 70%;
padding: 40px 15px 30px 0;
}

저기서 width: 70%; 이것으로 수정해보세요
프로필 사진 profile
가이더 2017.07.21 11:35 댓글 별점
감사합니다 구미호님
프로필 사진 profile
Booth 2017.07.20 14:50 댓글 별점
사이트 전체 너비는 다음의 코드를
@media (min-width: 768px) {
.container-fluid {
width: 1140px;
padding: 0 30px;
margin: 0 auto;
}
}

서브 페이지의 본문의 경우 다음 코드 두 개를 수정해주세요. content-wrap과 subnav-wrap의 width는 두 값의 합이 100%가 되도록 해야합니다.
.content-wrap {
float: left;
width: 70%;
padding: 40px 15px 30px 0;
}

.subnav-wrap {
float: right;
width: 30%;
padding: 40px 0 30px 15px;
}
프로필 사진 profile
가이더 2017.07.21 11:36 댓글 별점
감사합니다.
프로필 사진 profile
다이오니 2017.07.20 18:35 댓글 별점
우와 끝내준다..!
지원이 계속되는게 감동스럽습니다. 잘 사용하겠습니다. 멋쟁이~!!
프로필 사진 profile
YJSoft 2017.07.20 20:38 댓글 별점
정말 훌륭한 레이아웃입니다만 몇가지 개선점이 보여 건의드립니다.

1. layout.html 파일에는 doctype, html 및 body태그가 있어서는 안됩니다. doctype, html 태그 및 body 태그는 XE에서 생성합니다.
2. (필수 아님) meta 태그중 인코딩 태그는 XE에서 이미 삽입하고 있으므로 레이아웃에 정의될 필요 없는 부분이며 이외 meta태그는 {@ Context::addHtmlHeader('<meta name="viewport" content="width=device-width, user-scalable=no">'); } 처럼 XE함수로 추가해 주시는 것이 좋습니다.(하지 않으셔도 XE에서 알아서 head로 이동시키긴 합니다)
3. fontawesome 아이콘을 메뉴에 사용할땐 fa-fw 클래스를 붙여주세요. 아이콘 너비가 일정하게 세팅되며 글자 위치가 들쭉날쭉한 현상을 수정할 수 있습니다. 수정전 https://puu.sh/wOoXs/2f0000d77a.png 수정후 https://puu.sh/wOoPn/e93871c85f.png
프로필 사진 profile
Booth 2017.07.21 03:17 댓글 별점
저런 함수가 있는 줄은 처음 알았네요! 팁 감사합니다ㅎㅎ
fa-fw 클래스 진작 알았으면 좀 더 작업이 편했을텐데 쓸뗴없이 패딩값에 시간 낭비를 했네요ㅠㅠ
프로필 사진 profile
가이더 2017.07.21 11:53 댓글 별점
서브 메뉴 위젯 타이틀의 디자인이 개선되었습니다. 이 부분에서요.. more 나오지 않게 할수 있을까요? 최근 글 과 최근댓글로 사용하고 있거든요,. 업데이트 감사드립니다.
프로필 사진 profile
Booth 2017.07.21 14:41 댓글 별점
위젯 타이틀 URL을 입력하지 않으면 MORE가 뜨지 않도록 변경되었습니다.
프로필 사진 profile
윤삼 2017.07.21 15:50 댓글 별점
계속 업데이트되고 있군요! 멋있는 레이아웃에 멋있는 제작자십니다!!
프로필 사진 profile
다이오니 2017.07.21 16:53 댓글 별점
최근글 최근 댓글 위젯에서 지정된 게시판만 불러오도록 모듈 srl 값을 선택했으면 좋겠습니다.
프로필 사진 profile
Booth 2017.07.21 19:04 댓글 별점
따로 위젯을 제작한 것이 아니기도 하고, 확장성을 위해서 직접 위젯 태그를 삽입하는 형태로 제작되었습니다. 기본적으로 설정된 위젯은 테스트 용도로 삽입된 코드입니다. 위젯 태그 생성은 관리자 > 설치된 위젯에서 원하시는 위젯 선택하셔서 코드생성하시면 됩니다.
프로필 사진 profile
다이오니 2017.07.21 20:26 댓글 별점
저야 위젯을 추가할 수도, 따로 레이아웃 파일을 수정해서 srl변수를 따로 넣어 수정할 수도 있습니다.

하지만 제가 수정해서 마이너하게 사용하는것보다 기왕에 레이아웃에 최근글과 최신댓글 위젯이 달려있는 상태이니, 거기에 좀 더 사용자 편의성을 높히는 것이 좋을 것 같습니다.
수정도 빠르게 반영해주시고, 개선도 매우 활발히 진행되어서 저도 사용자의 입장에서 약간 아이디어를 말씀드린겁니다. srl 목록을 변수로 만들어버리고 위젯 img 태그 안에 변수명을 넣어버리면 원하는 srl에서 불러오기가 가능할 것 같고, 다른 사용자들도 편하게 사용할 수 있을 것 같습니다.

물론, 저도 매번 업데이트 할 때마다 수정하는게 아니라 아예 패치가 되면 더 좋을 것 같습니다.
매우 감사하게 사용중입니다!!
프로필 사진 profile
구미호 2017.07.21 20:50 댓글 별점
사실 XE에서 무료 레이아웃을 이렇게 바로 바로 업데이트 해주시는것은 대단 하신겁니다
제작자님 감사 합니다 ^^
프로필 사진 profile
Sherlock16 2017.07.21 23:37 댓글 별점
잘쓰겠습니다~
프로필 사진 profile
팀워크 2017.07.23 03:30 댓글 별점
워후, 다운 잘 받아갑니다 :)
프로필 사진 profile
가이더 2017.07.23 14:31 댓글 별점
메뉴색상을 조절할려고 합니다. 좀 진하게요. 소스 위치좀 알려주세요.
감사합니다. ( _ _)

추가 : 사이트 영역 최근게시물 밑 라인 삭제할려고 합니다.
프로필 사진 profile
takeall 2017.07.23 16:00 댓글 별점
정말 감사합니다. 너무나 깔끔하고 예쁜 레이아웃입니다. 잘 사용하겠습니다.
프로필 사진 profile
일단놓고말해 2017.07.24 21:50 댓글 별점
우왕... 메뉴 튀어나오는거 너무 이쁘당... ^^;;;;;
프로필 사진 profile
김진영 2017.07.25 00:27 댓글 별점
레이아웃과는 관계없는 질문이라 죄송합니다만...http://calvinsnax.xyz/board_aLBc07
위 게시판은 어느 스킨을 사용하셨나요? injin 이라는 키워드로는 전혀 나오질 않아서...
프로필 사진 profile
Booth 19시간 전 댓글 별점
XEmarket에서 판매 중인 Material XE 패키지 내에 포함된 모바일 스킨입니다.
프로필 사진 profile
SunBlood 21시간 전 댓글 별점
완전 최고!!
프로필 사진 profile
ruin 10시간 전 댓글 별점
감사합니다 잘쓰겠습니다!
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...