본문 바로가기

728x90

🖥️프론트엔드/HTML | CSS | JAVASCRIPT28

자바스크립트 - XPATH 문법으로 DOM ELEMENT 가져오기 XPATH 문법으로 단일 요소 가져오기 function getElementByXpath(path){ return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; } console.log( getElementByXpath("//html[1]/body[1]/div[1]")); XPATH 문법으로 다중 요소 가져오기 function getElementsByXPath(xpath, parent) { let results = []; let query = document.evaluate(xpath, parent || document, null, XPathResult.ORDERED_NODE.. 2023. 11. 12.

자바스크립트 - GET 파라미터 추출하기 let url = new URL("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string") let params = new URLSearchParams(url.search); let sourceid = params.get('sourceid') // 'chrome-instant' let q = params.get('q') // 'mdn query string' let ie = params.has('ie') // true params.append('ping','pong') console.log(sourceid) console.log(q) console.log(ie) console.log(p.. 2023. 10. 26.

HTML - 티스토리 다크모드 토글 버튼 HTML 🌙 CSS /* 다크모드 */ .dark body{ background-color: #161618 !important; color: rgb(255, 255, 255) !important; font-weight: 700 !important; } 2023. 9. 30.

자바스크립트 - 자바스크립트 난독화 사이트(obfuscator.io) 사이트 주소 https://obfuscator.io/ JavaScript Obfuscator Tool JavaScript Obfuscator Tool A free and efficient obfuscator for JavaScript (including support of ES2022). Make your code harder to copy and prevent people from stealing your work. This tool is a Web UI to the excellent (and open source) javascript-obfuscato obfuscator.io // Paste your JavaScript code here function hi() { console.log("Hello .. 2023. 9. 5.

CSS - 인기 있는 디자인 프레임워크(Tailwind CSS) https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com https://flowbite.com/ https://flowbite.com/ flowbite.com 2023. 8. 28.

CSS - 미디어쿼리 확인 사이트(mediaqueriestest.com) https://mediaqueriestest.com/CSS3 Media Queries Test on your browserCSS3 Media Queries is the heart of Responsive Design. This website will test all the features on your own browser, including screen dimensions, resolution and available extensions.mediaqueriestest.com 2023. 8. 28.

자바스크립트 - XPath 다루기, 반응속도 테스트 사이트 핵 만들기 XPath 선택자인 $x를 사용하는 방법도 있지만, setInterval 함수 내에 $x 선택자를 사용하려고 하면 VM3146:2 Uncaught ReferenceError: $x is not defined at :2:12 이라는 오류 메시지가 나온다. 그래서 evaluate 메서드를 이용해 XPath 표현식으로 특정 요소를 찾는 방법을 대신할 수 있다. evaluate 함수 구문 evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result) 매개 변수 xpathExpression - XPath 표현식이 온다. contextNode - document 같은 context 노드가 입력된다. resultType - 결과 유형에 맞는.. 2023. 6. 23.

자바스크립트 - http를 https로 리다이렉트 if (window.location.protocol != "https:") { window.location.href = "https:" + window.location.href.substring(window.location.protocol.length); } if (document.location.protocol == 'http:') { document.location.href = document.location.href.replace('http:', 'https:'); } 출처: https://greendreamtrre.tistory.com/672 Javascript (자바스크립트) HTTP 접속 시 HTTPS로 리다이렉트 보통은 톰캣 서버 설정 등에서 자동으로 리다이렉트 시키도록 하지만 각 페이지마다.. 2023. 5. 18.

자바스크립트 - 현재 script 태그 삭제하기 2023. 4. 4.

자바스크립트 - SMS 문자 보내기 SMS보내기 location.href = sms:수신자번호?body=보낼메세지; 출처: https://ttowa.tistory.com/m/entry/JS-%EC%9B%B9Mobile%EC%97%90%EC%84%9C-SMS-%EB%AC%B8%EC%9E%90%EB%B3%B4%EB%82%B4%EA%B8%B0 [JS] 웹(Mobile)에서 SMS 문자보내기 1.Android(안드로이드) SMS보내기 location.href = sms:수신자번호?body=보낼메세지; 2.IOS(아이폰) SMS보내기 location.href = sms:수신자번호&body=보낼메세지; 3.Android & IOS 자동 분기 실제 디바이스에서 테스트 해 ttowa.tistory.com 2023. 3. 2.

CSS - :before를 이용한 채팅창 말풍선 꼬리 만들기 .parent { height: 20px; width: 100px; background-color: #080; position: relative; } .child { position: absolute; width: 80px; height: 200px; background-color: #008; left: 50%; /* note 50% */ top: 30px; margin-left: -20px; /* 2x your arrow size */ } .child:before { position: absolute; border-right: 10px solid transparent; border-bottom: 10px solid #008; border-left: 10px solid transparent; top: -.. 2023. 2. 5.

자바스크립트 - 브라우저 탭이 활성화인지 확인하기(document.hidden) if (document.hidden) console.log('비활성화'); else console.log('활성화'); 출처: https://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active How to tell if browser/tab is active Possible Duplicate: Is there a way to detect if a browser window is not currently active? I have a function that is called every second that I only want to run if the current page is in the stackoverflow.com 2023. 2. 5.

이전 1 2 3 다음

728x90

티스토리툴바