기초공사 (html,css,javascript)

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

/* 연습 $(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..

프로젝트 배포하는 방법 WAR란 WebApplication Archive의 약자로 말그대로 웹 어플리케이션 저장소이며 웹 어플리케이션을 압축해 저장해 놓은 파일이라고 생각하시면 됩니다. 개발한 웹어플리케이션 프로젝트가 WASWeb Application Server에서 돌아갈 수 있는 구조를 담고 있으며 JSP 및 서블릿 빈클래스 등의 소스가 컴파일 되어 저장되며 기타 이미지 및 자원들이 포함되어 있습니다. Eclipse > propertise > Deployment 에서 확인 가능한 프로젝트를 구성하는 폴더들이 war 파 일에 담겨있습니다. 검색 WAR(Web Application Archive)파일은 java기반의 웹 애플리케이션을 배포하기 위한 포맷이다. 이 포맷은 Java EE(Enterprise ..