기초공사 (html,css,javascript)

//html에서보면 body위에 script가 있다 body내용들을 다 읽으면 할일 $(function(){ var $duration = 300, $button = $('#buttons2 button'); //button들의 높이 -40, 0 , 40, 80, 120... //버튼들 마다 할일을 자바스크립트 문법으로 작성 //i가 0 = -40, i가 1 = 0, i가2 = 40 /* 자바스크립트로 해보기 var $buttons = 자바스크립트 button선택 var $buttons = document.getElementsByTagName('button'); console.log($buttons); //대괄호 안에 숫자 일일히 바꾸기힘드니 0,1..로 한번에 바꾸기 위해 반복문, // $buttons[0..

//html에서보면 body위에 script가 있다 body내용들을 다 읽으면 할일 $(function(){ var $duration = 300, $button = $('#buttons2 button'); //button들의 높이 -40, 0 , 40, 80, 120... //버튼들 마다 할일을 자바스크립트 문법으로 작성 //i가 0 = -40, i가 1 = 0, i가2 = 40 /* 자바스크립트로 해보기 var $buttons = 자바스크립트 button선택 var $buttons = document.getElementsByTagName('button'); console.log($buttons); // $buttons[0].style.top = -40; // $buttons[1].style.top = ..

//html에서 body시작하기전에 script가 있으니 document가 준비되면 할일 이라고 해야하니. js첫줄에 $(function(){}); $(function(){ var $duration = 300, $image = $('#images p'); //p태그에 마우스를 올리면 첫번째 캡션이 보여야하고, 안보이던 span태그도 보여야한다. animate메서드 /*-**** 첫번째 예시******* 공백이 있으면 = find 공백이 없으면 = filter #images p span{ } --> $image.find('span') #images p.strong{ } --> $image.filter('strong'); */ $image.filter(':nth-child(1)').mouseover(func..

animate의 문법 선택자.stop().anmiate({속성:'값', 속성:'값'}, 시간, 이징, 다른할일); $(function(){ /* 첫번재*****버튼을 누르면 li가 나오게 한다. $('button').click(function(){ $('.menu').css({display:'block'}); }); */ //두번째******* //2. button을 클릭하면animate()메서드를 사용하여 div를 오른쪽으로 250px 이동하세요 /*animate문법 선택자.animate({속성:값, 속성:값}, 시간, 이징, 다른할일);*/ /*2 $('button').click(function(){ $('div').animate({left:'250px'},5000,'easeInOutElastic')..

$(function(){ $('h1').css('color','red'); //실행 지점 제어 - event종류 -mouseover 마우스가 올라왔을 때. // on메서드, bind('click'..--> .on .off으로 바뀌었다.) //$('선택자').on('이벤트 종류', 할일); //.on메서드 //할일 = 임의 함수 = function(){} /*첫번째 $('#typo').on('mouseover', function(){ //아이디 typo의 배경색을 green으로 바꿔라 $('#typo').css('background-color', 'green'); }); //typo mouseover $('#typo').on('mouseout', function(){ $('#typo').css('backg..

/* 연습 $(document).reday(function(){ $('h1').css({'color' : 'red'}); }); _ css에서는 이렇게 표현됨 -css로 풀어쓰고 재해석 1. h1{color:red;} 2. 언더라인 생기게 #typo .inner{text-decoration:underline;} 3. 아래쪽 5px 두께 red css에서는 #typo .inner{border-bottom:5px solid red;}쓴다. 4. 돌려라 #typo .inner{transform: rotate(45deg);} 5. 글씨의 투명돌르 50% #typo .inner{opacity:0.5;} */ _ jquery로 재해석 $(function(){ $('h1').css('color','red'); //c..

*****javascript body 로드되고 할일을 아래처럼 쓴다. //DOMContentLoaded 뜻 body 로드되고 나서 할일. document.addEventListener('DOMContentLoaded', function(){ document.getElementsByTagName('h1')[0].style.color='red'; }); *****jquery body 로드 되고 할 일을 아래처럼 쓴다. // $(document).ready(function(){ // $('h1').css({'color':'red'}) // });---> 아래처럼 간단하게 줄일 수 있다. $(function(){ $('h1').css({'color':'red'}); }); *****소스 쓰는 순서**** 이두개..