본문 바로가기

분류 전체보기83

[그누보드] 게시판 작성 시 관리자에게 이메일 전송하기. #그누보드 #이메일전송 안녕하세요 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.
[자바스크립트] 클릭시 클래스 추가/제거 #javascript #toggle #click #classList #add #remove 안녕하세요 Gi_1입니다. 오늘은 제가 가장 많이 사용했던 클릭 시 클래스 제거/추가를 작성해보고자 합니다. 사실 업무를 할 때는 제이쿼리로 사용 했지만, 자바스크립트를 공부하며 다시 정리해봅니다! 첫번째는, toggle을 이용하여 하는 방법이고, 두번째는 if else를 이용하여 작성하겠습니다. HTML Grab me! CSS .hello h1{ color: blue; transition: all 0.3s ease-in-out; } .hello h1.clicked{ color: tomato; } Script --공통-- const title = document.querySelector(".hello h1"); 1.. 2022. 1. 29.
[Github] 레파지토리 생성하고 소스트리 사용(1) #Sourcetree #Github 안녕하세요. Gi_1입니다. github 회원가입 후, source트리 사용방법과 프로젝트를 만드는 방법에 대해 간단히 알아 보고자 합니다. --Github 레파지토리 생성-- Start a project 혹은 new Repository를 통해서 아래로 접속 합니다. 이름, 설명을 입력하고 사진과 같이 설정합니다. 완료를 누르시면 생성한 레파지토리 창으로 넘어 가는데, 초록색 Code를 클릭하면 url이 나옵니다. ( 깃허브 url ) --SourceTree 설치 및 사용방법-- 이후, git을 조금 더 편하게 사용하기 위해서 source tree를 설치 합니다. https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI fo.. 2022. 1. 27.
[Git, Github] 본격적인 시작 전, 개념 배우기 #git #github #기초개념 #커밋 #commit #add #push 안녕하세요. Gi_1입니다. github 기초 단어개념을 정리하고자 합니다. git, commit, add, push, git : 언제든지 저장 시점으로 되돌아 갈 수 있는 파일 저장, 관리 시스템 커밋 (commit) : Save한다, 커밋을 만든다 라고 합니다. 커밋을 하게 되면, 언제든지 커밋을 한 시점으로 되돌아 갈 수 있습니다. 클라이언트의 수정사항을 받다보면, 과거로 되돌아 갈 때가 있는데 수동으로 백업해 놓지 않고 백업이 가능합니다. 네이버클라우드나 구글드라이버를 안쓰고 깃을쓰는 주요 이유라고 생각되네요! add ( 스테이지에 파일을 올린다 ) : commit을 하기 전 임시저장 push : github에 업로드함. .. 2022. 1. 27.
Length란 무엇일까? , 요소의 존재 여부와 글자 수 세기 #length #글자수 #요소개수 안녕하세요. Gi_1입니다. 프론트앤드 개발을 하다보면, 요소가 존재 하는지, 글자수는 몇글자인지 알아야 할 때가 있습니다. 요소의 존재여부 if ($("div").length){ $("p").addClass("on"); } div 요소가 1개라도 있을 경우, p에게 class on을 부여하는 script 입니다. 요소가 0일 경우 false, 1 이상일 경우 true 이기 때문입니다. 글자수 세기 const aa = 'aa'; const write = document.write(aa.length); alert('write'); 결과값 : 2 2022. 1. 22.
each()란 무엇일까? #jQuery #each #반복 안녕하세요 Gi_1입니다. each()는 선택한 요소가 여러개일 때, 반복해서 작동합니다. -예시- HTML script $( document ).ready( function(){ var i=1 $('.request_question_title').each(function(){ $(this).text('Test' + i); i = i + 1; }); }); class가 request_question_title인 요소의 수 : 5개, var i = 1, 반복될 때 마다 +1 실행 결과 : Test1, Test2, Test3, Test4, Test5 2022. 1. 22.
Form에서 필수입력사항 script로 제어하기. #form #alert #value.length 안녕하세요 Gi_1입니다. form에서 필수입력값은 html에서 required로 간단하게 제어할 수 있습니다. 다만, 수많은 체크박수중 하나이상 체크해야 하는 경우나 최소 3글자 이상 입력받고 싶을 때가 있습니다. 최소 글자수 완료 $(document).ready(function(){ $('.submit_btn').click(function() { var cont = document.querySelector("#adm_qna_create_txt"); if(cont.value.length < 3) { alert('내용을 최소 3글자 이상 입력해주세요.'); return false; } }); }); input 속성중 minlength 를 이용해서 하여도 됩.. 2022. 1. 22.
[vs code] 비주얼 스튜디오 코드, 간단히 부모 감싸기. #vscode#wrap#Ctrl+Shift+p#Emmet:Wrap with Abbreviation#Emmet:약어로 래핑 안녕하세요 Gi_1입니다. 코드를 짜다보면, 중간중간에 부모요소를 추가할 때가 많은데요. 그럴 때마다 부모요소 만들고, 복사하고 붙여넣기를 하는 과정이 사실 오랜 시간이 걸리지는 않습니다. 하지만 약어로 래핑 기능을 사용하면 좀 더 빠르게 코딩을 칠 수 있다는 생각 입니다. 사용방법 우선 자식요소로 포함될 코드들을 드래그 해줍니다. 이후, Ctrl + Shift + P를 동시에 입력하면 모든 명령어 보기라는 창이 나타납니다. 여기서 Emmet: Wrap with abbreviation이라는걸 선택합니다. *한글패치가 되신 분들은 Emmet : 약어로 래핑 을 선택해주시면 됩니다. se.. 2022. 1. 21.