전체 글 (441) 썸네일형 리스트형 [26일차] 20210419 git branch 조금 + Node.js 찍먹 1 교시 git branch git add . git commit git branch git checkout git rebase head git game 복습 learngitbranching.js.org/?locale=ko Learn Git Branching An interactive Git visualization tool to educate and challenge! learngitbranching.js.org 2교시 git branch head = cursor 와 비슷. *이 있는 곳을 바라보고 있다. 맨 마지막을 가리킴. HEAD 가 진짜 원 주인 HEAD 중심 절대경로 - 처음부터 주소를 적어 정확한 파일위치를 작성하는 방법 ex) C:\/document/.... 상대경로 - 내가 있는 곳을 중.. console.log에 달력 출력하기 [Do it! 자바스크립트 입문책 독학 1편] JavsScript Method 메서드 / 기초 연산 문법 / 조건문, if, else, else if, 선택문 switch, 반복문, while, do while, for, break, continue, 중첩for문 Java Script 자바스크립트 기초문법 (연산자, 산술, 대입, 증감, 비교, 논리, 연산자 우선순위, 삼항 조건 연산자) 왜 boolean 안에 값이 없으면 false고 값이 있으면 True 일까? - > boolean은 () 안 "" 빈 문자, 숫자 0,null, undefined 등을 제외한 모든 데이터에 대해 True 를 반환. ex) Boolean(0) false var num1 = 10; var num2 = 3; num1 +=num2; document.write(num1); //13 num1 -=num2; document.write(num1); // 10 num1 *=num2; document.write(num1); // 30 num1 /=num2; document.write(num1); .. Git vs Github 깃트와 기트헙이 뭘까? 둘의 차이점 알아보기 개발 초보자로 처음 git 과 github를 처음 접해보았다. 이름이 비슷해서 헷갈릴 수 있지만 사실 요 두개의 플랫폼(?)의 차이는 꽤 크다. 앞으로 다른 개발자들과의 협업을 하게 되면 반드시 쓰게될 유용한 git & github에 대해 알아보자. 1. git git : Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distribut.. [25일차 zoom 수업] 20210416 github 깃허브 저장소 파일 공유하는 법 수정 후 업데이트 하는 법 git - local - 내 컴퓨터에 설치해야 작동 리눅스 개발할 때 커널 개발할 때 나온거 터미널 명령어 정도는 알아야함 분산 소스 버전 관리 시스템 서버를 분산시켜 구축할 수 있게 하는 소프트웨어 소스코드를 효율적으로 관리할 수 있게 해주는 형상관리 도구 지역 저장소를 만들고 파일, 코드 등을 관리하는 작업 백업 가능 저장했던 시점 기억 저장했던 시점으로 왔다 갔다 할 수 있음. 협업할 때 특히 개발자들 에게 도움 됨.. add - 파일 지정 어떤 파일을 (어따 바구니에넣고) commit -> 저 똥그라미에 넣는 것 ㅇ -ㅇ- ㅇ- ㅇ add를 한 후 commit을 한다~ 안정성이 뛰어남 신뢰성 높음 오류가 날 수 없대 안되면 내 실수래 github - cloud - id로 들어가 git과 연결해서 .. [24일차 수업 연습 ] array.find() , array.filter(), array.map(); array.find(); 는 찾는 값 단 하나를 numbers 로 걍 출력 array.filter(); 는 find 처럼 v==35; 이렇게 특정 하나의 요소를 출력 가능but 배열로 출력됨 Array.map(); [24일차 zoom수업] 20210415 배열 Array 달력 만들기 find method //FIND (Return값이 배열이 아님) 한가지의 원소만 찾아줌. //find= 원소만 찾아서 그 값만 반환~ // Filter -> return값 = 배열 // Find -> return 값 = integer let arr = [4,5,8,7,6,9,10,26,42]; let arr2 = []; arr2 = arr.find((v)=>{ return v==3; }); console.log(arr2); // undefined arr2 = arr.find((v)=>{ return v==3; }); console.log(arr2); // 4 -> arr2 =[];배열로 만들었지만 number로 나옴 //find는 아래와 비슷. a는 배열이었지만.. let a = [1,2,3]; a=3.. [23일차] 20210414 배열 Array 기본 이중배열 배열 Array methos 메서드 arr.push(); ()안에 넣은 값을 배열 뒤에(무조건 맨끝에) 추가적으로 넣기 arr.pop(); 배열의 맨 뒤에 있는 원소(?) 값을 없앰 arr.indexOf(); (찾을요소, 시작위치) 를 넣으면 해당하는 키값을 던져줌 arr.slice(a,b); arr 배열의 a 번째(0부터카운트) 요소부터 b의 바로 전 요소를 slice 함 arr.unshift(); arr 배열 첫 원소로 해당 값을 추가함. (push와 반대) arr.shift(); arr 배열 첫 원소를 삭제함 (pop과 반대) newArray(변수명) = arr.concat(arr2); arr 배열에 arr2 배열을 합치기 (배열 더하기) arr.reverse(); arr 배열의 원소를 거꾸로 돌리.. [23일차] 배열 연습 / 배열 메서드, Array Method / filter, reduce, map, concat, sort, join etc. 블로그 보고 겅부 - 마지막 reduce 각 요소에 주어진 함수를 다 실행하고 한가지 결과값만 반환 한다는 거 이해가 안됨 webruden.tistory.com/69 [2020 최신 ES6+] 자바스크립트 배열 기본부터 응용까지 완벽 정리 자바스크립트로 개발을 하다 보면 배열이라는 자료구조를 접하게 됩니다. 배열이란 무엇일까요? 그리고 배열은 어떤 경우에 사용이 되고 어떤 기능을 가지고 있을까요? 이번 포스팅에서는 배열 webruden.tistory.com ZeroCho의 JS 초급강좌 2-4. 배열 기본 / 4-2. 배열 push pop shift unshift / 4-3. 배열 splice / 5-2. 이차원 배열 / 6-2. 배열 map method / 참고 : 유튜브 ZeroCho TV 배열 : 특수한 개체 , 값 그룹화는 하고 싶지만 속성 이름을 따로 주고 싶지 않을 때 배열 사용 .을 붙이는 순간 객체 중 배열처럼 생각을 함. 1. 배열 기본 2. 배열 push pop shift unshift 배열에서 뽑을 때는 pop - 뒤에서부터 shift - 앞에서부터 배열에 넣을 떄는 push - 앞에서부터 unshift - 뒤에서부터 --> 3. 배열 splice var 바디=document.body; var 숫자후보 = [1,2,3,4,5,6,7,8,9]; var 숫자배열 = []; for (var i=0; i [22일차] 20210413 fiverr slide 슬라이드 배열? 로 바꾸기 업그레이드 시키기 도넛 개수 상자에 넣눈거 답~ 최소의 박스를 구하는게 아닌 맞아 떨어지는 걸로 구하는거 3x a + 5x b = donut 갯수 되게 donut = 21; result = 0; if ( donut%5 == 0){ result = parseInt(donut/5); } else { while(1){ donut -= 3; result +=1; if (donut%5 == 0){ result += parseInt(donut/5); break; } else if(donut { //요 안에 콜백함수, 익명함수(에로함수포함) 들어감 / 첫번째 인자값은 값 ㅇ console.log(ele); }); } window.addEventListener('DOMContentLoaded', init); function init().. [21일차 연습] 1. FLEX 1 2 3 4 5 6 7 display: flex 를 배움! row 하면 수평으로 쭉 column 하면 수직으로 쭉~ flex-wrap:wrap -> 포함된 상태에서 ㄱ ㄱ flex-wrap:nowrap -> 범위를 벗어나도 된다~ 라는 의미 (근데 여기서는 안벗어남 li의 width를 200px; 줬는데 왜징) justify-content:center 하믄 중간 정렬~ float: left; display:inline-block 으로만 하다가 flex 만나니깐 엄청 쉽게 느껴짐 2. 레이아웃 짤 때 팁 ! width class로 주기 + margin: 0 auto; 도! Hello 3. vw, vh vw= view width vh= view height 축소 / 확대 해도 픽셀을 그대로 .. [21일차] 20210412 반응형, 알고리즘, 재귀함수 등 레이어드 팝업 픽셀말고 다른 거 배운댐 display:flex; 신기술ㄹㄹㄹ 선언은 위의 상위영역에 display:flex 주면 됨. li 말고 ul에 줌 FLEX 1 2 3 4 5 6 7 1234567이 옆으로 붙어짐 *{margin:0; padding:0;} ul,li{list-style: none;} .gnb{ width:600px; height:300px; background-color: teal; display:flex; flex-direction:low; } .gnb>li{ width:300px; } .gnb{ width:600px; height:300px; background-color: teal; display:flex; flex-direction:low; flex-wrap:wrap; /*.. 2021.4.11 카페에서 hardware 공부 transform: skew(-6deg, 0); div 기울기 font-style:oblique; 폰트 기울기 oblique 미국∙영국[əˈbliːk] 발음듣기 영국식발음듣기 형용사 1(표현이) 완곡한[에두르는/간접적인] (=indirect) an oblique reference/approach/comment발음듣기 에둘러 가리킴/간접적인 방법/완곡한 논평 2비스듬한, 사선의 [20일차]20210409 fiverr 웹사이트 만들기 마지막 #inspired_wrap{ width:100%; position:relative; height:670px; background-color: lightseagreen; } #inspired_box{ width:1400px; height:575px; margin:0 auto; padding: 96px 32px; position: absolute; box-sizing: border-box; left:50%; transform: translateX(-50%); white-space: nowrap; } white space: nowrap; 기능을하면 박스 안에 contents 가 그대로 박스 밖까지 나옴 nowrap 2가지있는데 1. position dipplay block 형태로 레이아웃을 짤때 white-s.. [19일차] 20210408 fiverr웹사이트 만들기 (inspired 만 남음) Find the perfect freelance services for your business Popular : Web and Mobile Design WordPress Logo Design Dropshipping Fiverr Business Explore English $USD Become a Seller Sign In Graphics & Design Digital Marketing Writing & Translation Video & Animation Music & Audio Programming & Tech Data NEW Business Lifestyle Logo & Brand Identity Logo Design Brand Style Guides Business Cards & Stationer.. [18일차]20210407 fiverr 웹사이트 만들기 (scroll스크롤 이벤트, font 폰트 바꾸기 ) 폰트 -google font 들어가기 저 내용에 html 을 긁어다가 html header 부분에 넣으면 됨 head부분. family=Roboto:wght@100&display=swap" rel="stylesheet"> Hellooooo Helooooooowooo 요로코롬 비교문 에서 0 Start an online business and work from home A complete guide to starting a small business online Digital marketing made easy A practical guide to understand what is digital marketing Create a logo for your business A step-by-step guide.. [17일차] 20210406 fiverr웹페이지 만들기 let state=true; function onandoff(){ keyword=document.querySelector('.keyword'); //변화를 줄 오브젝트 가져오기 if(state){ // true면 keyword.setAttribute('class', 'keyword longer'); //가져온 오브젝트에 변화 후의 오브젝트 클래스 부여 } else{ //true가 아니면 keyword.setAttribute('class', 'keyword'); //원래 모습대로 } state=!state; //true를 false로 바꿔줌 } see more.. see less.. 신우님 공유 - 펼침 on/off 작동 버튼 script 오늘 실수 var index=0; 을 function안에 또 넣음 .. [16일차 연습 ] www.pngmart.com/image/28875/png/28874 Download Full Resolution of Play Button Transparent PNG | PNG Mart www.pngmart.com play button png webclub.tistory.com/619 CSS 2D 트랜스폼(Transforms) transform (변형)은 CSS3에 추가된 기능 중 하나로 2D 의 변형을 말합니다. 변형이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다. 일반적으로 변형(transform) webclub.tistory.com scaleX #marketplace_box>ul>li>a>p:before{ content:""; display:block; wi.. [16일차] 20210405 fiverr 웹사이트 만들기 ul>li>a>p:before{ content:""; display:block; width:20%; height:1px; background:black; animation:m 3s; } @keyframes m{ from{ width:40%; }to{ width: 60%; /* transform: scaleX(3);*/ } } #marketplace_box>ul>li>a:hover>p:before{ background:red; } Fiverr Business Explore English $USD Become a Seller Sign In Find the perfect freelance services for your business Trusted by : Popular professional service.. fiverr 웹사이트 만들기 var index=0; var item = Math.floor(Math.random()*5); hero(item); function hero(n){ ul=document.querySelectorAll('#header_hero_backgrounds>ul'); if(index==ul.length){ index=0; } if(n == undefined){ for(i=0; i logomaker #gnb{ width:100%; height:80px; background-color: paleturquoise; position:fixed; z-index:10; } #gnb_box{ width:1400px; height:80px; background-color: dodgerblue; margin:0 auto; } #g.. [fiverr 웹사이트 만들기] 비디오 태그 참고 k96-ozon.tistory.com/12 #07 HTML 강좌 동영상 넣기, 비디오 태그 안녕하세요 대남이입니다. 지난번 오디오, 음악 넣는법에 대해서 배워봤습니다. 이번에는 동영상을 웹페이지에 삽입하는 방법에 대해 알아보도록 하겠습니다. 브라우저에 영상을 삽입하시고 k96-ozon.tistory.com Fiverr Business Explore English $USD Become a Seller Sign In Find the perfect freelance services for your business Trusted by : Popular professional services Build your brand Logo Design Customize your site WordPress.. [15일차] fiverr 웹사이트, 반응형, 스크롤 아침 : 스크롤 에니메이션, 반응형 웹 오후 : 개인 프로젝트 - 웹사이트 만들기 fiverr 웹사이트 레이아웃 만들기 Header - 안에 gnb new IntersectionObserver 이런 객체를 만든다 ~ 저 객체 안에 여러 기능들이 있다. () => {} == function (){} observer 에게 첫 인자값이 들어가는데 그게 함수 . 스크롤 에니메이션 이해안감~~~~~~~~~~~ if(entry.intersectionRatio>0){ //intersectionRatio -> console.log찍으니 스크롤에 따라 숫자가 바뀜 / 요것의 조건은 -> 0보다 크면 내가 화면 보고있. 0이 되었을 때 class를 지워주기 아래 두개 똑같음 const io = new Intersectio.. [14일차 복습] 변수 선언 var / console.log 로 알아보기 / fiverr 사진 클릭 움직이기 업그레이드 버젼 var index=0; function hello(){ var index=1; console.log(index); } console.log(index) hello(); console.log(index); 0 1 0 var를 쓰면 저 지역 안에서 변수를 선언하는거같음 var index=0; function hello(){ index=1; console.log(index); } console.log(index) hello(); console.log(index); var 없이 index=0; 하면 위의 선언한index 값을 바꿈 0 1 1 index=0; function hello(){ index=1; console.log(index); } console.log(index) hello(); console.lo.. [14일차]20210401 fiverr 사진 움직이기 + 기타 오전 - 객체 설명 수업 (설명위해 한글로 변수명 설정) 객체 만드는법 let obj=new Object(); //객체를 만드는법 1 let obj={}; //객체를 만드는법 2 console.log(obj); console.log(obj2); 이 안에 뭐가있고 ~~~~~~ 객체지향 성격. . 요 쩜을 js는 많이 씀 객췌.... JS 객체 사용방법만 알면 어렵지않을것.. Hello 메롱 복습 ========================어제 공부하다 몰랐던 거 질문 ================ //var index였다면 메모리에 인덱스 사용할게~ .. var가없으면 이전에 선언했던 var의 메모리를 사용 var 선언은 메모리 잡아먹음 var를 안선언하면 이미 선언되었던 그 메모리를 사용하는 것 몇이 나.. [13일차 복습] JavaScript 함수, 객체 , 배열 연습 var index=10; function hello(){ var index=0; console.log(index); } index++; hello(); console.log(index); hello(); 0 11 0 for(i=0; i [13일차]20210331 var, let, const ,객체 공부 정사각형, 피라미드 별 만들기 1교시 수업 0 10 0 000 0 11 0 0 0 0 ========================================================================== for(i=0; i [12일차 복습] JavaScript 기초 문법 연습 console 값 => 아무것도 안나옴. -> a 나옴 for(i=1; i 이전 1 ··· 12 13 14 15 16 다음
