본문 바로가기

Dev/script42

jQuery 선택자 함수 slice() - 시작부터 끝까지 인덱스 일부만 선택하기 jQuery 선택자 함수 slice() - 시작부터 끝까지 인덱스 일부만 선택하기 소개 노트: 1번부터 10번까지 형제 요소들이 있을 때, 특정 범위의 요소만 선택하여 jQuery를 사용하여 동작을 적용하고자 할 때, jQuery slice() 메서드가 유용합니다. 이 메서드는 주어진 선택자에서 일부 요소를 선택하는데 사용됩니다. 아래에서는 이 메서드의 사용법과 활용 예제를 설명하겠습니다. 사용법 slice() 메서드는 다음과 같은 형식으로 사용됩니다: $('selector').slice(start, end).addClass('newClass'); 이 메서드를 실행하면 선택한 요소 중에서 start부터 end까지의 요소가 선택되고, addClass 함수를 사용하여 해당 요소에 'newClass'라는 클래.. 2023. 9. 7.
Tippy.js, Popper.js 사용법 tooltip 툴팁 예제 Popper.js를 활용한 툴팁 구현 방법 안녕하세요, 여러분! 오늘은 다양한 기능을 제공하는 툴팁(tooltip)을 소개하려고 합니다. 툴팁은 웹 애플리케이션에서 매우 유용한 기능 중 하나로, 사용자에게 추가 정보를 제공하거나 설명을 더하는 데 도움을 줄 수 있습니다. 이번 포스팅에서는 무료 라이브러리인 Popper.js를 활용하여 툴팁을 어떻게 구현할 수 있는지 알아보겠습니다. 소개: Popper.js와 툴팁 Popper.js는 툴팁 및 팝오버(popover)를 최적의 위치에 놓을 수 있도록 도와주는 라이브러리입니다. 툴팁을 정확하게 원하는 위치에 배치하는 것은 꽤 복잡한 작업일 수 있습니다. Popper.js는 이런 어려움을 더욱 쉽게 해결할 수 있도록 도와줍니다. 또한 이 라이브러리는 부트스트랩과.. 2023. 9. 2.
자바스크립트로 RGB 색상표 만들기 자바스크립트로 RGB 색상표 만들기 서문 RGB색상 코드는 주로 rgb(255, 255, 255)나 #FFFFFF와 같이 사용되며, 이는 컴퓨터가 이해하는 2진수로 변환되어 처리됩니다. 이러한 코드는 색상의 빛의 정도를 나타내는 옥텟(Octet) 단위로 표현되며, 이를 이용하여 다양한 색상을 표현할 수 있습니다. 옥텟과 컬러 표현 각각의 옥텟은 8비트로 구성되어 있으며, 첫 번째 옥텟은 빨간색(R), 두 번째 옥텟은 초록색(G), 세 번째 옥텟은 파란색(B)을 나타냅니다. 이 세 가지 색상의 빛의 정도를 0부터 255까지의 숫자로 표현합니다. 0은 해당 색상의 빛이 꺼진 상태를 나타내며, 255는 최대한 밝은 상태를 의미합니다. 따라서, 예를 들어 #000000은 검은색, #FFFFFF는 흰색을 나타냅니.. 2023. 8. 31.
Button scss hover not working 원인과 예제 SASS SCSS :hover 예제와 동작하지 않는 사례 - 원인과 해법 서론 SASS(SCSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 함수 등을 사용하여 스타일시트 작성을 간편하고 효율적으로 만들어줍니다. 그리고 :hover는 웹 개발에서 자주 사용되는 유용한 CSS 의사 클래스 중 하나입니다. 하지만 때때로, SASS(SCSS)를 사용할 때 :hover가 원하는 대로 동작하지 않는 사례들이 있습니다. 이러한 문제들을 해결하는 방법과 함께, :hover를 SASS(SCSS)에서 사용하는 예제들을 살펴보겠습니다. :hover 사용 예제 먼저, 간단한 예제를 통해 :hover를 SASS(SCSS)에서 어떻게 사용하는지 살펴보겠습니다. // SCSS .button { background-color:.. 2023. 8. 9.
jQuery Javascript navigator.useragent 모바일 크롬 pc android os ios ipad check 방법과 예제 jQuery Javascript navigator.useragent 모바일 크롬 PC Android OS iOS iPad 체크 방법과 예제 서론 웹 개발을 하다 보면 사용자의 기기와 운영체제에 따라 다르게 동작해야 할 때가 있습니다. 특히 모바일 기기와 PC 간에는 화면 크기와 기능의 차이로 인해 웹 페이지를 다르게 제공해야 할 때가 많습니다. 이러한 상황에서 사용자의 기기 정보를 알아내는 것은 매우 중요합니다. 이번 블로그 포스트에서는 jQuery와 JavaScript를 사용하여 사용자의 기기 정보를 어떻게 확인할 수 있는지 알아보겠습니다. jQuery와 JavaScript로 navigator.useragent 확인하기 navigator.useragent는 사용자의 브라우저와 운영체제 정보를 담고 있는.. 2023. 8. 7.
[자바스크립트/jQuery] input checkbox name값, value 값으로 체크하기 자바스크립트/jQuery로 Input checkbox를 Name과 Value 값으로 체크하기 소개 이 블로그 포스팅은 자바스크립트와 jQuery를 이용하여 HTML 입력 폼인 input checkbox의 Name과 Value 값으로 체크하는 방법에 대해 설명합니다. 일반적으로 체크박스를 생성할 때는 동일한 Name을 가진 여러 개의 값을 저장해야 할 때가 있습니다. 이때, 배열로 값을 저장하는 방법이 자주 사용됩니다. 하지만 이렇게 저장된 값을 불러와 체크박스를 선택하는 것은 조금 까다로울 수 있습니다. 하지만 Name과 Value를 동시에 사용하여 체크박스를 선택하는 방법을 알면 간단하게 처리할 수 있습니다. 본문 Name과 Value 값으로 체크박스 선택하기 - JQuery 보통 체크박스를 생성할 때.. 2023. 7. 29.
안드로이드 html 웹뷰 Javascript 모바일 웹 주소창 없애기 / 모바일 크롬 브라우저 테마 색상 변경 색깔 주소창이 꼴 보기 싫은 것도 아닌데 모바일의 작은 화면으로 보자니 그 1cm도 아까운가 보다. 아? 아닌가? 아무튼... 흠흠. 모바일웹은 현대인에게 필수인데, 초보 제작자에게는 고민인 부분이다. 분명 필요해서 보이게 해 놨을 텐데, 미적 감각으로 '크롬 모바일 주소창 없애기', '모바일 브라우저 주소창', '웹앱 주소창 없애기', 'Javascript 브라우저 주소창 없애기', '안드로이드 주소창 숨기기', 'Html 주소창 없애기' 검색이 많다. 일단, 앱 개발자들은 웹뷰에서 주소창이 사라지기를 바라는 것이겠고, 모바일웹 개발자들은 모바일웹 화면에서 1cm라도 더 화면을 넓게 보여주기 위해서 모바일 주소창 자동숨김이 일어나기를 바라는 것일 것이다. 대체로 안드로이드 폰에서는 모바일 크롬에서 javas.. 2023. 7. 10.
.on(click) 메소드 jquery .click 이벤트 여러개 클릭 2개 이상 다중event 부모에게 전파 중지 .preventDefault() .stopPropagation() .stopImmediatePropagation() 자바스크립트 jQuery 이벤트 바인딩과 그 외의 메소드들 안녕하세요, 여러분! 오늘은 이벤트 바인딩과 관련된 메소드들에 대해 자세히 살펴볼 것입니다. 이벤트 바인딩이란 특정 HTML 요소에서 일어나는 행동에 대해 반응하도록 코드를 작성하는 것인데요. 이벤트 핸들러라는 함수를 작성하고 이것을 요소에 연결하는 것을 말합니다. 이벤트 바인딩의 변천사 jQuery가 발전함에 따라 이벤트를 처리하는 방법도 변해왔습니다. 초기의 jQuery 1.0에서는 .bind() 메소드를 사용하여 이벤트 핸들러를 등록했고, 그 이후 .live() 메소드와 .delegate() 메소드를 거쳐 현재는 .on() 메소드를 주로 사용하게 되었습니다. .on() 메소드는 jQuery 1.7부터 소개되었으며, 이전에 사용되던 .bind()나 .cl.. 2023. 7. 6.
일용직 소득세 계산 방법 2023년 근로소득 세율 간이세액표 갑근세 조견표 자바스크립트 계산기 2023년 근로소득 세율 변동 사항과 근로 소득세 계산 방법 매년 신경 써야 하는 주제, 바로 '소득세'에 대해 이야기해 볼까 합니다. 2023년 근로소득 세율 변동이 있었는데요, 이에 대한 내용을 잘 이해하고 적절하게 대처할 수 있도록 함께 알아봅시다. 2023년 소득세법 개정 소식 우선, 앞서 말한 2023년 소득세법 개정 소식부터 알려드리겠습니다. 그 변동 사항 중 가장 중요한 부분은 근로소득 세율의 일부 구간 변동입니다. 기존에 6%의 세율이 적용되던 과세표준액 구간이 1200만 원에서 1400만 원으로 확대되었습니다. 또한, 24% 세율 구간도 4600만 원 초과에서 5천만 원 초과로 변경되었습니다. 이 두 가지 변동 사항은 실질적으로 일반 근로자들의 세금 부담을 줄이는 효과가 있습니다. 그러나.. 2023. 7. 4.
자바스크립트 브라우저 언어 추출 체크 방법 JAVASCRIPT FOR DETECTING BROWSER LANGUAGE 현재 브라우저 언어 설정값을 가져오는 방법에는 IE와 비 IE(파폭, 크롬 등등)의 차이가 있습니다. IE의 navigator객체에는 systemLanguage, userLanguage, browserLanguage 가 있어 마치 브라우저 언어를 보여줄 것 같지만, 전혀 그렇지 않아 사람을 혼란에 빠트리죠. 혼란을 주는 IE전용 속성 navigator.userLanguage OS의 제어판 – 국가 및 언어 – 입력 언어를 나타낸다. navigator.browserLanguage, navigator.systemLanguage OS의 제어판 – 국가 및 언어 – 표시 언어의 반환한다.(browserLanguage와 systemLanguage의 차이는 발견하지 못했다.) 모두 OS 언어 설정과 연관되어있다 $.. 2021. 7. 21.
jquery .sort() 요소 이동하면서 제이쿼리 소트 정렬하기 jquery .sort() 요소 이동하면서 제이쿼리 소트 정렬하기 부서나 트리구조의 UL, OL의 LI요소를 다른 UL로 이동하고자 할 때 이동한 후 소팅 정렬 되도록 할 때 jquery .sort() 함수는 요긴하게 사용된다. 다음과 같이 부서 목록에서 특정 부서를 선택해서 선택된 부서로 옮기려고 할 때 순서대로 정렬하는 구조의 제이쿼리를 짜보자. 먼저 복사 이동은 클릭 이벤트 발생과 동시에 .appendTo() 함수로 이동된다. appendTo 함수가 두번 사용된 것은 선택된 부서의 목록에서 클릭 이벤트는 부서 목록으로 다시 옮기기 위한 이벤트 처리다. 원리 자체는 같다. 두 경우 모두 요소가 이동된 뒤에 소팅 정렬을 해야 해서 임의의 함수를 만들어 공통으로 사용하고 있게 구성했다. HTML HTML.. 2021. 7. 17.
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.

티스토리툴바