본문 바로가기

전체 글75

[Krpano-3] 사용방법 - 스킨 세팅 / 설정 정리 #Krpano #Virtual_Tour #VR #Viewer 안녕하세요. Gi_1의 개발일기 입니다. 너무 간단하게 VR이 생성되었는데.. 디자인적인 요소를 변경하는 방법을 알아보겠습니다. 위와 같이 하단 툴바가 있고, 지난번에 생성한 핫스팟, 다른 지점으로 넘어갈 때 슬라이드 효과 외 여러가지를 설정할 수 있습니다. 코드 정리로 남겨놓겠습니다. tour.xml 파일을 열어보시면 ) loadscene_blend_prev = 다음으로 넘어갈 때 효과 loadscene_blend_next = 이전으로 넘어갈 때 효과 loadingtext = 로딩 텍스트 출력 layout_maxwidth = 기본적으로 px단위이고 큰 화면의 경우 100% 권장 controlbar_height = 하단 막대바 높이 design.. 2022. 3. 11.
[Krpano-2] 사용방법 - 이동 화살표(hotspot) 생성/설정 #krpano #Virtual_Tour #VR #viewer 안녕하세요. Gi_1 개발일기 입니다. 기본적으로 VR을 생성했다면, 다음으로는 루트를 설정 해 사용자가 더욱 편하게 VR을 볼 수 있도록 할 수 있습니다. 먼저 krpano Tools를 실행하여 Load tour.xml를 클릭합니다. 미리 만들어 놓은 vtour폴더의 tour.xml 파일을 업로드 하면 됩니다. xml파일을 성공적으로 불러 왔다면, 상단 메뉴 툴바에서 Add hotspot을 클릭합니다. 화살표가 생성 될탠데, 원하는 위치에 드래그 -> 클릭하여 어디로 이동할지 설정 해줍니다. 화살표를 수정하고 싶을 때는, Edit hotspot을 클릭하여 똑같이 설정합니다. 이후 올바르게 작업이 됐는지 확인하면 끝! 감사합니다. 다음 포스팅에.. 2022. 3. 11.
[Krpano-1] 사용방법 - 사용 전 다운로드 / 이미지 업로드 #Krpano #virtual_tour #VR #viewer 안녕하세요. Gi_1입니다. VR viewer가 많이 보이는데 간략하게 사용법 정리하고자 합니다. Krpano홈페이지에서 Download를 클릭 하셔서 환경에 맞는 파일을 다운로드 후 압축 해제 해 줍니다. Krpano는 유료로 인증키가 필요한데, demo버전으로 연습 해 볼 수 있습니다. krpano Tools를 실행하셔서 왼쪽 상단 Make Vtour를 클릭합니다. 파노라마 이미지를 삽입해 주면, 이미지가 있던 폴더에 자동으로 기본 세팅이 완료 됩니다. vtour 라는 폴더가 생성됐습니다. 웹 서버에 업로드 했을 때는 tour.html 파일을 통해 실행되지만, 로컬에서는 html파일로 바로 볼 수 없습니다. 따라서 tour_testingse.. 2022. 3. 10.
[노마드코더] 신박한 HTML 태그 5개!! #HTML #노마드코더 안녕하세요. Gi_1입니다. 유튜브를 보던 중, 평소 공부하지 않던 HTML의 신박한 기능 5가지를 보게 되었는데요. 자바스크립트를 이용해서, 혹은 복잡한 CSS를 통해 구현할 수 있었던 기능 5가지를 정리하고자 합니다. 1. progress는 진행정도를 나타내는 바를 만드는 태그입니다. HTML5에서 추가 되었고, 익스플로러 10부터 지원합니다. HTML max, value, min이 주요 속성입니다. min,max에 따른 value 속성값에 따라 bar의 게이지가 상승합니다. CSS progress[value]::-webkit-progress-bar{ background-color: whitesmoke; box-shadow: 0 2px 5px rgba(0,0,0,0.25) in.. 2022. 3. 9.
[그누보드] 멀티검색 게시판 #그누보드 #멀티검색게시판 안녕하세요. Gi_1입니다. 그누보드는 기본적으로 게시판에 검색 기능이 포함되어 있는데, 그 기능을 2개이상 사용하고자 할 때 이용할 스킨 입니다. --스킨 다운로드 경로-- https://sir.kr/g5_skin/34034 (그누보드 5.4) 게시판 리스트에 간단히 다중검색, 멀티검색,복수검색, 여러개 검색을 로직파일 적용 버전 : 그누보드 5.4.1.3 (그누보드 5.4) 게시판 리스트에 간단히 다중검색, 멀티검색,복수검색, 여러개 검색을 로직파일 변경없이 스킨자체적으로 가능하도록 합니다. sir.kr 다운로드 후, 적용방법을 따라 하신 후에 wr_1 ~ wr_10에 저장 되어 있는 value를 검색 할 수 있습니다. view.write는 wr_1 ~ wr_10 똑같이 작.. 2022. 2. 6.
그누보드 일정(달력) 게시판 + 최신글 안녕하세요. Gi_1입니다. 달력을 사용할 때가 많은데, 선택한 날짜에 게시글을 올려 일정을 공지 할 수 있습니다. 그것을 메인 페이지에 최신글로도 띄울 수 있구요. 위와 같은 캘린더 게시판이 가능하고, 최신글로 연동 또한 가능합니다. 글 쓰기에서는 일정 표시 색상, 기간, 제목, 내용을 입력할 수 있습니다. 관리자는 기본 보기설정을 통해 월간단위로 보일지, 주간으로 보일지 일간으로 보여질지를 선택할 수 있으며 사용자는 버튼을 통해 바꿀 수 있습니다. 화면 버튼의 종류를 선택 할 수 있고 표시색상은 관리자의 마음대로 설정할 수 있습니다. 게시판 링크 https://sir.kr/g5_skin/34052?sca=%EA%B2%8C%EC%8B%9C%ED%8C%90&sfl=wr_subject%7C%7Cwr_con.. 2022. 2. 5.
그누보드 로그인한 회원 정보표시. #그누보드 #회원증 #회원정보표시 안녕하세요. Gi_1입니다. 홈페이지를 만들다 보면 마이페이지를 종종 만드는데요, 그누보드에서는 $member[]을 통해서 회원의 닉네임, 아이디, 여분필드 등을 가져올 수 있습니다. mb_1 ~ mb_10 까지는 그누보드에서 기본으로 활용 할 수 있습니다. 2022. 2. 4.
[그누보드] 게시판 작성 시 관리자에게 이메일 전송하기. #그누보드 #이메일전송 안녕하세요 Gi_1입니다. 그누보드를 처음 이용하시는 분들은 많이 헤매시는 부분입니다. 견적문의 등 게시판을 제작하다 보면 게시판 글 작성 시 이메일로 전송되는 기능을 이용할 때가 종종 있는데요. 해결방법은, 애초에 이메일로 견적을 보내거나 게시판 글 작성 시 관리자에게 안내 메일이 전송되는 것 입니다. --세팅-- 기본환경설정 -> 게시판 글 작성 시 메일설정에서 원하시는 대로 설정 해 주세요. 저는 최고 관리자로 하겠습니다. 기본환경설정에서 관리자 메일 주소를 입력해 주세요. 또, 게시판 글 작성 시 메일 설정에서 설정한 아이디의 E-mail을 설정 해 주세요. 저는 최고관리자로 설정 해서, admin의 e-mail을 설정 해 주었습니다. 게시판 관리 -> 수정 -> 하단에 메.. 2022. 2. 3.
[그누보드] 추천/비추천 기능 커스텀 하기. ( 질문 항목이 딱 2개인 투표기능 만들기 / 투표한 회원 정보 보기 ) #그누보드 #추천 #비추천 #커스텀 안녕하세요 Gi_1입니다. 이전, 백앤드 개발자가 없을 때 들어온 의뢰였습니다. (사실 있었는데 소통이 안되서 프론트 쪽에서 커버를..) ---기능--- 의뢰는 게시판 별 투표기능 추가 였습니다. 저는 게시판 별 추천/비추천을 생각 해 냈고, 투표 항목을 2개로, 질문을 고정하는 형식으로 제안 했습니다. 투표를 하게 되면, 글 작성자와 관리자는 투표자의 이름 / 연락처 / 투표날짜 를 알 수 있습니다. 사용자는 투표를 몇명이 했는지만 알 수 있습니다. ---추천/비추천을 항목에 맞게 퍼블리싱--- 2022. 2. 3.
[그누보드] 접속한 회원정보 표시하기. #그누보드 #접속회원정보 안녕하세요. Gi_1입니다. 인터넷에 카페나 다른 곳들을 보면 사이드바에 현재 접속 회원이 뜨는 것을 볼 수 있습니다. 저는 해당 회원의 이름/닉네임/주소를 출력 하도록 하겠습니다. --코드-- 접속회원목록 2022. 2. 3.
[CSS] 그림자, 그라데이션 css 생성 사이트 #css boxShadow #gradient #auto 안녕하세요. Gi_1입니다. 그림자, 그라데이션 사용 방법은 알지만 웹 접근성 고려해서 css 작성하기 너~~무 귀찮고 비효율적이에요. 그림자, 그라데이션 css 생성 사이트 소개 해 드리려고 합니다. 1. 그림자 그림자 생성 사이트에 접속 해 보시면, 처음 뜨는 팝업 창 은 꺼주세요. 상단에 있는 직사각형으로 실제 그림자 적용 모습을 파악 하실 수 있고, 각도, 거리, 블러, 색상, 불투명도를 지정할 수 있습니다. 하단에 내려 보시면 아래와 같이 생성된 CSS가 있는데, 이것을 복사하여 사용 하시면 적용 끝! 수기로 작성 하는 것 보다, 사이트 즐겨찾기 해 두시고 작성 하는게 더욱 빠릅니다. 하단에 더 살펴 보자면, box-shadow를 통한 더 .. 2022. 2. 2.
[Github] git checkout 에러 해결방법 ( Your local changes to the following files would be overwritten by merge ) #github #sourcetree #checkouterror 안녕하세요 Gi_1입니다. git checkout 에러 해결방법 입니다. ( 소스트리 / 깃허브 ) 1. 원인 작업 중 흔하게 보는 오류입니다. 브렌치에 작업을 해 놓고, 커밋을 하지 않고 다른 브렌치로 체크아웃을 시도할 시 생기는데요. 오류 메세지에서 이미 해결방법이 나와 있습니다. Please commit your changes or stash them before you switch branches. 브랜치를 변경하기 전 변경사항을 commit 하거나 stash하라고 합니다. Commit 변경 사항을 커밋 해 주고 다시 브랜치 checkout을 시도하면 에러 없이 성공 합니다. SourceTree를 이용하지 않는 경우 : git comm.. 2022. 2. 2.
[Github] SourceTree 이용해서 브랜치 생성/병합 #Github #sourcetree #branch 안녕하세요 Gi_1입니다. SourceTree에서 커밋, 풀, 푸쉬 정도 할 줄 배워서 상당히 편한 툴인것을 실감하고 있습니다. 브랜치 생성, 병합(머지)방법 알아보도록 하겠습니다. 우선 브랜치를 왜 추가로 만드느냐?? : 최초 깃허브에서 PULL하시면 기본적으로 main or master라는 브랜치가 생성되어 있습니다. 협업을 할 때나 회사에서 작업을 할 때 이것은 최종본 이라고 생각하시면 됩니다. (업체에게 보여주는 용도 or 완성본) 따라서 브랜치를 하나 더 생성하여 작업공간을 확보하는 것 입니다. -브랜치 사용- 왼쪽 중간쯤 브랜치를 클릭 해 보시면 커밋한 목록들이 나타납니다. 저는 커밋을 4번 해서 4개가 생성되어 있습니다. 그 중 최근의 것 하.. 2022. 2. 2.
[노마드 코더] 바닐라 JS로 크롬 앱 만들기 #Javascript #바닐라JS  안녕하세요. Gi_1입니다.노마드코더의 무료 자바스크립트 강의, 바닐라 JS로 크롬 앱 만들기 코드 정리 입니다.무료강의를 신청하면 메일로 퀴즈가 날라온다는데.. 저는 몰랐어서 안하는 바람에 재신청해서 하고 있습니다 ㅎ;;몇번 안하면 실패!!하면서 기회가 없고 다시 신청해야하니 강의를 들으실 분들은 참고 해주세요.  미리보기  오른쪽 위에는 사용자의 위치 / 날씨 / 기온이 나타납니다.이름을 입력하여 로그인 할 수 있으며 일정을 기록 할 수 있습니다.새로고침을 할 때 마다, 배경사진과 제일 하단의 명언이 교체됩니다.이는 백앤드를 필요로 하지 않고, 새로고침을 해도 유지가 됩니다. ( 쿠키 삭제 등을 하면 사라집니다. )  #어떻게 입력된 정보가 자바스크립트만으로 저장 .. 2022. 2. 1.
[jQuery] 클릭 시 클래스 추가/제거 #jQuery #addClass #removeClass #hasClass #ifelse 안녕하세요. Gi_1입니다. 실무에서 많이 쓰는, 클릭 시 클래스 추가/제거 방법입니다. 저번 포스팅에서는 자바스크립트로 클릭 시 클래스 추가/제거를 포스팅 하였는데.. https://gi-1.tistory.com/16 [자바스크립트] 클릭시 클래스 추가/제거 #javascript #toggle #click #classList #add #remove 안녕하세요 Gi_1입니다. 오늘은 제가 가장 많이 사용했던 클릭 시 클래스 제거/추가를 작성해보고자 합니다. 사실 업무를 할 때는 제이쿼리로 사용 했지만,. gi-1.tistory.com 사실, 간단히 기능만 구현 하자면 제이쿼리가 훨씬 코드가 짧고 간단합니다. 그럼에도 .. 2022. 1. 30.