창고

참고 : https://www.w3schools.com/howto/howto_html_include.asp How To Include HTML How TO - Include HTML Learn how to include HTML snippets in HTML. The HTML Save the HTML you want to include in an .html file: content.html Google Maps Animated Buttons www.w3schools.com HTML - index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 AJAX - HOW TO INCLUDE HTML TEST Colored by Color Scripter cs HTML..

삼항연산자 A ? B : C A의 조건이 True면 B // False 일땐 C를 실행하는것임 삼항연산자로 flat long shadow를 만든 예는 이거 : https://aosceno.tistory.com/528 삼항연산자로 Flat Long Shadow 만들기 (HTML/CSS/vanilla JS) 원본 소스 https://www.youtube.com/watch?v=xrmdn1t5moA HTML 1 2 3 4 5 6 7 8 9 10 11 12 삼항연산자 HELLO WORLD Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11.. aosceno.tistory.com 즉 const a = true; 일때 if(a){ console.log('참이에용');..

https://zellwk.com/blog/css-translate-values-in-javascript/ HTML,CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 matrix와 정규식을 이용한 transform 값 가져오기 *{margin:0;padding:0;box-sizing:border-box;} html,body{width:100%;min-height:100vh;background:#000;} #myDiv{ display:flex;flex-wrap:wrap; flex-direction:column; justify-content:center;align-items:center; p..

원본 소스 https://www.youtube.com/watch?v=xrmdn1t5moA HTML 1 2 3 4 5 6 7 8 9 10 11 12 삼항연산자 HELLO WORLD Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 @charset "utf-8"; :root{ --font : rgb(76, 168, 204); --shadow : rgba(52, 126, 155);} *{margin:0;padding:0;} html,body{ display:flex;flex-wrap:wrap; justify-content:center;align-items:center; width:100vw;heigh..

소스 참고 : https://penguingoon.tistory.com/257 자바스크립트 모바일 터치 슬라이더 구현하기 (feat. 터치 이벤트) 안녕하세요! 오늘은 모바일 전용 이미지 슬라이더를 간단하게 구현해보았습니다. 모바일에서는 손가락을 이용해 영역을 터치하면 터치이벤트가 발생하게 되는데, 이 터치의 시점과 위치를 잘 penguingoon.tistory.com 탐구소년님이 올려주신 소스를 바탕으로 1) 웹에서는 mousedown / mouseup 으로 작동되게 2) 모바일에서는 touchstart / touchend 3) 자동재생 / 일시정지 / 다시 재생 4) 좌우 화살표 페이저 있음 5) 하단에 슬라이드 갯수만큼 자동으로 생성되는 페이저 있음 6) mousedown / touchstart /..

lanbelle.com/ 랑벨 (Lanbelle) 원스토어 랑벨 공식 브랜드 및 원스토어 홈페이지, 프리미엄 천연화장품, 타마누, 기능성 화장품, 임산부용 화장품, 아기 화장품, 베이비용 화장품, 남성용 화장품, 기능성 화장품, 피부 트러블, 아토피, lanbelle.com 해당 홈페이지 뒷배경에 깔린 올리브가 1) 스크롤시 특정 높이에 다다르면 스크롤에 따라옴 2) 커서 상하좌우 무빙에 따라 3d 효과가 적용 됨 1번이야 쉬운데 2번은... 2D 이미지로 3D효과를 내는거다. 정확한건 아니지만 마우스 커서의 좌표값에 따라 이미지 scale을 늘려줌으로써 3d처럼 보이는 효과를 주고있다. 우선은 Pixi.js로 하면 된다 redstapler.co/3d-photo-from-image-javascript-t..

developer.mozilla.org/ko/docs/Web/CSS/animation-fill-mode animation-fill-mode - CSS: Cascading Style Sheets | MDN animation-fill-mode CSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다. developer.mozilla.org HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 animationFillMode none forwards backwards both Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23..

참고사이트 vanillajstoolkit.com/helpers/getsiblings/ getSiblings.js /*! * Get all siblings of an element * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com * @param {Node} elem The element * @return {Array} The siblings */ var getSiblings = function (elem) { return Array.prototype.filter.call(elem.parentNod vanillajstoolkit.com github.com/nefe/You-Dont-Need-jQuery/blob/master/README.k..

참고 사이트 : webdir.tistory.com/435 폼 필드(input type="file") 디자인 #4 폼 필드 디자인중 마지막을 장식할 파일 필드에 대한 내용입니다. 이 또한 브라우저 호환에 어려움을 겪곤 하는데, 관련해서 대안책들을 알아봅니다. 파일 필드 디자인 현황 파일 필드의 디자인 webdir.tistory.com developer.mozilla.org/ko/docs/Web/API/File/name File.name - Web API | MDN File.name name 속성은 File 객체가 나타내는 파일의 이름을 반환합니다. 보안상의 이유로 경로는 이름에서 제외됩니다."My Resume.rtf"와 같이 경로가 없는 파일의 이름을 포함하는 문자열입니다. function develope..

stackoverflow.com/questions/46414326/ie-11-input-not-displaying-typed-text/46433635 IE 11 input not displaying typed text A work's client has reported an issue in our application when working with IE11. On an specific form, sometimes, when opening it, if you type, the typed text won't show. If I open developer tools,... stackoverflow.com 크롬이나 사파리 등등 기타 브라우저에서는 멀쩡히 보이는 input type="text/password/s..

IE에서 호환성보기를 하는 순간 레이아웃이 다 깨져요 씨발... IE 호환성 보기 설정 무시하기 https://ssamlee.tistory.com/15

accessibility.kr/nia/check.php 웹 접근성 자가진단 서비스 페이지 진단 검사할 페이지의 URL을 엔터로 구분해서 입력해 주세요. accessibility.kr validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사 validator.kldp.org 웹 접근성 자동평가도구(K-WAH4.0)

Neumorphic https://www.instagram.com/p/B4uXgLoABAh/ Instagram의 UI Bucket님: “Wow! This was great indeed Follow @uibucket for daily design feed . Post credits: @alexunderhess.design 좋아요 13.2천개, 댓글 316개 - Instagram의 UI Bucket(@uibucket)님: "Wow! This was great indeed Follow @uibucket for daily design feed . Post credits:…" www.instagram.com 1) X30 Y30 투명도10% 가우시안블러80 #3754AA 2) X-30 Y-30 투명도 100% 가우..

그리고 lastChild와 lastElementChild의 차이 참고 : https://www.w3schools.com/jsref/met_node_clonenode.asp HTML DOM cloneNode Method HTML DOM cloneNode() Method Element Object Example Copy a element from one list to another: // Get the last element ("Milk") of with id="myList2" var itm = document.getElementById("myList2").lastChild; // Copy the element and its child www.w3schools.com

기본 적인 appendChild() 방법 https://www.w3schools.com/jsref/met_node_appendchild.asp HTML DOM appendChild() Method HTML DOM appendChild() Method Element Object Example Append an item in a list: var node = document.createElement("LI"); // Create a node var textnode = document.createTextNode("Water"); // Create a text node node.appendChild(te www.w3schools.com 그리고 insertAdjacentHTML() 방법 https://www.w3..

https://bestofjs.org/projects/you-dont-need-jquery Best of JavaScript Check out the most popular open-source projects and the latest trends about the web platform and Node.js. bestofjs.org 1.8 Form > Get index of e.currentTarget between .radio 를 참고하였습니다. 만일 ol이 여러개고 jQuery의 .index() 처럼 각 list들의 부모를 기준으로 상대적인 index값을 알고싶다면... 1) .getElementsByTagName 대신 getElementsByClassName이나 querySelectorAll을 ..

https://bestofjs.org/projects/you-dont-need-jquery Best of JavaScript Check out the most popular open-source projects and the latest trends about the web platform and Node.js. bestofjs.org All previous siblings, All next siblings

https://www.w3schools.com/jsref/prop_node_previoussibling.aspHTML DOM previousSibling PropertyHTML DOM previousSibling Property Element Object Example Get the HTML content of the previous sibling of a list item: var x = document.getElementById("item2").previousSibling.innerHTML; The result of x will be: Coffee (first li) --> Try it Yourself » Definwww.w3schools.com https://www.w3schools.com/jsre..

https://euntori7.tistory.com/356 document ready 를 순수 javascript로 jquery를 쓰지 않고 순수 javascript로 ready()를 대체하는 코드. 참고로, $(docum.. euntori7.tistory.com https://developer.mozilla.org/ko/docs/Web/Events/DOMContentLoaded DOMContentLoaded DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다. developer.mozilla.org document.addEventListener('DOMContentLoaded', functi..

위에는 소스 우선 .children .childNodes dom요소로 감싸지 않은 단순 text까지 node로 취급함

https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 다운로드는 위에서 보라색 있고 파란놈 있는데 헤비한 개발자 아닌 이상 걍 새파랗고 라이트하고 무료인 Visual Studio Code 깔면 됨 (1..

성격 급한 사람들을 위해 직링크 https://2bluesolutions.blogspot.com/2013/01/how-to-run-chrome-from-within-notepad.html How To Run Chrome From Within Notepad++ A blog about some quick tips and insights into the web development process. 2bluesolutions.blogspot.com Notepad++ doesn't have launch in Chrome/Safari 기타 등등으로 검색하였을 때 shortcuts.xml을 수정하란 말이 있지만 어째선지 하란대로 백날을 수정해도 되지 않아서 마빡을 치고 컴을 재부팅도 해보고 노트패드를 지웠다가 깔았다..