전체 글 85

css javascript html 에 연결

head태그안 css href 는 css경로를 넣어준다 javascript defer는 html에 먼저 나오게하고 그 다음 jvavascript를 나오게한다 src에 js경로를 넣어준다 asyn boolean타입의 속성 true로 자동으로 설정한다 웹페이지동작법은 html파일위에서부터아래로 실행된다 asyn(async) 브라우저가 html 다운로드받아서 파싱하다가 js파일 만나면 다운받으라고 명령하고 다시 파싱하다가 js파일이 다운이 다 되었으면 그때 파싱하는 것을 멈추고 다운로드된 js파일을 실행하게된다 장점은 파싱하는동안 다운받아서 다운받는시간 줄일수있다 단점은 js파일이 html 파싱 전에 실행되어서 만약 js파일에서 querySelector 이용해 DOM요소를 조작하려고하면 조작시점에 html의 ..

HTML 2022.03.13

meta

head태그안에 사용 웹페이지의 저자 웹페이지의 내용 요약 검색할때 사용할수있는 키워드 검색분류할수있음 웹페이지에 직접적으로 나오는것은 아니지만 웹페이지에 설명하는역할이다 char - character 문자 set - 집합 charset = 문자의 규칙 utf- 8은 현재 웹페이지를 컴퓨터에 저장할때 utf-8이라는 방식으로 저장 생략시 화면깨짐 인코딩 : 컴퓨터에 저장하는것 디코딩 : 저장되어있는 정보를 꺼내서 화면에 표시하는 과정

HTML 2022.03.13

사용자 정의 이펙트 animate

사용자정의 이펙트 animate 사용자가 직접원하는 이펙트 효과정의 중간대문자 방식으로만 속성명 사용 ex) backgroundColor (0) background-color (X) ainmate //사용자애니메이션 $("#animate").on("click",function () { $("#div_box2").animate({ //css속성과 값(끝날때) opacity : 0, //1다보임 0안보임 width :0, //너비 줄어듬 height :0 //높이 줄어듬 },1000, //진행되는 밀리초 function() { //애니메이션이 끝났을때 실행되는 함수 $("#animate").text("이벤트가끝났음")//버튼이름바꾸기 }); });

JQuery 2022.03.11

이펙트효과제어 .delay() .stop() .finish()

이펙트 효과의 제어 delay 이벤트효과 지연 딜레이 걸리는 위치 시간지연시키고 싶은위치 만약사라지고 싶다면 사라지고 싶은 위치 앞쪽 페이드아웃 //fadeOut $("#fadeout").on("click", function () { $("#fade_p").delay(1000).fadeOut(); //delay는 페이드아웃하기 전 1초기다렸다 실행 }); stop 실행중인 모든 이펙트효과 중지시킨다 finish 실행중인 모든 이펙트효과 중지시킨다 중간과정없이 바로끝낸다 toggle이펙트 효과 버튼입니다 stop finish //slidetoggle $("#slidetoggle").on( "click", function () { $("#div_box").slideToggle(4000); }); //stop..

JQuery 2022.03.11

슬라이드효과 (slide) .slideUp() .slideDown() .slide Toggle

슬라이드 효과 css height 속성값 빠르게 변경하여 표현 .slideUp 선택한요소가 서서히올라가면서 사라진다 .slideDown 선택한요소가 서서히내려가면서 보인다 .slideToggle sildeup 과 slidedown 반복해서 동작한다 밀리초나 "slow" , "fast"등 예약어 전달하여 이펙트효과의 속도조절가능 ex) .slideUp(4000) .slideDown("slow") slideToggle("fast") 슬라이드다운 보이기 슬라이드업 숨기기 슬라이드 토글입니다 슬라이드다운 업입니다 슬라이드토글입니다

JQuery 2022.03.11

페이드효과 (fade) .fadeIn() .fadeOut() .fadeToggle()

페이드효과 해당요소의 CSSopacity 속성값 빠르게 변경하여 표현 .fadeIn() 선택한 opacity 속성을 높여가며 요소를 나타나게한다 .fadeOut() 선택한 opacity 속성을 높여가며 요소를 사라지게한다 .fadeToggle() fadeIn과 fadeOut번갈아가며 적용한다 밀리초나 "slow" , "fast"등 예약어 전달하여 이펙트효과의 속도조절가능 ex) .fadeIn(4000) .fadeOut("slow") .fadeToggle("fast") 페이드 페이드아웃 페이드토글 페이드인아웃입니다 페이드토글입니다

JQuery 2022.03.11

이펙트(effect) 효과 .hide() .show() .toggle()

이펙트효과 기본설정으로 바로 사용할수있다 effect 요소의 표시와 숨김 .hide() 이벤트시 숨긴다 .show() 이벤트시 보이게한다 .toggle() 이벤트시 숨기고 보이게 할수있다 인수로 밀리초 해당숫자나 "slow" , "fast" 전달하여 이펙트효과 속도조절가능 ex) .show(4000) .toggle("slow") show("fast") jQuery head안에 넣어야한다 보이기 숨기기 글자가 보이고 숨겨집니다 토글 이 요소는 div안의 p요소입니다div입니다

JQuery 2022.03.11

jQuery

//js document.querySelector('hello').innerHTML ="바보" //jquery $('.hello').html('바보'); //js document.querySelector('hello').style.color = 'red' //jquery $(.hello').css('color','red') $(선택자).동작함수(); CSS선택자와 동일. 이용해 동작함수사용가능 $제이쿼리접근할수있는 식별자 $생성된요소 = 제이쿼리객체 제이쿼리객체메소드사용하여 여러동작설정 ${document}.read(실행될익명함수function(){}); 자동위에있는코드로 받아드림 위에 것을 줄여서 사용 $(실행될 익명함수 function() {}); 이벤트메소드 addEventListener = on ..

JQuery 2022.03.08