김방울

See the Pen practice07 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML CSS @charset "UTF-8"; .imgs{ width: 1000px; height: 350px; position: relative; overflow: hidden; } .imgs > img{ width: 100%; position: absolute; transition: all 1s; } JS // JavaScript Document var now = 0; var img = 2; $('img').eq(0).siblings().hide(); function slide(){ if (now == img){ $('img').eq(now).fadeOut(1000); $('img').eq(..

See the Pen practice06 by KIMBANGUL (@KIMBANGUL) on CodePen. setTimeout, setInterval 타이머, 반복의 취소 - .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. - .text() -> 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장합니다. - .text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( 'Lorem' ); 는 div 요소의 내용을 Lorem로 바꿉니다. HTML 태그는 ..

변수, 함수 기초 1 console.clear(); 콘솔창 초기화 // 프로그램의 2대 구성 요소 // 변수, 함수 var a = 1; console.log(a); // 1 변수에는 오직 하나의 값만 들어갈 수 있음 var => a 라는 변수를 만들겠다. 그 후에는 var를 사용하지 않아도 됨. var a = 5; a = 10; a = 15; a = 20; var a = 5; var a = 10; var a = 15; var a = 20; 는 문법 오류 프로그램은 위에서 아래로 순서대로 작동 변수, 함수 기초 2 // 소스코드 = 소설 // 변수 = 인물 또는 사물 또는 존재(변수는 명사) // 함수 = 인물의 행동 console.clear(); = window.console.clear(); consol..

라이브러리와 프레임워크 라이브러리: 무엇인가 정리정돈돼 있는 곳. 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어들을 잘 정리정돈해놓은, 재사용하기 쉽게 돼 있는 소프트웨어 프레임워크: 우리가 만들고자 하는 것이 있을 때 그것이 무엇이냐에 따라(게임이냐 웹 사이트나 채팅 프로그램이냐에 따라) 언제나 필요한 공통적인 것이 있고, 기획 의도에 따라 달라지는 부분이 있음. 그 중에 공통적인 부분은 프레임워크로 만들어 놓고, 만들고자 하는 기능이나 특성에 따라 달라지는 부분만 살짝살짝 수정하는 방법으로 거의 반제품과 같은 것 jQuery: 자바스크립트 라이브러리 중에서 가장 유명한 것. 제이쿼리 라이브러리를 내려받아 내려받은 파일을 프로젝트 디렉터리로 cdn: content delivery net..

객체의 활용 1. 앞서 작성한 예제 코드 2. Body 변수에 객체 담기 3. 객체에 setColor 프로퍼티 추가 작성한 코드를 재사용하게 되는 것. color.js 파일을 수정하면 모든 웹 페이지에 동시에 변화가 반영. www.evernote.com/l/Alcmnsb33dJL_7GnaOU0aqqraXQ8QpN4_oA/

객체 예고 function nightdayhandler(self) { var target= document.querySelector('body') if (self.value ==='야간 모드') { target.style.backgroundColor='#736D71'; target.style.color='white'; document.querySelector('h1').style.color='yellow'; self.value='주간 모드' var alist = document.querySelectorAll('a'); var i = 0; while (i < alist.length){ alist[i].style.color='#BEF3E8'; i = i + 1; } } else { target.style.b..

함수 예고 함수: 코드가 많아지면 그 코드를 잘 정리정돈하기 위한 도구 함수 1. ex9.html 파일 작성 function basic parameter & argument return 2. 2-1, 2-2가 반복되게 하기 반복문을 쓸 수 없는 경우: 연속적으로 반복되는 것이 아니라 연속되지 않게 반복될 때 3. 반복되는 코드를 함수로 만들기 함수가 등장하기 때문에 function을 적고, 함수의 이름을 웹브라우저에게 알려준다. 여기서는 two. 그리고 중괄호 안에 반복되는, 즉 재사용하고 싶은 코드를 붙여넣음. 4. 반복되는 코드를 함수로 바꾸기 매개변수와 인자 지금까지 살펴본 함수는 자판기에 제품이 하나밖에 없어서 언제나 똑같은 제품을 받을 수 있는 자판기. 원하는 제품을 선택하면 그 제품에 해당하는..

반복문 예고 night 버튼을 클릭하면 태그에 style 속성이 추가되며 'powderblue' 라는 색상이 적용됨. day 버튼을 클릭하면 'blue' 색상이 적용됨. 이렇게 하기 위한 코드가 바로 다음 코드인데, 이 코드의 대략적인 내용은 이 웹 페이지의 모든 태그를 가져온 다음, 태그 하나하나에 대해 반복적으로 powderblue 색상을 적용하는 것. var alist = document.querySelectorAll('a'); var i = 0; while(i < alist.length) { alist[i].style.color='powderblue'; console.log(alist[i]); i=i+1; } 배열 배열: 데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘 수 없기 때문에 데이터 중..