조반짝의 도전일지

1.함수 불러오기 함수 만들기 함수를 만들고 함수 변수이름을 밑에다가 써야 화면에 출력된다. 함수를 필요할 때마다 불러오는 것이다. 2. 인명함수: 변수 안에 함수를 정의 let i= 0; let theFun = function(){} 인명함수는 반드시 위에서 변수를 지정해야 결과값이 나온다. 순서가 중요함 let i= 0; let theFun = function(){ i++; document.write("bye"+i," "); } theFun(); theFun(); theFun(); 3.배경색 바꾸기 console에서 보면 숫자대로 컬러이름이 나온다. 변수 i값을 초기화 let i =0; 만약에 i가 4와 같으면 4를 갯수로 변경 >> color.length if( i >= 4) i=0; if(i >=..

내부 css 와 html 마크업하기 usemap으로 #intro 설정, map id = intro로 설정하여 이미지와 맵을 연동한다. 영역 지정 ●area : 영역 지정 shape: 모양 coords : 좌표값 좌표값을 잡으면 포인터커서로 변경된다. 이벤트 넣기: onclick = "window.close();" 라는 명령어를 주면 작은 사각형을 클릭하면 윈도우 창이 닫힌다. 링크에 네이버 주소를 넣고 onclick에 alert 를 넣으면 네이버창이 열린다. target="_blank"는 새창을 열어주는 명령어

●replace : 문자를 다른 문자로 대체해줌

html 마크업 body css edit .move_image css 편집 .move_image 가 움직일 예정이다. ●will-change: 엘리먼트에 대한 변경을 할 것인지를 미리 브라우저에 알려주어 하드에 가부화가 걸리는 것에 대한 도움을 준다. 그림자 만들기 .cursor 편집 커서 만들기 .cursor 이벤트 넣기 jqeury 마우스 이벤트 화살표 커서 지우기 이미지 이동 //이미지이동 $(".move_image").css({"transform":"translate(-50%,-50%) perspective(600px) rotateX("+x+"deg) rotateY("+y+"deg)"}) x, y 변수지정 회전 속도 줄이기 함수를 추가로 넣어주어도 된다. 윈도우의 넓이값 구하기 윈도우의 넓이값에 ..

● break: 조건이 참이면 실행중인 반복문에서 빠져나오는 명령어 언어는 순서에 따라 조건이 달라질 수 있기 때문에 순서를 지켜야한다. ● continue : 조건이 맞으면 아래 명령어를 무시하고 다시 for문으로 올라가서 실행함 중첩 for 문 (구구단) i가 1일 때 k가 3번 돌아감 i가 2일 때 k가 또 3번 돌아감 for(let i=1; i> 1+1 =1 > 2+1 = 3 > 3+1 =4 ..... tr을 누적시켜서 하나의 테이블을 만들 것이다. 태그를 넣을 때는 "" 꺽쇠괄호 안에 넣는다. 열린태그를 닫아주어야한다. console로 확인하면 태그로 표현되어있는 것을 볼 수 있다. //테이블만들기 let num = 1; let t = ""; // 테이블 셋팅 for(let i = 1; i

html mark up css edit h1태그의 가상요소 만들기 폰트어썸 링크걸고 폰트어썸 넣기 폰트어썸 css edit main html mark up article 20개 만들기 article css edit 플러그인 사용 isotope 홈페이지 접속 Isotope · Filter & sort magical layouts (metafizzy.co) Isotope · Filter & sort magical layouts Install Download CDN Link directly to unpkg. Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --s..

html mark up main: 가장중요한 부분을 넣어주는 태그 좌표 만들기 css reset .bottom css edit 배경색: body의 백그라운드 컬러 / 컬러가 지정되어있으면 반드시 넣어야한다. 배경에 사진넣기 .contents css edit .cursor css edit .cursorl.on css edit javascript 마우스 도형 움직이기 윈도우에 있는 마우스를 움직였을 때 이벤트를 발생해라 window.addEventListener("mousemove",e => { }); jqeury : $(). = javascript : document.querySelector() 마우스를 움직였을 때 html의 x값 좌표를 출력해라. 나머지 클래스도 좌표값 넣기 좌표를 마우스도형에 넣어주기..

선택문(Switch-case) 들어오는 변수값이 무엇이냐에 따라 선택해주고 실행하는것 정해져있는 값들을 선택할 때 좋다. 선택문(Switch-case) let 변수; switch(변수){ case 값1 : 실행문1; break; case 값2 : 실행문2; break; case 값3 : 실행문3; break; default : 실행문; } let url에서 작성한 url로 들어갈 수 있는 명령어 if(url){ location.href = url; } 반복문(while) 조건이 만족할 때까지 반복한다. while(조건){ 참; i++; i--; } 조건 : i

html mark up reset css 지정 client: 브라우저 기준으로 잡아주는 마우스 offset: 마우스가 특정 구역에 들어가면 마우스 형태가 바뀜 page:전체 페이지 잡아줄 때 사용 screen:모니터가 기준(0,0) .info css edit ● max-width: 70vw 가장 큰 사이즈 화면에서 70vw를 사용하겠다. cursor 만들기 /* 기준점이 따로 없다 */ .cursor{ position: absolute; top: 100px; left: 100px; width: 50px; height: 50px; border: 3px solid #fff; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; /* 가장 위에 오도..

section이 회전을 해야한다. section에 시간을 줘야 움직이는게 보임 넥스트 버튼을 눌렀을 때 오른쪽에 있는 씨디가 2번, 왼쪽 씨디가 8번째이다. 기준점에서 10vw만큼 떨어져있음 script 제이쿼리는 css, 자바스크립트 style n = 0 변수 지정해준다. n++는 오른쪽 으로 회전 , n--는 왼쪽회전 rotate {n * deg = 0 * 45} deg 45도씩 증감하여 회전한다. 버튼을 누르면 section이 회전한다. 함수지정 on을 갖고 있는 액티브 값을 0으로 변수 지정 0-7번까지 인덱스 번호가 돌아갈 것이다. 회전하면서 8개의 on을 제거할 것이다. index에 들어가있는 번호(선택되어있는 번호)만 on을 넣어줄 것이다. length-1을 넣어 0부터 시작하도록한다. ●함..