본문 바로가기

전체 글75

[자바스크립트] 클릭시 클래스 추가/제거 #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.
[노가다 후기] input 체크시 원하는 텍스트 출력 / input 입력 시 텍스트 출력 #click #is:checked #append 안녕하세요 Gi_1입니다. 오늘은 일기식으로 글을 남겨보려고 합니다. 제가 힘들때 노력했던.. 스크립트를 더 열심히 공부해야겠다고 마음을 먹었던 계기였어요. input 체크시 원하는 텍스트를 출력하는 방법을 알아보려합니다. input 체크 시 value를 출력하는 간단한 방법이 인터넷에 많이 나타나 있지만, value는 백앤드에서 넘어오는 값으로 되어 있었는데.. 랜덤으로 숫자와문자를 합친 형태였습니다. 619886a13d51db1799238aad 이렇게요, input type도 백앤드에서, value는 619886a13d51db1799238aad 과 같은 코드로 되어 있는 상황이였습니다. pug로 퍼블리싱 진행 하였고 개발은 node.js로 하였습니다. .. 2022. 1. 21.
[그누보드] 항목 중간을 ** 등으로 숨기기 #그누보드 #중간숨기기 안녕하세요. Gi_1입니다. 홈페이지를 만들다 보면, 이름이나 핸드폰번호를 일부러 일반 사용자도 보이게 노출을 시키고 중간을 **로 가리는 경우가 있습니다. 코드 1. 2022. 1. 21.
[그누보드 wr_11~이상 사용, 여분필드] 게시판 커스텀 #그누보드#게시판#여분필드#wr_11 안녕하세요. Gi_1입니다. 그누보드에서는 wr_1 ~ wr_10까지 기본적으로 DB세팅이 되어 있어, HTML코드만 작성하면 게시판 폼 작성이 가능합니다. 하지만, wr_11 이상 사용하고 싶을 때가 있습니다. ( 설문조사, 자원봉사신청, 중고차매매 등.. ) 입력해야할 사항이 많은 게시판이 있죠. 그래서 write.update.skin.php 파일을 통해 DB를 늘리고, 사용해볼 것 입니다. 우선, skin/board/게시판/위치에 write.update.skin.php 파일이 없다면 생성해줍니다. 이후 아래와 같이 작성해주세요. 2022. 1. 21.
[Github] Git과 Github를 사용하기 위한 준비. 토큰생성 #Git#Github#토큰생성#회원가입 안녕하세요 Gi_1입니다. 중소기업에 다니면서 굳이 Git과 Github를 이용할 일이 없었는데요, ( 혼자 만들었기 때문에... ) 이직준비를 하며 Git , Github 시작합니다. 1. Git과 Github란? [Git] - 버전 관리 툴 - 소스코드 수정에 따른 버전을 관리 - 공유, 백업, 관리 : 코드가 수정될 때 마다 어떤 부분이 수정되었고 이전 버전으로 롤백하는 등의 기능 [협업] [Github] - 버전 관리 툴 - 클라우드 - Git으로 저장되어 원격전송된 내역들이 저장되는 공간 2. Github 시작하기 깃허브 홈페이지에 접속하여 오른쪽 상단의 로그인/회원가입을 진행 합니다. 로그인 이후 오른쪽 상단 프로필 -> Settings 접속 Profil.. 2022. 1. 20.
Slick 사용방법 [ 슬라이드 api ] #slick#슬라이드api#간편슬라이드 안녕하세요. Gi_1입니다. 다양하고 간단한 슬라이드를 구현api slick 포스팅입니다. slick은 슬라이드 방향, 속도, arrow버튼, autoplay, dots버튼 등을 간단하게 제어할 수 있습니다. 제가 1년간 퍼블리싱을 하면서 제일 많이 사용한 api이기도 하네요! slick은 jquery기반으로 만들어진 라이브러리이므로 jQuery가 필요합니다. 우선 slick홈페이지에 접속합니다. 오른쪽 상단의 get it now를 클릭 후 다운로드 합니다. slick.min.css파일과 slick.min.js파일을 업로드합니다. 저는 plugins 폴더 안에 넣겠습니다. 기본적인 구조 HTML 1 2 3 script $(function(){ $('.slick-sl.. 2022. 1. 20.
[그누보드 게시판 폼 작성] 게시판 폼 변경하기 #그누보드#게시판폼#게시판커스텀방법 안녕하세요 Gi_1입니다. 그누보드를 이용하다 보면, 설문조사 등 게시판을 커스텀 해야할 때가 많은데, wr_1~wr_10까지는 그누보드에서 기본적으로 제공하여, HTML코드만 일부 작성하면 원하는 데로 사용할 수 있습니다. 1. input - write.skin.php 생년월일* 2022. 1. 20.
[그누보드 최신글] Slick을 이용한 최신글 슬라이드 #그누보드#최신글#slick#최신글슬라이드 안녕하세요. Gi_1입니다. 슬라이드 api slick을 이용한 그누보드 최신글을 알아보려고 합니다. 그누보드 최신글의 경우 2022. 1. 20.
a태그의 href 속성 필터, 클래스 추가 #jquery #location_addClass 안녕하세요 Gi-1 입니다. 홈페이지를 만들다 보면, 서브페이지에 접속 하였을 때 네비바 안의 해당 태그에 클래스명을 추가하는 경우가 많은데요! 페이지별 a태그의 href 속성이 페이지 주소에 포함된다면, 클래스를 추가하는 제이쿼리입니다. 입사하고 1년동안 정말 많이 썼던 코드인거 같네요! 별도로 하단에는, 홈페이지 주소에 따라서 수동으로 클래스명을 추가하는 방법도 올려봅니다. 예제 서브페이지의 "공지사항"에 접속한 상황입니다. 이미 공지사항에 접속해 있다는 것을 사용자에게 알려주기 위해서 공지사항이라 큰 타이틀이 써져있고, 리스트에서 공지사항에만 초록색 밑줄이 그어져 있는걸 확인할 수 있습니다. "복지뉴스"에 접속하면 공지사항에 있는 밑줄은 사라지고, 복.. 2022. 1. 19.

티스토리툴바