Welcome ! (441) 썸네일형 리스트형 [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{ .. [10일차 연습] 경일게임아카데미 홈페이지 만들기 먼저 레이아웃 잡기 top, haeder 완성 근데 top쪽에 움직이는거는 td 를 썼던데 쓰는법 배우기 *** list가 쭉 올라오는건 어떻게 하즹 imgs 3초마다 변경, 버튼 onclick 설정 snb 완성하기 -> snb 안의 글자가 계쏙 slider 활성화 안되었을 때도 나와서 고생 -> overflow:hidden 하니깐 사라짐 snb> width:100%했는데 오른쪽으로 치우친 이유 ???? '게임 콘텐츠 제작'취업률 1위! 취업현황-[트리노드] 임*진 훈련생 합격을 축하합니다. 정규 개강일-4월4일 월요일 학교소개 교육과정 취업정보 커뮤니티 상담신청 인사말 연혁 교직원소개 시설소개 오시는길 과정안내 취업자인터뷰 취업현황 포트폴리오 공지사항 수강후기 KI이야기 KI기자단 교수칼럼 상담게시판 .. [10일차]20210326 여태까지 배운거 적용해서 경일게임아카데미 홈페이지 만들기 아침 = 어제 움직이는 배너 복습 버튼1 버튼2 버튼3 버튼4 버튼5 JS EVENTS 1. onmouseover 마우스를 올렸을 때 2. onmouseout 해당 영역에서 커서가 빠져나가는 순간 발생 ->커서가 빠졌을 때 (입력할수있는 공간이 ㅇ빠졌을 떄 ) 3. onmousedown 해당 객체의 영역에서 마우스 버튼이 눌려지는 순 ! 간 ! 발생 4. onmouseup 해당 객체의 영역에서 마우스 버튼을 떼는 순간 발생 5. onmousemove 해당 객체의 영역에서 커서가 움직이는 순간 발생 마우스를 올렸다가 땠을 때? -> onmouseleave onmouseover 와 onmouseenter 의 차이 onmouseover-> 자식영역ㄲㅏ지 이벤트 적용 onmouseenter -> 해당 영역까지 .. [9일차 연습]to do list, 움직이는 배너 imgs 1. to do list 복습 JS 부분만 안보고 치기 2번 했는데 2번 틀림 1) delBtn.setAttribute='class', 'delbtn'; (x) -> delBtn.setAttribut=('id','delbtn'); 2) appenChild -> appendChild 3) parentNode 4) delBtn.onclick=function(){ list.removeChild(this.parentNode);} to do list 2. 움직이는 배너 bannerimg.item(i). 을 까먹음 clearInterval(banner) X-> clearInterval(rolling); n=index; X -> index=n; (위치에 ㄸㅏ라서 해석이 달라짐 **) btn1 btn2 btn3 btn.. [9일차]20210325 움직이는 배너 함수 적용 function sum(a, b){ -> a, b -> parameter 매개변수 (함수안으로 매개해주는 변수) document.write(a+b+' '); } sum(2,5); -> 2,5 argument 인자 - 함수로 들어오는 입력값 (입력) 입력 - argument출력 - return 함수에 결과값에 색상 넣기 ===================== 20210325오전 수업 =================================== css3? css = Cascading style sheets 현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 .. [8일차 연습] moving clock, return, document.getElementsByClassName, for, if, getElementsByClassName, Math.floor / Math.random 1. moving clock 만들어 보기 1 2 3 #banner>li 는 html 이 많~~이 복잡할 때 어떤 # or . 의 li 인지 확인해야하기 때문에 ! li=document.querySelecorAll('#banner>li') -> 각 li 를 배열 [0], [1],[2]로 만듬 (Element type 으로!) Hello There Howaya list.removeChild(li) list.appendChild(li) -> 사라진 li 가 다시 append 됨. ( 살짝 이해가 안감........????????) 새로운 li 가 append된게 아니라 제거된 li [0] 가 붙음. 2. 함수, Return return 이 없으면 출력 undefined return은 계산해놓고 나중에 필요할 .. [8일차]20210324 object, 함수 method 직접 찾아 적용하기 오전 : 어제 moving clock 한거 연습 + 이론 수업 앞으로 공부할 때 함수 () 요 안에 어떤 데이터 타입이 나올지 겅부 할것. setInterval(banner,3000); //3초마다 바ㄴ꾼것~ setInterval([],[]); //괄호 안에 1,2,3개 등이 들어갈 때 있음. 안의 값이름 =인자값 // 요 인자값 안에 string, number(int), function 어떤게 들어갈지 ? 아직 잘 모름. typeof () 는 타입을 말해주는듯.. console.log(typeof(sum(1,2,3))); -> undefined 함수의 type은 없대 함수 사용시 보통 return 이라는 것과 배움. 아직 출력하는게 없어서 화면에는 안나옴. -> 3 나옴 핸드폰이라는 객체 안에 5가지 .. [7일차 연습] to do list & moving clock to do list to do list moving clockd 방법 1 111 222 333 방법2 이렇게 간단하다니.....,.,,,.,.,. 나와 짝꿍은 한 30줄 쓰구도 실 패... [7일차]20210323 to do list 삭제 아침 : 어제꺼 복습 + 새로운 거 todo list 삭제버튼 오후 : 복습 + 새로운거 settimeout interval googld 공유폴더에 쌤, 승원님꺼 답 참고 To do list reading books jogging being happy 오늘 아침 자 혼자 만들어본기 엔터치면 입력되게 햇당ㅇㅇ Array 배열 배열.................................[]를 씀 변수선언 너무 많이 해야할 때 -> 배열을 씀 변수를 한번에 묶어서 사용하고 싶을 때 ~ 배열안에서의 length 속성값 : 변수의 갯수를 셈 = 총 개수 변수 [0,1,2,3,4,5] 이렇게 첫째자리는 0~~ , 콤마로 구분함. a=['kim', 'park'] 변수 추가 방법은 a.push(' ') 변수 총 개.. 6일차 공부한 내용 정리 및 복습 -JS 조건문, 반복문, 변수, boolean, 색변경 등등 onclick 은 js만 쓸 수 있는 속성 ================변수 ============variable============================= ================JS 사용하여 버튼 클릭 -> 색상 변경=================== 방법 1 . script에서 변수 설정 -> onclick에서도 연결됨 You will be happy! 방법 2. 변수 설정을 onclick에만 하고 script에 연결 안됨. Here! 방법 3. Onclick 에다가 Document.부터 style까지 쭉 지정. 왜 안되지 다시 ㄱㄱ!!! $$$$$$$$$$$$$$$$$$$$ERROR$$$$$$$$$$$$$$$$$$$$$$$$$$ There! =======================.. 이전 1 ··· 15 16 17 18 19 다음
