블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기 (184) 썸네일형 리스트형 [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; /*.. [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 [12일차]20210330 경일홈페이지 취업자인터뷰 버튼만들기 / 조건문, 반복문, 함수 function기초 복습 오전 - 경일홈페이지 취업자인터뷰 버튼만들기 .................... 인자값 = 매개변수 도통 어렵다.. AA ===================구글에 올라온 버튼 누르기 소스 =============================== 집가서 해보기..... 취업자인터뷰 글자 내용 1 글자 내용 2 글자 내용 3 글자 내용 4 < > var index = 0; var beNum = 1; var rolling = null; function slider(type,currentIndex,newIndex){ flag = true; li = document.querySelectorAll('.interview_content > li'); intBtn = document.querySelectorAl.. [11일차 연습] 움직이는 이미지 overflow:hidden, Java script 취업자인터뷰 내용이다1 내용이다2 내용이다3 내용이다4 -> JS for구문 var a 변수를 만들지 않고 for(i=0; ili{ position:absolute; top:0; display:none; } .interview_content>li>img{ width:238px; height:158px; } .interview_content>li.in{ display:block; animation:slider1 1s; animation-fill-mode: forwards; } @keyframes slider1{ from{left:238px;}to{left:0;} } .interview_content>li.out{ display:block; animation:slider2 1s; animation-fill-.. [11일차]20210329 경일홈페이지 취업자인터뷰 이미지 왼쪽으로 움직이기 + 블록체인 특강 아침 : 과제 점검 + 경일홈페이지 취업자인터뷰 공부 오후 : 블록체인 특강 얘가 마진 0auto 줄수잇는 wrap 활용 /* CSS Style sheet */ *{margin:0;padding:0;} ul,li{list-style: none;} a{text-decoration: none;} img{display:block;line-height:0;} #wrap{ width:100% } #header_wrap{ width:100%; /*height:300px; 얘를 없애야 visual_wrap 이 absolute 이 작동*/ background:red; } #header{ width:1200px; margin:0 auto; height:100px; background: blue; } #snb_wrap{ .. 이전 1 ··· 4 5 6 7 8 다음
