You cannot see this page without javascript.

Layouts Of MoonHouse

문하우스의 레이아웃들을 소개하는 게시판으로 바로갑니다.

Widgets Of MoonHouse

Addons Of MoonHouse

  • Url 링크에 아이콘을 달아주는 urllink_external 애드온
  • 카카오링크 애드온(mh_kakao_link)
  • Web Fonts 애드온 1.5(폰트어썸 V5.4.2 - 2018.10.29 UP)
  • Web Fonts 애드온 1.0 - Xeicon, Font Awesome, Google Material Icons, NanumGothic
  • 링크프리뷰(Snap Shots) 애드온

Layouts Of MoonHouse

    • Mh Thomsander Layout V1.0
    • [특징] - 페이지안에서 부메뉴가 Box형식으로 열립니다. - 배경이미지를 슬라이드로 출력합니다. ...
    • 2019.09.12
    • Mh White Layout V1.0
    • 가장 기본적인 것만 적용한 심플한 흰색 레이아웃입니다. 바탕색은 흰색만 적용하였으며 상단 로...
    • 2019.04.04
    • Mh LeftMenu 레이아웃 V1.2
    • [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코...
    • 2019.01.07
    • MH FullPage 레이아웃 V1.1
    • 마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [Tip] 페이지에 Youtube...
    • 2018.12.04
    • MH Pointy Slider 레이아웃
    • MH_Pointy-Slider 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정...
    • 2018.10.27
    • MH_Sliding 레이아웃
    • MH_Sliding 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니...
    • 2018.10.20
    • 사이트선택 전용 레이아웃 V1.1
    • 홈페이지의 첫 화면에서 두곳의 사이트를 선택하고 싶을때 사용하시면 유용한 레이아웃입니다. [...
    • 2017.06.19
    • XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 2탄
    • XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 최후 버전 https:/...
    • 2016.12.26
    • XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 1탄
    • XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 버전 [v5 업데이트...
    • 2016.12.07
    • 문하우스 레고 레이아웃 Ver 1.8
    • XE마켓에 올려서 한분의 구매자만 나타났던 레이아웃을 XE최신버전(1.8)에 맞추어서 새롭게 단장...
    • 2016.03.28

XE Of MoonHouse

MediaElement.js와 HTML5 video,audio 태그를 이용한 미디어 플레이어 및 유튜브 링크 애드온입니다. 당초에는 유튜브 뮤직을 링크시켜주는 애드온을 찾다고 없어서 시작했는데 일판이 좀 커졌네요. 애드온 이름을 몇번 바꾸다가 최종적으로 미디어플레이어 애드온으로 정했습니다. 폴더 이름은 mytube youtube가 '너튜브"라면 mytube는 '내튜브'...... https://xetown.com/tips/1167281 참조 유튜브 링크가 메인이 아니고 원래는 첨부한 오디오와 비디오 재생이 주 기능입니다. 1. 업로드된 mp3 및 wav 등의 오디오 파일 재생 2. 업로드된 mp4, mov, 3gp 등등의 비디오 파일 재생 제가 만들었지만 어디까지 동작할지는 저도 잘 모릅니다. html5 video,audio가 지원하는 것은 다 될 것으로 추측합니다. 3. 유튜브 링크 4. 유튜브 뮤직 링크 5. 위 4가지 기능이 댓글에서도 동작 6. 유튜브 영상과 오디오의 제목과 설명가져오기 7. 리스트재생(미완성) 목록까지는 가져오지면 UI는 완성하지 못했습니다. 수정해서 사용하시고 잘되면 공유 부탁드립니다. 8. 반응형 플레이어 당초 목적은 모바일에서 찍은 동영상을 업로드하고 다음화면서 재생하는 것이어서 모바일과 데스크탑에 다 어울리는 반응형으로 만들었습니다. 9. 썸네일 만들기 썸네일 애드온 별도로 사용할 필요없습니다. Rhymix에서는 외부이미지로 본문삽입만해도 썸네일이 잘생깁니다. XE에서는 잘 안되는 경우가 종종 있어서 아예 썸네일을 첨부화일로 넣는 기능을 만들었습니다. 나머지 설정은 바꿔가면서 테스트해보면 금방 이해할 수 있는 것들이라 설명을 생략합니다. 포스터기능은 업로드된 동영상을 위한 것입니다. 유튜브 동영상은 preload 기능을 이용하면 플레이하기 전에 썸네일 화면이 보이지만 업로드된 동영상은 플레이되기 전까지는 아무것도 나나타지 않습니다. 처럼 각자의 사이트에 걸맞는 영상을 만들어서 입력해주면 플레이되기 전에도 뭔가를 보여 줄 수 있습니다. 마지막으로 제일 중요한 것은 youtube data api key를 입력해야합니다. 입력하지 않아도 동작에는 문제가 없지만 제목과 설명을 가져오지 못합니다. 구글콘솔에 사이트를 등록하고 youtube data api key를 만들어서 입력하면 됩니다. 자세한 설명은 https://developers.google.com/youtube/registering_an_application?hl=ko 를 참조하십시요. api 키를 입력하면 재생창 상단에 제목이 나타나고 제목을 클릭하면 toggle되면서 설명이 나옵니다. 모바일에서 백그라운드로 가거나 화면을 끈 상태에서도 플레이가 가능합니다. 단 스마트폰 브라우저앱의 알림기능 , 특히 미디어알림기능이 꺼져있으면 동작하지않습니다. https://xetown.com/topics/1166111 참조 mediaelement.js를 가져다 xe(Rhymix)에 붙여서플레이어를 만들고 있습니다. 작업은 거의다 마무리 되어서 좀더 테스트해보고 공개할 예정입니다. 헌데 몇가지 기대이상의 기능들이 있네요. 저도 뭐 js는 그져 가져다 사용하는 입장이라서 아직 내부 기능을 다 이해하지는 못한 상태입니다. 그중에서도 눈에 띄는 점은 모바일 플레이어 기능입니다. 일반적으로 유튜브를 플레이시키면 별도의 플레이어가 있는 것이 아니라서 화면을 끄거나 백그라운드로 들어가면 플레이가 중지됩니다. 하지만 미디어플레이어에 링크해서 플레시키면 플레이어가 뜨네요. 화면을 끄거나 백그라운드로 들어가도 플레이어는 동작합니다. 스마트폰을 꺼서 호주머니 담은 상태에서도 음악감상이 가능합니다. 연결된 블루투스 기계에서 콘트롤도 가능하고... 구태여 유튜브 프리미엄으로 가지 않아도 될 것같습니다... ver : 0.8.1 1. 태그를 사용해서 유튜브를 링크한 경우 여러개의 재생창이 생기면서 발생하던 문제를 수정했습니다. 2. iframe 태그를 사용하던 기존 링크와 호환되게 수정했습니다. 3. 제목과 설명을 유튜브처럼 영상 아랫쪽으로 이동했습니다. ver : 0.8.2 url 및 설명과 제목의 사용여부와 위치를 설정할 수 있게 수정했습니다. [Sample] https://www.youtube.com/watch?v=tifg16jpNmQ
레이아웃이나 기타 다른 부분에도 에니메이션 효과를 쉽게 적용하는 방법입니다. https://moonhouse.co.kr/423394 https://moonhouse.co.kr/433413 위 사이트를 먼저 보고 오면 도움이 됩니다. https://daneden.github.io/animate.css 사이트에 접속해 보면 효과 이름이 있고 "Animate it"버턴을 눌러보면 해당 효과를 볼 수 있습니다. [적용방법] 1. animate.css 파일을 다운받아서 적용을 원하는 레이아웃의 css폴더에 업로드합니다. 2. layout.html 에 animate.css를 로드합니다. 아래와 같이 편집합니다. <load target="css/style.css" /> <load target="css/animate.css" /> 3. style.css파일을 열어서 에니메이션을 적용하고 싶은 id나 class에 코드를 적용합니다. id과 gnd인 메뉴 부분에 아래로 5초 동안 내려 오는 코드입니다. #gnb { -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:fadeInDown; animation-name:fadeInDown } fadeInDown 이 부분에 적용하고 싶은 효과의 이름을 적어 넣으시면 됩니다. .contentbox .sh { -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:fadeInRight; animation-name:fadeInRight } .contentbox .notice { -webkit-animation-duration:10s; animation-duration:10s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:flash; animation-name:flash } <div class="contentbox"> {$content} </div> 위의 코드는 {$content} 영역(위젯 추가영역) 안의 각각의 "위젯"이나 "내용직접추가" 설정에서 "위젯크기"의 "위젯 CSS class"부분에 class 이름을 적어 주고 효과를 지정하면 됩니다. (ex : .sh .notice) 조금 더 자세한 옵션을 부여 할려면 https://moonhouse.co.kr/423394 내용을 참조하시면 됩니다. #menu li { -webkit-animation-name:rollIn; -webkit-animation-iteration-count:1; -webkit-animation-duration:3s; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:normal; -webkit-animation-fill-mode:forwards; animation-name:rollIn; animation-iteration-count:1; animation-duration:3s; animation-timing-function:ease-in-out; animation-direction:normal; animation-fill-mode:forwards; }
홈페이지 의뢰를 받고 작업중 클라이언트로 부터 간단한 거래장부 프로그램을 구할 수 없을까 하는 문의를 받고 생각을 해 보다. 간단한 거래장부 정도는 홈피 게시판으로도 만들 수 있을 것 같아서 꾸며 보았습니다. 참고로 고객의 거래 장부라 보여 드릴 수는 없습니다. 먼저 스케치북게시판 과 게시판 확장변수 다중검색 애드온 이 필요하며 스케치북게시판도 수정을 합니다. 1. 스케치북게시판에서 목록형을 약간 개조합니다. 만약 전체 홈피에서 목록형게시판을 사용하지 않는다면 "_list_normal.html" 파일을 직접 수정하셔도 되고, 아니면 임의의 게시판형식을 하나 만드셔도 됩니다. 23줄 부분 {$lang->title}부분(제목)을 적당히 수정합니다. <th scope="col" class="title"><span><a href="{getUrl('sort_index','title','order_type',$order_type)}"><!--@if(!$mi->link_board)-->작업내역<!--@else-->{$lang->link_site}<!--@end--><i cond="$sort_index=='title'" class="arrow {$order_icon}"></i></a></span></th> 85줄 <a>에 style을 추가합니다. <a style="color:orange; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden" 119줄 <td>에 style을 추가합니다. max-width:100px는 적당한 사이즈를 적어 넣어시고, 아래 부분은 확장변수란에 마우스 hover시 전체 확장변수명이 출력되는 옵션으로 말풍선(툴팁) 애드온이 설치되어 있어야 작동합니다. class="pr_tooltip" pr_color="dark" pr_position="top" title="{$document->getExtraValueHTML($val->idx)}" <td cond="$val->idx!=-1" style="max-width:100px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden" class="pr_tooltip" pr_color="dark" pr_position="top" title="{$document->getExtraValueHTML($val->idx)}" class="<!--@if($val->eid=='link_url')-->link_url<!--@else-->m_no<!--@end-->"> 위와 같이 수정하시면 확장변수란들이 max-width보다 넓어지지 않고 작업내역의 넓이가 보장되며, 글이 1줄이상 출력되지 않습니다. 그리고 "말풍선 애드온" 설치하시면 줄어 들었던 확장변수들도 마우스 hover시 전체를 볼 수도 있습니다. 2. 게시판수정 작업을 완료 했으면 거래처에 필요한 주요 내용들을 확장변수로 만듭니다. 항목작성중 검색부분을 "예"로 선택하시면 이 확장변수들로 "게시판 확장변수 다중검색 애드온"에서 상세검색을 할 수 있습니다. 참고로 형식을 전화번호형식으로 지정하면 애드온에서 오류를 일으킵니다. 3. "게시판 확장변수 다중검색 애드온"을 설치하고 해당 mid를 지정합니다. 게시판관리 - 고급설정 - 목록설정 에서 검색할 확장변수 이름을 추가하시면 목록게시판에 출력됩니다. 4. 게시판설정에서 "글 작성시 미리 입력된 글 출력"란에 기본이 될 장부 형식의 테이블을 짜 넣습니다. http://tablesgenerator.com/html_tables 에서 자신이 필요한 테이블을 짜시면 편리합니다. Table을 만들때 테이블의 전체넓이를 675px정도로 맞추시면 스케치북에서 인쇄시 A4용지에 가로사이즈가 맞습니다. 인쇄할일이 없어면 굳이 전체넓이를 맞출 필요는 없고요. "Copy to clipboard"를 해서 에디터편집기에 붙여 넣기를 합니다. 상단의 </style>바로 밑에 보면 아래 table코드가 시작되는데 <div style="overflow-x: auto;">을 추가합니다. 모바일에서 테이블의 넓이가 화면 범위를 넘어설때 스와이프기능이 작동되게 하는 코드입니다. 참조 https://moonhouse.co.kr/html/480352 그리고 table의 width를 100%로 하시면 PC에서는 게시판전체폭으로 모바일에서는 설정한 가로폭으로 출력됩니다. </style> <div style="overflow-x: auto;"> <table class="tg" style="undefined;table-layout: fixed; width: 100%"> <colgroup> <col style="width: 44px" /> ~ 생략 ~ </table> </div> 에디터에서 편집한 코드를 "글 작성시 미리 입력된 글 출력"란에 붙여넣기 하시면 글 작성시 자동으로 내용입력란에 테이블이 출력됩니다. 5. 만약 거래장마다 테이블을 다른게 적용해야 되는 경우는 템플릿 컴포넌트 를 활용하시면 편합니다. 그리고템플릿 컴포넌트 스마트테이블 MH 템플릿을 참고하시여 테이블코드를 넣어서 각각의 테이블을 만들어서 글 작성시 출력해 주면 편합니다. 6. 모바일의 경우는 리스트형으로 게시판을 선택하면 아무래도 가로폭의 제약이 있으므로 웹진형으로 선택하면 보기가 편합니다. 위의 이미지와 같이 성명: ~ 내역:~ 부분이 상단에 출력되게 할려면 /modules/board/m.skins/sketchbook5/_list_webzine.html을 아래와 같이 코드를 첨부해 주시면 됩니다. <!--// 확장변수 제목상단에 출력 --> <h3 class="name"> <!--@if(!$mi->extra_val_no1)-->{@ $mi->extra_val_no1 = 1; }<!--@end--> <!--@if($oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted()) )--> <!--@if($document->getExtraValue($mi->extra_val_no1))--> {@$extravar_list = $document->getExtraVars()}{$extravar_list[1]->name} : {$document->getExtraValue(1)} <!--@else--> <!--@end--> <!--@end--> <span style="font-size:0.8em; color:#888">내역 : {$document->getTitle($mi->subject_cut_size)}</span> </h3> <!--// 제목 --> <h3 class="ngeb" cond="$mi->guest_name == ''">{$document->getTitle($mi->subject_cut_size)}</h3> 7. 최종적으로 거래장을 작성한 모습입니다. [PC에서 출력] [모바일에서 출력] 모바일의 경우는 테이블부분이 스와이프 작동됩니다. 끝으로 위와 같이 홈피에서 거래장을 만들면 인터넷이나 와이파이가 작동되는 어떤 곳에서도 PC나 테블릿, 모바일로 거래명부를 쉽게 볼 수 있고 작성할 수 있습니다.
http://moonhouse.co.kr/gongi/483001 위의 글에서 처럼 호스팅을 https://ivyro.net 으로 이전하면서 /xe꼬리표 떼고, SSL설치로 https:// 로 주소줄 바꾸는 작업기록 입니다. 먼저 호스팅을 이전 하는데 요즘은 랜섬웨어 및 악성코드의 지속적인 피해를 방지하기 위해 SSH접속들을 호스팅사 에서 보통 막고 있어서 부득이하게 이전 호스팅에서 데이터와 DB를 압축으로 내려 받아서 이사가는 호스팅에서 복원하는 방법을 사용하는 것이 가장 빠르고 편리합니다. 그런데 아이비호스팅에서는 백업메뉴는 있는데 복원메뉴가 없네요, 그리고 자동 백업기능도 없는 듯ㅠㅠ 싼게 비지떡인가 봅니다. 혹시 아이비호스팅을 선택하시는 분은 이점 참조하세요. 또 한가지 중요한 단점은 계정과 DB를 백업하는데 자신의 계정용량을 초과하면 홈피가 뻗어버립니다. 보통의 호스팅들은 계정용량과 상관없이 백업파일들을 생성해 주는데 아이비는 백업파일들까지 용량에 추가해 버립니다. 저 같은 경우는 데이터가 1.5G정도 되는데 백업파일 1G정도 되어서 계정용량 2G를 초과해서 홈피가 뻗어 버리네요. 물론 백업파일 내려 받고 지우면 다시 원상태로 돌아가지만... 그래서 저는 일일이 ftp로 접속해서 데이터 백업하고 DB에 직접 연결해서 sql내려 받아서 ftp로 파일 올리고 DB에서 sql 올리는 방법을 택했습니다. 그래서 시간적으로나 폴더와 파일들의 권한문제가 생기기도 해서 불편했습니다. 자! 지금까지는 호스팅 이전하는 일반적인 내용이었구요 /xe 꼬리표 떼는 것은 의외로 간단합니다. 이전설치후 "관리자 페이지" - "설정" - "시스템 설정" - "사이트설정" - "도메인" 에서 /xe 지우시고 저장후 관리자 페이지 닫지 않고 ftp에서 xe안에 파일들 모두 root로 이전하신 후 "캐시파일 재생성" 눌러주시면 일단은 성공입니다. 그 다음 DB에서 작업은 SSL적용후 https:// 로 바꾸고 나서 한꺼번에 하는 걸로... Let’s Encrypt FreeSSL/TLS 무료 인증서 설치를 신청하고 기다려도 답이 없길래 이것 저것 만지다가 홈피도 죽고 https://xetown.com/questions/1188607 하루가 지나고 설치 언제쯤 되냐고 질문글을 다시 올리니 그때서야 답변글이 달리네요. 안녕하십니까. 아이비호스팅입니다. 해당 도메인에 ssl설치중에 문제가 있어 설치가 지연되고있습니다. 현재 확인중에 있으며, 이용에 불편을 드려 죄송하며 최대한 빨리 문제 해결 후 설치 도와드리도록하겠습니다. 여러번 설치 시도 시 ssl설치가 막힐 수 있어 느리게는 다음주 중에 설치가 가능 할 수 있는점 양해부탁드립니다. 설치 후에 바로 연락드리도록 하겠습니다. 감사합니다. 이 글을 받고 느긋하게 기다리니 5일만에 설치 완료 되었다고 답글이 달렸네요. 연락 준다고 했으면 메일정도로는 연락해 주어야 하지 않나? 게시판에 들어가 보지 않으면 설치 된 것인지도 모를뻔 했네요. 참고로 SSL이 설치가 되어도 관리자설정에서 설정 수정해 주지 않으면 일반 http:// 로도 잘 접속됩니다. 괜히 저 같이 설치되었나 안 되었나 테스트 한답시고 "HTTPS 사용" 건드리지 마세요. http://도, https://도 모두 홈피 접속 안됩니다. SSL설정도 간단합니다. "관리자 페이지" - "설정" - "시스템 설정" - "사이트설정" - "HTTPS 사용" 에서 "항상 사용(권장)" 선택하시면 끝입니다. 그럼 무엇이 문제 일까요? 바로 시스템으로 이뤄지는 주소들 이외에 게시판이나 문서에 직접 입력한 http:// 주소들이 문제가 됩니다. 이런 경우 브라우저 주소창에 https:// 앞에 열쇠가 붙지 않고 느낌표가 뜨면서 클릭하면 안전하지 않다고 메세지가 나옵니다. 그럼 DB안에 존재하는 모든 http:// 를 https:// 바꾸는 방법을 설명하겠습니다. 1. https://xetown.com/point_contents/22661 "SSL지원 애드온" 사용하시면 가장 쉽게 된다고 합니다. 저는 1번이 잘 되지 않아서 2. phpMyAdmin로 들어가서 모두 선택후 sql로 내려받습니다. 내려 받은 sql파일을 Editplus 에디터기로 열어서 "바꾸기(Ctrl + H)"로 http://moonhouse.co.kr/xe 를 https://moonhouse.co.kr로 모두 바꾸어 주었습니다. 그러면 /xe 꼬리표 떼기와 https:// 로 한번에 수정이 가능하겠죠. 근데 문제가 특정 레이아웃이 깨어지는 현상이 생기네요. 이래 저래 하다보니 DB중에 xe_sites를 제외하고 sql로 내려 받아서 수정하니 정상적으로 작동이 되네요. 근데 xe_sites에 들어가 보면 domain에 정상적으로 https:// 붙어 있고 별 내용이 없는데 이상합니다??? 그렇게 해서 홈피 접속시 주소 왼쪽에 자물쇠 보이면 성공한 것입니다. 근데 안 보일 걸요~~ "캐시파일 재생성" 눌러주시고 사용 브라우즈의 "인터넷 사용기록"도 지워주셔야 정상적으로 보일 것입니다. 3.그런데 저 같은 경우 sql파일의 크기가 그리 크지를 않아서(한 20M) 에디터기로 열어서 편집을 할 수가 있지만, 용량이 무지 큰 경우는 에디터기로 열기가 쉽지는 않을 것 입니다. 그런 경우는 phpMyAdmin에서 쿼리문을 직접 작성하시면 됩니다. https://www.xpressengine.com/tip/21740199 참조하세요. 마지막으로 예전 주소인 http://moonhouse.co.kr/xe 로 들어와도 https://moonhouse.co.kr 로 접속되게 만들어야겠죠. /xe폴더안에 아래 내용이 포함된 .htaccess파일을 만들어서 올리면 됩니다. RewriteEngine On RewriteRule (.*) https://moonhouse.co.kr/$1 [R=301,L] SSL을 적용하고 나면 구글과 네이버 웹마스터도구 에서 주소를 새로 등록해야 합니다. 변경하는 옵션은 없습니다. 괜히 찾지마세요. "소셜XE 모듈" 로그인을 사용중이라면 사용중인 sns계정에 접속해서 접속주소를 수정해 주어야 정상 작동됩니다. 그리고 각종 API들(지도맵, Youtube, reCAPTCHA, 카카오링크등)도 수정해 주어야 합니다.
서버에 요청 중입니다. 잠시만 기다려 주십시오...