개발

[GitHub] 설치 및 기초

Git 1. Git 이란 ? "형상관리 도구"란 버전 관리 시스템이다. Git은 이러한 형상관리 도구이다. 그래서 작업을 하면서 작업의 리스트를 관리 할수 있다. 2. git의 장점 팀과 협업하는 단계에서 소스코드를 파일로 주고 받을 필요 없이 같은 파일을 팀원들과 동시에 병렬로 작업할 수 있다. A가 작업을 하고 B에게 넘겨준다. A와 B가 메인페이지를 같이 작업하고 있는데 git을 쓰지 않고 파일로 넘겨준다면 시간도 오래걸리고 버그를 잡기 힘들다. git을 쓰는 경우 서버에 서로 푸쉬를 하면 서버에 파일이 자동으로 갱신되서 새로운 팀원이 추가되더라도 클론으로 파일을 내려받아서 바로 작업 투입이 가능하다. 3. git 설치 git 설치 https://git-scm.com/download/win Git ..

[HTML, JavaScript] 정규표현식

정규표현식 정규표현식은 문자검색과 교체에 사용되는 패턴을 제공한다. 자바스크립트에서 RegExp 객체의 문자 함수를 조합해 정규표현식을 사용할 수 있다. let reg = new RegExp('안녕','i'); console.log(reg) 출력 값 : /안녕/i RegExp는 두개의 매개변수가 들어간다. => RegExp( 찾는 문자, 플래그) "/"는 자바스크립트에서 정규표현식을 생성하고 있다는 것을 알려준다. 문자열에서 따옴표를 쓰는것과 같다. 정규표현식을 사용하는 이유 : 이메일 형식인지 체크할 때, 아이디 조건 설정할 때 1. 플래그의 종류 [1] i : 대소문자 구분없이 구별할 수 있다. [2] g : 패턴과 일치하는 모든 것을 찾는다. g가 없으면 일치하는 것에서 첫번째 것만 가져온다. [3..

[JS, HTML, CSS] 이벤트

시작 // 이벤트 함수의 타겟 // 클릭이벤트 window.onclick = function(event){ //event.target은 이벤트가 발생한 요소 //event 태그의 이벤트가 담겨있다. console.log(event.target); event.target; //클래스가 무엇인지로 판단을 해서 이벤트를 적용시킬수도 있다. if(event.target.classList.contains("_target")){ console.log("있어") } //클래스가 무엇인지 가져와서 조건문으로 이벤트를 설정해 줄수 있다. let _class = event.target.className; switch(_class){ case "_target": break; case : break; default: brea..

[HTML, CSS] 이벤트리스너

//이벤트 리스너 //이벤트 리스너 제거 let el = document.createElement("div"); //el에 test클래스 추가 //클래스 여러개 추가 el.className = "test test2 test3"; //el에 id 추가 el.id = "test"; //익명함수를 변수에 담아 놓았다 let onevent = function(){ console.log("난 이벤트") el.removeEventListener("click",onevent); } //el에 이벤트를 추가하는데 이벤트 타입은 click이고 두번째 매개변수 함수는 //onevent 변수에 담긴 익명함수다. el.addEventListener("click",onevent); //removeEventListener 이벤트..

[HTML, JavaScript] 가위바위보, 일정 캘린더 만들기

1. 가위바위보 [1] HTML 주먹 가위 보 게임 시작하기 [2] css body{ height: 100vh; } .background { background-color: blanchedalmond; width: 100%; height: 50%; position: absolute; } #gameStart { text-align: center; width: 200px; height: 50px; position: relative; top: 25%; left: 50%; transform: translate(-50%,-50%); } #leftround button{ width: 100px; height: 50px; position: relative; top: 200px; left: 150px; } [3] Ja..

[JavaScript] 각종 이벤트

1. UI 이벤트 console.log(document.querySelector(".tag")); //load - 페이지와 기타 요소들의 로딩이 완료됬을때 window.onload = function(){ //로드가 완료되고 console.log("페이지가 로드됨"); console.log(document.querySelector(".tag")); } // window.addEventListener("load", function(){ //여기도 로드가 완료되고 실행되는 함수 console.log("페이지가 로드됨2"); }) //어트리뷰트를 사용하거나 //window.addEventListener("이벤트의 타입, 함수")를 사용하여 // 이벤트 핸들러에도 load이벤트를 등록할수 있다. //resize..