728x90 코딩저장소19 localStorage를 이용한 다크모드 예제 사용자가 직접선택하는 다크모드기능이기 때문에 쿠키를 이용하는 방법보다는 localStorage이 좀더 효율적일것으로 보입니다. 특징 - localStorage 객체는 만료 날짜가 없는 데이터를 저장합니다. - 데이터는 브라우저를 닫아도 삭제되지 않습니다. See the Pen localStorage를 이용한 다크모드 by 장명호 (@jangmang) on CodePen. 참고문헌 https://www.w3schools.com/jsref/prop_win_localstorage.asp Window localStorage Property W3Schools offers free online tutorials, references and exercises in all the major languages of th.. 2021. 12. 8. 리스트에서 특정단어 찾아 노출하기 간단한 리스트 검색기능을 구현할때 예전(아주 오래전)처럼 복잡하게 문자열을 찾는 스크립트나 정규식을 이용한 필요없이 제이쿼리의 :contains 선택자를 활용하여 지정된 문자열의 포함여부를 조회하여 아래와 같이 검색된 문자열의 리스트업을 구현할 수 있다. See the Pen 특정단어 찾아 노출하기(keyup) by 장명호 (@jangmang) on CodePen. 참고문헌 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_contains W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in you.. 2021. 12. 8. css로 가상클래스에 index 번호넣기 순서형식의 리스트 UI를 잡을때 기본 ol태그의 숫자는 스타일을 바꾸는게 제한적이라 js로만 index값을 찾아서 넣어줄 수 있는줄 알았는데 구지 자바스크립트를 쓰지않고 css로 번호를 순서대로 삽입할수있다는걸 처음 알게되었다 -ㅁ- 너무 간단해서 충격...이렇게하면 스타일로 마음대로 넣을수 있고... 왜 그동안 스크립트로만 써왔던것인가...무지했던 나의 과거를 반성하며 html 내가 첫번째 내가 두번째 내가 세번째 css ol {counter-reset: number 0;} ol li:before {counter-increment: number 1;content: counter(number);} 끝 2021. 12. 8. textarea 글자수 제한 어떻게 주나요? 흔하게 사용하고 간단하지만 막상하려면 귀찮아지는 소스ㅎ textarea에 200자를 초과하여 입력할 경우 얼럿창 안내와 함께 200자이내로 입력란이 제한되는 샘플입니다 See the Pen textarea 200자이내 카운트 by 장명호 (@jangmang) on CodePen. 감사합니다 :) 2021. 12. 8. 사이트를 나가시겠습니까? 페이지를 벗어날 경우 경고창을 띄우기 위한 소스 $(window).on("beforeunload", function () { return "사이트를 나가시겠습니까?"; }); 감사합니다 :) 2021. 12. 8. 어떤 인앱브라우저로 접속했는지 알 수있을까요? 인앱 브라우저로 접속했을 경우 아래와 같이 간단하게 분기처리가 가능합니다 카카오톡, 페이스북, 인스타그램, 틱톡에서 테스트확인했습니다 if (navigator.userAgent.indexOf('KAKAO') >= 0) alert("카카오톡 인앱에서는 정상적인 진행이 어려울 수 있습니다."); if (navigator.userAgent.indexOf('[FB') >= 0) alert("페이스북 인앱에서는 정상적인 진행이 어려울 수 있습니다."); if (navigator.userAgent.indexOf('Instagram') >= 0) alert("인스타그램 인앱에서는 정상적인 진행이 어려울 수 있습니다."); if (navigator.userAgent.indexOf('trill') >= 0) alert(.. 2021. 12. 8. Blur효과로 나타나는 텍스트 스크립트는 1도 없이 css animation 기능으로 순차적으로 나타났다 사라지는(페이드인 아웃) 모션입니다. 너무 간단하지만 잘 활용하면 페이지를 꽉차보이게 만들 수 있는 깨알모션이 될것 같습니다 미리보기 희미했던 내가 점점 선명하게 떠오른다 css .text {font-size:50px;} .text span:nth-child(1) {animation: txt_blur 1s infinite alternate ease-in;} .text span:nth-child(3) {animation: txt_blur 1.5s infinite alternate ease-in;} .text span:nth-child(2) {animation: txt_blur 2s infinite alternate ease-in;}.. 2021. 12. 8. 이전 1 2 다음 728x90