기초공사 (html,css,javascript)

//js $(function(){ $('.work-section').tabs({ show: { duration: 300 }, hide: { duration: 300 } }); }); //css추가 소스보기 하니 이 클랙스가 추가되어있다. 이 클래스에 적용 work-section .tabs-nav a:hover, /* **19강 추가작성 ui-state-active*/ .work-section .tabs-nav li.ui-state-active a, .work-section .tabs-nav a.active { background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); } /*새로작성 a에 active가 있을때만 삼각형이 보인다. 우리가 해야할거것은 js..

//1718 attr로 구하기 / index로 구하기 *18강 *****index로 구하기 $(function(){ // var tabAnchor = $('.tabs-nav li'), 18강에서는 li로 변수 // tabPanel = $('.tabs-panel'); /* tabAnchor.click(function(e){ e.preventDefault(); //li에 클릭하면 그에 맞는 내용이 와야해.panel이 와야함 $(this).find('a').addClass('active') ; $(this).siblings().find('a').removeClass('active'); tabPanel.hide(); // 순번 인덱스번호로 하면된다. var targetIdx = $(this).index(); c..

css에서는 클래스에 active가 있으면 검정바탕에 흰글씨가 생기고, 삼각형이 나온다. 그러니 내가 할일은;;; js에서 active를 넣었다 뺐다 하면된다. jquery에서는 hide()와 show()로 display:none / display:block로 표현할수 있다. ******************css********************************* /*새로작성 active라는 클래스명이 있으면 검정바탕에 흰글씨*/ .work-section .tabs-nav a:hover, .work-section .tabs-nav a.active { background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); } /*새로작성 a에 active가 ..

/*html body아래에 script가 있으므로 body읽고 script가 읽히기때문에 document할일 안해도 왼다. 바로 변수명 잡는다.*/ var $window = $(window), $mainHeader = $('#main-header'), $defaultLogo = 'images/logo.svg', $smallLogo = 'images/logo-shrink.svg'; /*--> shrink클래스명을 가지고 있지않으면 넣어주고, 가지고 있으면 빼줘라. shrink를 넣다뺐다할거다--->그 후 shrink를 css에서 작성*/ $window.scroll(function(){ if(($window).scrollTop() > 100){ if(!$mainHeader.hasClass('shrink'))..

if문에서만 쓸수있고, toggleClass('open')이 있어야 함 hasClass('open') ==> open클래스를 보여줘라 html소스 $(function(){ var $aside = $('aside'), $button = $aside.find('button'), $duration = 300; /*$button = $('aside button'); 이렇게 쓰면 시간오래걸림 이미 위에 변수를 지정해서 ..큰거부터찾고 find--find(자식..자식..)하는게 빠르다.*/ //버튼을 클릭하면 aside가 나오도록 해주세용 //자바스크릷트에서는 선택자.classList.add='open'; //css에서 aside느 left: -350px; //제이쿼리에서는 클래스명 추가 선택자 //A.addCla..

//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..