공부하자

웹 브라우저의 메뉴바와 툴바, 스크롤바 등이 전혀 포함되지 않은 윈도우 내부 영역 크기이다. window.innerWidth window.innerHeight 기본크기 + 메뉴바 + 툴바 영역 포함된 크기 $(window).width() $(window).height() 기본크기 + 메뉴바 + 툴바 + 스크롤바 영역이 포함된 크기 window.outerWidth window.outerHeight ex. $(document).ready(function(){ var size = $(window).width(); if(size < 760){ document.getElementById("link").setAttribute("onClick", "window.open('https://www.naver.com')")..

참고 페이지 https://pythonq.com/so/javascript/201327 javascript - 활성 메뉴 하이라이트 CSS - IT 툴 넷 기사 출처 javascript html jquery css pythonq.com

유튜브 레이어 팝업 만드는 작업까진 어렵지 않았는데 팝업 닫을 때 문제가 생겼다.. 팝업을 닫는다고 해서 동영상이 멈추진 않음.. 당연한 소리.. 유튜브에서 지원하는 api를 이용하여 다양한 커스텀을 시도 할 수도 있고 https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API Embed a YouTube player in your application. developers.google.com api를 이용한 커스텀이 어렵다면 간단하게 이런 방법도 https://19park.tistory.com/35 javascript youtu..

제이쿼리 append() 메소드 : 제이쿼리의 기본 매소드(함수) 중 하나,append를 통해 가공하거나 추가하거나 할 수 있다. ajax로 데이터를 불러올 때 append 메소드를 응용하여 화면 출력하는 경우가 많다. 문법 $("selector").append() ex. 버튼을 클릭할때마다 button + '카운팅 숫자'가 적힌 박스가 출력되는 예제 $(function(){ var countNum = 0; // 카운팅을 위한 기본 변수 $(".btn").click(function(){ //클릭하면 countNum++; // 증가, 증가 연산자의 위치는 append 뒤에 와도 상관없다. $(".section > ul").append("button"+countNum+"") // .append에 해당되는 부..

제이쿼리 scroll() 이벤트 메소드 : 선택한 요소에서 스크롤을 위,아래로 이동시켰을 때 발생하는 이벤트 메소드 문법 $("selector").scroll(function(){ // code }); ex. $(function(){ $(window).scroll(function(){ // 윈도우(화면)이 스크롤 됐을 때 if($(this).scrollTop() == 0){ // 만약 위치가 0 이라면 $(".btn_top").hide(300); // 300(0.3초)의 속도로 selector를 숨겨라 }else{ // 조건과 맞지 않을 때 $(".btn_top").show(300); // 나타냄 } }); }); 제이쿼리 scrollTop() 이벤트 메소드 :선택한 요소의 수직 위치를 알아내거나 특정값..

제이쿼리 keypress() 이벤트 메소드 : 선택한 요소에서 키보드를 눌렀을 때 발생하는 이벤트, keypress() 외에 keydown(), keyup() 키보드 관련 이벤트 메소드도 있다. - keypress() : selector 에 키보드 자판을 눌렀을 때 발생 (기능키를 제외한 모든 키, F1 ~ F12, Alt, Ctrl) - keydown() : selector 에 키보드 자판을 눌렀을 때 발생 (자판의 모든 키, 한글 제외) - keyup() : selector 에 키보드 자판을 눌렀다 땔 때 발생 문법 $("selector").keypress(function(){ // code }); ex. $(".wrap .ipt").keypress(function(event){ // keypress..

제이쿼리 click 이벤트 메소드 : 클릭 이벤트가 발생했을 때 다양한 효과를 넣을 수 있는 이벤트 메소드 * 이벤트란? 웹 페이지가 응답 할 수있는 모든 방문자의 행동 문법 $("selector").click(function(){ // code }); ex. $(".wrap .box").click(function(){ //click을 햇을 때 $(".wrap .box").animate({ height:"400px", width:"400px" }, 5000); //animate 에도 시간의 개념이 필요하다 }); dbclick() 이벤트 : 더블 클릭에 대한 이벤트 문서 $("selector").dbclick(function(){ //code }); ex. $("p").dblclick(function()..

제이쿼리 animate() 메소드 : 선택한 요소를 설정한 시간동안 애니메이션 처리 문법 $("selector").animate({ // code }, time, 속도); * 속도 : 애니메이션 속도가 빨랐다 느려지거나 느렸다 빨라지는 등 변화를 주고자 할 때 사용, easing 플러그인 연결 시 설정 가능 - linear : 일정 속도 - swing : 속도가 점점 느려진다 cdnjs.com/libraries/jquery-easing jquery-easing - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A jQuery plugin from GSGD to give advanced ..

제이쿼리 setInterval 메소드 : 원하는 시간을 설정하면 해당 시간을 간격으로 설정한 코드가 자동으로 반복 실행 문법 setInterval(function(){ // 반복 실행할 코드 }, time) // 설정 시간 ex. $(function(){ //제이쿼리 실행 호출 var index = 0; setInterval(function(){ $(".section .box").removeClass("on"); //클래스 초기화 $(".section .box").eq(index).addClass("on"); //선택한 태그에 클래스 추가 index++; // 증가 연산자를 이용하여 설정한 time 마다 반응하게끔 작업 if(index == 3){ // 변수가 3이 되었을때(조건문) index = 0; ..

제이쿼리 slideUp, slideDown, slideToggle 메소드 : 슬라이드 애니메이션 효과를 구현해주는 메소드 문법 $("element").slideUp(time); $("element").slideDown(time); $("element").slideToggle(time); 1. $("element").slideUp(time); : 선택한 요소가 서서히 올라가면서 사라지는 효과 ex. $(".wrap .box").slideUp(2000); // 1000 = 1초 2. $("element").slideDown(time); : 선택한 요소가 서서히 내려가면써 나타나는 효과 ex. $(".wrap .box").slideDown(5000); 3. $("element").slideToggle(time..