본문 바로가기

Dev/script43

jquery로 페이지 상단으로 부드럽게 이동하는 탑 스크롤 버튼 만들기 보통 탑스크롤이라고 부르는 버튼인데요. 흔한 방식이지만, 가끔 떠 오르지 않아서 검색하시는 분들을 위해 올려둡니다. 뭐~ 저도 가끔은 까먹어서 다시 생각해내는 일 없이 떠다 쓰려공.... /* top 스크롤 */ var speed = 500; $("a.top").css("cursor", "pointer").click(function(){ $('body, html').animate(, speed); }); speed 변수는 스크롤이 애니메이트 되어서 이동하는 속도를 지정해줬습니다. 귀찮으면 그냥 변수 쓰지 말고 숫자로 바로 써도 됩니다. . css("cursor, "pointer")는 생략해도 무방하며, css자체에 a.top { cursor:pointer}로 작성해두어도 무방합니다. 실질적인 핵심은 $(.. 2021. 3. 5.
jquery hover function 사용 예 제이쿼리 이벤트 중에서 꽤 흔하게 사용되는 이벤트 메소드가 바로 hover다. 특정 엘러먼트 위에 마우스가 위치하거나 벗어났을 때의 이벤트를 정의한다. 자바스크립트의 mouseenter, mouserover를 한 번에 제어할 수 있다. CSS의 :hover 선택자를 이용한 것과 같은 이벤트를 타기 때문에, 키보드로 앵커에 위치했을 때는 동작하지 않는다. jquery hover function 사용 예 $(document).ready(function(){ //2depth menu showing when menu is collapsed var hoverMenu = $('.lnb .lnb1depth >li'); hoverMenu.hover( function () { var menuInitH = $('#menu.. 2021. 1. 18.
location.href과 split()함수로 이미지 변경하기 실제로 홈페이지를 개발하게 되면, 퍼블리싱과는 별개로 개발언어가 입혀지는 경우에 한 개의 소스 페이지로 파라미터 값을 달리해서 다른 메뉴를 구성하게 되는 경우가 종종 있다. 2015.03.26 01:30 이럴 때 특정 이미지 혹은 특정 코드만 다르게 보여져야 하는 경우 개발자를 귀찮게 하기 싫으면 location.href를 이용하면 편리하다. 예시로 들 사이트는 종로구시설관리공단인데, 유지보수 의뢰로 담당부서의 전화번호를 페이지에 삽입해 달라는 의뢰가 들어왔다. 개발자들이 바쁜 관계로 개발을 거치지 않고 UI단에서만 처리한 소스이다. http://www.ijongno.co.kr/front/main/11 종로구시설관리공단 www.ijongno.co.kr 문화체육시설, 종로구민회관, 종로문화체육센터, 동무여.. 2021. 1. 4.
[웹접근성] jquery checked checkbox radio 체크 유무, 선택된 값 가져오기 제이쿼리 체크박스 개수체크 소스 웹접근성을 고려한 jQuery를 활용한 체크박스와 라디오 버튼 처리 개요 이번 포스트에서는 웹 접근성을 준수하면서 jQuery를 활용하여 라디오 버튼과 체크박스를 처리하는 방법에 대해 알아보겠습니다. 웹 접근성을 고려하면서 사용자가 오류 발생 시 알림을 받고 해당 입력 폼으로 포커스를 이동시키는 방법을 예제를 통해 살펴보겠습니다. 예제 소개 오늘은 강동구립통합도서관 회원가입 페이지에서 라디오 버튼과 체크박스를 사용한 예제를 다루겠습니다. 사용자가 약관 동의와 개인정보 처리 방침 동의를 선택할 때, jQuery를 사용하여 선택 여부와 포커스 이동을 처리하는 방법을 살펴보겠습니다. 예제 코드 설명 아래는 사용된 라디오 버튼과 체크박스의 예제 코드입니다. 통합회원 구립도서관회원 작은도서관회원 회원 약관에 동의.. 2021. 1. 3.
[javascript] 자바스크립트로 rgb 색상표 출력하기 html rgb색상 코드표 만들기 자바스크립트로 RGB 색상표 출력하기: HTML RGB 색상 코드표 만들기 서론 RGB 색상 코드는 다양한 컬러를 표현하는 데 사용되는 중요한 개념입니다. 컴퓨터는 이 코드를 이해하기 위해 옥텟(Octet) 단위로 해석하며, 이는 8비트로 이루어진 데이터 묶음을 나타냅니다. 이러한 옥텟은 실제로 우리가 흔히 알고 있는 10진수 형식인 0부터 255까지의 값을 가지게 됩니다. RGB 색상 코드의 구성 RGB 색상 코드는 세 개의 옥텟으로 구성되며, 각각은 빨강(R), 녹색(G), 파랑(B)의 색상을 나타냅니다. 각 옥텟은 0부터 255까지의 값을 가질 수 있으며, 0은 해당 색상의 최소 빛의 양을 의미하고, 255는 해당 색상의 최대 빛의 양을 의미합니다. 예를 들어, #000000은 검은색을 나타내며, .. 2021. 1. 1.
제이쿼리 체크박스 체크 여부 확인 및 제어 jquery checkbox checked 제이쿼리 체크박스 체크 여부 확인 및 제어 jquery checkbox checked 제이쿼리 체크박스 checked 여부 확인 $("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */ $("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */ checked/unchecked 처리 $("input:checkbox[id='ID']").prop("checked", true); /* by ID */ $("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */ 전체선택 체크박스를 선택하면 그 아래.. 2020. 12. 3.
jquery animate 사용예 jquery animate 사용예 .animate() 함수를 이용하면 html Element 상의 객체 움직임을 부여할 수 있다. 반드시 CSS 속성 맵 데이터와 함께 사용한다. 움직임에 관련된 속성들은 단수 수치 값(single numeric value)을 이용한다. 즉, width, height, left, margin 등에 이용할 수 있지만 color같은 값에는 사용할 수 없다. .animate( properties [, duration] [, easing] [, complete] ) Returns : jQuery Duration은 지속시간이며, complete에는 콜백 함수를 지정해서, 애니메이션 동작 이후 함수를 실행할 수 있다. 단, 이 함수에는 인자값을 넘겨 줄 수는 없다. .animate(.. 2020. 11. 11.
Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 서론 Jquery 스와이퍼 슬라이더 플러그인인 idangerous.swiper.js를 사용하면 모바일 기기에서 손쉽게 슬라이드를 터치하여 내용을 넘길 수 있습니다. 그러나 이 플러그인의 페이징 처리 기능은 주로 숫자나 불릿 형태로 페이지를 표시하며, 텍스트 문장으로 페이지네이션을 설정하는 기능은 기본적으로 제공되지 않습니다. 이에 대한 요구사항이 있을 때, 플러그인의 코어를 수정하지 않고도 텍스트 문장을 이용한 페이지네이션을 구현할 수 있습니다. 이 글에서는 이러한 요구사항을 충족시키기 위한 해결책을 제시하고자 합니다. 해결책: 페이지네이션 텍스트 문장으로 변경하기 페이지네이션을 텍스트 문장으.. 2020. 11. 3.
img 태그 404 Error시에 대체 이미지 띄우기 img 태그 404 Error가 발생하면 대체 이미지를 띄우는 것은 쉽다. 아니 처음부터 그렇게 만들면 별로 걱정할 문제는 아니다. 그리고 대체로 레이아웃을 구성하는 이미지는 bg속성을 준 스타일을 먹이는 경우가 대부분이므로, bg가 깔리지 않으면 스타일만 변경해 주면 된다. 그 이외의 레이아웃을 구성하는 이미지 요소들도 마찬가지로 처리하면 된다. 문제는 게시판이나, 갤러리 등 다수 사용자 빌런 그룹이 존재하지 않는 이미지를 올리거나, 올렸던 이미지 소스 주소가 없어진 경우에 발생하는 이미지 에러 문제는 보통 다음과 같이 해결해 주어야 한다. 그런데 앞서도 지적했지만 게시판에 이미지를 불펌해다 붙이는 사용자들이 친절하게 html태그를 열어서 대체 이미지 주소를 입력하는 attr을 집어넣기를 바라는 것은 .. 2020. 10. 26.
자바스크립트 onresize 이벤트 창크기 변경 감지 자바스크립트의 onresize 이벤트 창의 크기가 변경될 때마다 그 것(이벤트)을 감지해서 특정 처리를 해야 될 때 늘 onresize 이벤트를 활용할 수 있다. Syntax HTML Attribute Event Property object.onresize = handler; attachEvent Method object.attachEvent("onresize", handler) http://msdn.microsoft.com/en-us/library/ms536959(VS.85).aspx onresize 이벤트를 적용가능한 엘레멘트는 window 객체 뿐만 아니라 다음의 객체들에도 적용이 가능하다. A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE.. 2020. 10. 23.
썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 썸네일이나 대표이미지의 가로 세로 비율이 고정된 영역에 다양한 이미지의 가로세로 비율이 다를 때, 해당 영역의 크기에 딱 맞춰서 넘치는 영역은 잘려 보이게 하는 것은 조금 복잡하다. 이미지 자체만으로 하려면 서버에서 자체적으로 이미지를 해당 비율에 맞춰서 잘라 주어야 하겠지만, 원본 소스를 유지한체 스타일시트 CSS만으로 해결하려면 어려움이 따른다. 이미지가 세로가 긴 포트레이트일 수도 있고, 가로가 긴 랜드스케이프일 수도 있기 때문이다. CSS는 자체적으로 어느 쪽이 긴 지 알 수 없다. SCSS.. 2020. 10. 11.
제이쿼리 팁 특정 태그에 CSS 적용 jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 크롬/IE color 해석 방식 차이 [제이쿼리 팁] 워드프레스 포스팅 글 내용 중 특정 태그에 CSS를 적용하라 크롬/IE color 해석 방식 차이. jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 요즘 특허 사이트의 콘텐츠용 사이트를 의뢰받아서 워드프레스로 제작 중인데요. 워드프레스 적용 자체는 별 것 아닌 작업이지만, 우리의 까다로운 클라이언트님의 소소한 요청이 워드프레스나 워드프레스 테마의 PHP를 건드리지 않고, 원하는 모양을 만들어 달라는 고난도 요청이 좀 많다. 이 번 요청은 이미 클라이언트가 작성해 둔 글 내용에서 링크들을 특정 모양을 "디자인 스타일대로 CSS를 입혀라"라는 미션입니다. 단! 제한 조건은 클라이언트는 html이나 css에 대해 전혀 모르고.. 2020. 10. 3.

티스토리툴바