자바스크립트 (51) 썸네일형 리스트형 210112 완전 심플 슬라이더1 구글에 carousel slider plugin 등등 조합해서 검색하면 굳이 안 만들어도 사용이 쉽고 간편하고 예쁜 슬라이더 많다. 그럼에도 굳이 만들어 쓰는건 아주 간단한 코드로 내가 나중에 다시 봐도 헷갈리지 않고 필요한 거 수정 변경해서 쓰고 싶기 때문이다. 이 슬라이더는 좌, 우 버튼 두 개(클래스명 slider_li 인 ul 내부에 있는 span 안의 '')를 클릭해서 슬라이드를 이동하는 형태의 슬라이더. wrapper 안에 같은 형태의 ul, li에 class 이름을 같게 하고 id를 다르게 줘서 구분하면 추가 슬라이더를 넣을 수 있음(기능 자체와 관련해서 id 값은 상관 없음. 없어도 됨). 아래 HTML 코드에서 Abc 부분에 텍스트를 넣거나 이미지 태그를 써서 이미지를 넣어줘도 되고. 그.. 201221 One page scroll plugin panelsnap 원 페이지 스크롤 중 무료 제공되는 panelsnap 이라는 걸 써봤다. 한 번 스크롤 다운 끝까지 다 내려가면 그 뒤로 에러가 난다. 효과 적용이 되는 section 구역이 끝나면 오류가 생기는 거 같다. 나중에 또 쓰고 싶을 수 있으니까 일단 그누보드에 작업했던거 올려 놓기. 각 section 마다 배경 다르게 하려고 해서 각 아이디 따로 한 것. 아니면 그냥 다 section 에 스타일시트 작성해도 됨. panelSelector 라고 되어 있는 부분 없어도 효과 들어감. 201217 상단 메뉴 스크롤 다운 배경색 바꾸기 되네 신기하다. 상단에 고정 시킨 메뉴의 배경색을 스크롤 다운하면 흰색으로 바꿈. JS 추가 CSS 추가 출처 : stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling 201215 구글 애널리틱스 사용할 사이트의 모든 페이지에 gatg.js 를 심어야 함. head 파일에 심으면 됨. 자세히 알아보기 자세히 알아보기에 들어가면 구글 애널리틱스에서 제공하는 관련 내용을 볼 수 있다. 200311 이메일 뒷 부분(주소 부분) 클릭시 텍스트 들어가도록 @ > 200325 상단 이동 버튼 그누보드5에 들어 있는 것 카피. 그누보드 짱이야. 상단으로 출처 : sir.kr/main/g5/ 200325 jquery 상에서 미디어쿼리:마우스로 브라우저 너비 조절에 따라 반응 브라우저를 마우스로 너비 조절 할 때마다 브라우저 너비 체크해서 css 바꿔줄려고 이렇게도 해봤다. chk = window.matchMedia("(max-width: 1000px)"); $( window ).resize(function() { if (chk.matches) { $('.icon').show(); $('.wrap').hide(); } else { $('.icon').hide(); $('.wrap').show(); } }); 200304 js 에서 php 값 사용 190716 jquery cookie plugin 보안 이슈로 쿠키 사용 방법도 바뀌었다함. jquery plugin 사용. 엄청 간단해졌다. https://plugins.jquery.com/cookie/ 가서 오른쪽 박스에 Download Now! 버젼 정보 기록되어 있는 본문 부분에서 다운로드 못 찾아서 겁나 헤맸다ㅋㅋ //SET COOKIE $.cookie('summer', tmp_index, { expires: 7 }); //GET COOKIE $.cookie('summer') 190509 jquery nextAll() $( 'span.mrQuestionText' ).nextAll().css( 'background-color', 'red' ); $( 'span.mrQuestionText' ).nextAll('span').css( 'background-color', 'red' ); 중 .mrQuestionText 라는 클래스를 가지고 있는 애를 찾는다. 그리고 그 뒤에 있는 모든 것에 배경색 적용. nextAll() 괄호 사이에 아무 것도 없으면 그 클래스 뒤의 모든 요소들에 영향을 준다. 만약에 해당 클래스 뒤의 내용들 중 특정 요소에만 영향을 주고 싶으면 nextAll() 안에다가 요소 지정. 이전 1 2 3 4 5 6 다음
