eunyo의 it이야기

요즘엔 반응형 웹사이트가 기본이기 때문에 해상도 크기별로 스크립트를 다르게 적용할때가 있습니다. 이때 사용할 수 있는 코드를 알아보겠습니다. 1. window 크기가 768보다 작을 때 스크립트 실행 if($(window).width() < 768) { // window 크기가 768보다 작을때 } else { // window 크기가 768보다 클때 } 2. 창을 줄일때 실행되는 resize $(window).resize(function() { if($(window).width() < 768) { // window 크기가 768보다 작을때 } else { // window 크기가 768보다 클때 } }); resize는 윈도우 창을 줄일 때마다 스크립트가 실행됩니다.

파비콘(favicon)이란? 파비콘이란 웹 브라우저 주소창에 있는 아이콘입니다. 파비콘의 크기는 16x16, 32x32, 48x48x, 64x, 64x가 있으며 8비트, 24비트, 32비트 색상이 가능합니다. 파비콘 만드는 방법 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 우선 파비콘 사이트에 접속합니다. 다음은 파일을 넣어준뒤 Create Fav..

안녕하세요. 오늘은 윈도우 새창을 여는 방법에 대해 알아보겠습니다. 1. window.open을 이용한 방법 보편적으로 사용되는 window open을 이용한 방법입니다. 사용할 button 혹은 a태그에 onClick 이벤트를 넣어주시면 됩니다. 2. 함수를 이용한 방법(듀얼모니터 가운데 정렬) 윈도우 팝업 열기 위의 방법은 함수를 이용한 방법으로, 듀얼모니터에서도 가운데 정렬을 해주는 코드입니다.

안녕하세요. 자바스크립트로 버튼클릭시 이벤트가 실행하는 방법에 대해 알려드리려 합니다. 예제는 버튼 클릭시 alert창이 띄어지는걸로,. 총 3가지 방법이 있습니다. 1. JavaScript를 사용한 방법 버튼 button이라는 아이디의 버튼을 클릭할 시 alert이 띄어지는 예제입니다. 2. HTML의 onClick 속성을 사용한 방법 버튼 run이라는 함수를 할당하여 button에 onClick 속성을 사용한 예제입니다. 3. HTML의 onClick 속성을 사용한 방법2 버튼 위의 방법은 button에 바로 javascript를 바로 사용하는 방식입니다.

안녕하세요. 오늘은 silider 라이브러리인 swiper 슬라이드에 대해 알아보겠습니다. 1. 공식홈페이지 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 위의 링크는 swiper 공식 사이트로 다양한 데모와 사용법을 확인할 수 있습니다. 2. swiper 사용법 [CDN] css와 js를 불러와줍니다. [HTML 기본 구조] Slide 1 Slide 2 Slide 3 위의 소스는 html 기본구조로,..

안녕하세요. 오늘은 f12를 눌렀을 때 발생하는 $ is not defined, jQuery is not defined 오류가 생길 때가 있는데요. $ is not defined, jQuery is not defined 오류가 생기는건 jQuery가 로드되지 않았기 때문입니다. jquery를 다운받아서 추가해주시던지, 아래의 cdn링크를 사용해서 추가해주시면 오류없이 정상 작동하게 됩니다.

안녕하세요. 이번 포스팅은 css을 사용해 텍스트가 넘칠때 ...로 말줄임 처리하는 방법에 대해 알아보도록 하겠습니다. 한 줄 말줄임 처리하기 div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } 여러줄 말줄임 처리하기 { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

안녕하세요. 오늘은 외부 영역 클릭시 div를 숨기는 스크립트를 알아보겠습니다. 보통은 레이어팝업을 구현할 때 많이 사용하는데요. 팝업 외의 영역을 클릭했을 때 사라지도록 많이 사용됩니다. [html] 외부영역 클릭시 이벤트 $(document).mouseup(function (e) { var movewrap = $("div"); if (movewrap.has(e.target).length === 0) { movewrap.hide(); } }); movewrap이라는 변수를 지정해주고, length가 0일때, div를 뜻하는 movewrap을 hide시키는 스크립트입니다.

jquery란? 2006년 존 레신이 출시한 자바스크립트 라이브러리입니다. 간단하게 html의 dom조작과 애니메이션, 이벤트, Ajax까지 다룰 수 있습니다. CDN이란? 라이브러리를 사용할 때 다운로드 받은 파일을 로컬에서 사용하거나, 외부 링크의 주소를 입력하면 됩니다. 이때 웹의 주소를 사용하는 것을 cdn이라고 하며, cdn을 사용하게 되면 사이트 트래픽량을 감소시킬 수 있습니다. CDN 사용방법 상단의 cdn 주소는 구글에서 제공하는 jquery 3.6.0 버전입니다. 상단의 cdn 주소는 jquery 공식 사이트에서 제공하는 제이쿼리 항상 최신 버전을 불러오는 소스입니다.

더보기버튼을 눌렀을때, 숨겨있던 list가 노출되는 소스입니다. 리스트가 전부 노출됬을때 more 버튼이 사라집니다. [HTML] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 MORE [js] $('.list > div').hide(); $(".list > div").slice(0, 5).css("display", "block"); $("#load").click(function(e){ e.preventDefault(); $(".list >div:hidden").slice(0, 5).fadeIn(200).css('display', 'block'); // 클릭시 more 갯수 지저정 if($(".list >div:hidden").length == 0){ // 컨텐츠 남아있는지 확인 $('..