창고

참고사이트 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..

dribbble.com/shots/15146797-Neon-Glass-Effect-Figma-Guide Neon Glass Effect Figma Guide dribbble.com

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..

참고사이트 goni9071.tistory.com/411 javascript 이미지에서 색 추출하기. Color Theif를 이용한 색상추출하는 방법입니다. [HTML] 색상 추출 [JAVSCRIPT] $("#btn").on("click", pick); function pick() { const colorThief = new ColorThief(); const color = colorThief.. goni9071.tistory.com colorThief GitHub : github.com/lokesh/color-thief lokesh/color-thief Grab the color palette from an image using just Javascript. Works in the browser and ..

ajax(jQuery / vanilla JS)로 탭메뉴 만들어보기 (1)jQuery로 탭메뉴 구현해보기 참고 : www.w3schools.com/jquery/jquery_ajax_intro.asp jQuery AJAX Introduction jQuery - AJAX Introduction AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. jQuery AJAX Example Let jQuery AJAX Change This Text Get External Content Try it Yourself » What is AJAX? AJA www.w3s..

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)

html5 vanilla JS CSS3 가끔 고객이 아 이 페이지는 다른 대메뉴의 하위메뉴로 옮겨주세요~ 라는 등 사이트맵 구조가 바뀌면 html DOM을 일일히 수정하는 노가다 작업을 해야하는데 그게 너무 싫지 않습니까... 1) 모든 페이지에 일일히 하드코딩으로 대메뉴 중메뉴 소메뉴 타이핑해주기 2) 위의 방법은 일일히 ctrl+F 해서 찾아서 수정해야함. 인간은 반드시 실수를 함.. 뭔가 빼먹게 되어있음 그래서 이번엔 페이지 상단 스크립트에 선언을 해서 var depth_1 = '대메뉴명' var depth_2 = '중메뉴명' 0000 00000 : HTML DOM은 이렇게 작성하고 스크립트 파일에서 for문을 돌려 해당 클래스명을 가진 DOM의 innerHTML을 변수에 선언해준 스트링값으로 몽창..

값이 입력되거나, 값을 입력중인 focus중에는 : 1-1)배경이 하얗게 변하고 1-2)굵은 outline이 쳐집니다. 값이 없는 상태로 focus out 되면 : 0)원래의 하늘색 박스로 돌아갑니다. HTML js에서 for문 돌려서 onfocusin onfocusout하고 싶었는데 크롬 사파리등은 이 방식으로 하면 지원이 안되어서 ㅠ 에궁..DOM이 지저분해짐 힝 CSS label의 text에 해당하는 .formTitle은 여기서 귀찮아서 크기변경 안해놨음... JS

https://aosceno.tistory.com/435 전 게시물 참조. checkbox 전체선택, 전체해제.... 한 페이지에 아이템이 여러개 있을 경우 / 여러페이지 일괄 적용 가능한 vanilla JS javascript로만 checkbox를 전체선택하고 전체해제 하기. 1) 전체선택 체크시 > 해당 부모에 해당하는 자식 체크박스들 전체 선택 2) 전체선택 해제시 > 해당 부모에 해당하는 자식 체크박스들 전체 해제 3) 자식.. aosceno.tistory.com 이전 게시물에선 01) [전체선택] 체크시 해당 영역의 모든 체크박스 활성화 02) [전체선택] 해제시 해당 영역의 모든 체크박스 비활성화 03) 해당 영역의 체크박스를 하나라도 해제할시 [전체선택] 비활성화 까지 구현하였으나 "해당 영..

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% 가우..

javascript로만 checkbox를 전체선택하고 전체해제 하기. 1) 전체선택 체크시 > 해당 부모에 해당하는 자식 체크박스들 전체 선택 2) 전체선택 해제시 > 해당 부모에 해당하는 자식 체크박스들 전체 해제 3) 자식 체크박스 해제시 > 해당 부모의 '전체선택 체크박스' 해제 원문 소스 참조 : 기얏토님 블로그 "[javascript] 체크박스 전체 선택 및 제거 구현" https://giyatto.tistory.com/51 [javascript] 체크박스 전체 선택 및 제거 구현 체크박스 전체 선택/제거 기능 구현. 1. "전체선택"을 눌렀을 때, 전체 체크박스가 체크 되고, 다시 눌렀을 때 체크가 해제 되어야 한다. 2. 목록 전체의 체크박스 중, 하나만이라도 체크가 해제 되면 "전체선택"...

그리고 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..

기본 소스는 w3school의 HOW TO 항목에서 slide show 입니다. https://www.w3schools.com/howto/howto_js_slideshow.asp 기본 예제중에 자동재생, 페이저, 이전·다음페이지 버튼, 재생 멈춤 버튼을 모두 제공하는 예제는 없기에 포스팅 작성하기로 함. (구글에 검색해봐도 딱히 국내에 없길래..ㅠ..) 언제나 그렇듯 어설프지만 기본 틀만 참고해주세욤 HTML CSS JS (바닐라 자바스크립트) 그간은 jQuery로 setInterval을 이용하여 하였는데, 그렇게 하면 해본 분들은 알겠지만 특히 반응형으로 제작하였을 때 오류가 좀 잦은 경향이 있으욤... ㅠ... 근데 바닐라자바스크립트로 하면 엄청 가벼운데다가 setInterval이 아닌 setTime..

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

예제 사이트 : 눈누(https://noonnu.cc/) , Google fonts(https://fonts.google.com/) input이나 textarea에 글을 입력하면 실시간으로 그 value를 받아와 다른 input/textarea에도 내용을 반영해주는 코드 HTML CSS jQuery로 짤 때는 이렇게 vanilla JS (JavaScrpt 로만 짤 때는 이렇게) changeThis (바뀌는 영역)은 innerHTML을 하든 textContent를 하든 innerText를 하든 value를 하든 상관 없는데 바뀌는 값을 받아오는 changeText는 value로 받아와야만 되는 것 같음... 소스

초보끼리 티스토리의 "jQuery 특정 영역을 제외한 부분을 클릭했을때" 를 참고하였습니다 https://chobokkiri.tistory.com/67

소스 출처 https://codepen.io/tonystar/pen/JRLaKw Pure-CSS Float Label. Finally. Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser. https://github.com/tonystar/float-l... codepen.io Pure-CSS Float Label. Finally 밑은 내 응용예제 1. input에 placeholder 설정해주기 2. 각input을 감싸줄 블록/인라인블록 필요 (label 위치때문에) 3.구조 4. input label{focus및value있을시 설정} input:pla..

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을 수정하란 말이 있지만 어째선지 하란대로 백날을 수정해도 되지 않아서 마빡을 치고 컴을 재부팅도 해보고 노트패드를 지웠다가 깔았다..

W3schools를 참고한 지난번 포스팅 https://aosceno.tistory.com/358 sticky header 스티키 헤더 - 상단에 광고바도 붙어있는데 정신없이 나왔다 들어갔다 하는 효과 말고 정말 원래 걍 착 붙어있는것마냥 스르륵 상단에 붙었다 제 위치로 돌아가게는 어떻게 함? http://biotreat.kr/ 비오트릿 I BIOTREAT 건강한 자신감, 나를 위한 특별한 시작. 각 분야 전문가들이 함께 만들어 더욱 믿을 수 있는 브랜드 '비오트릿' biotreat.kr 여기 홈페이지를 구경하다가 뽐뿌가 옴 스.. aosceno.tistory.com 이 사이트를 구경하다가 만일 스틱키헤더가 2개가 필요하고, 그 헤더와 헤더 사이엔 스틱키 시키지 않을 요소가 있다면 코드는 어떻게 되는가?..

http://biotreat.kr/ 비오트릿 I BIOTREAT 건강한 자신감, 나를 위한 특별한 시작. 각 분야 전문가들이 함께 만들어 더욱 믿을 수 있는 브랜드 '비오트릿' biotreat.kr 여기 홈페이지를 구경하다가 뽐뿌가 옴 스티키 헤더에는 효과가 여러가지가 있지만 제일 만들기 쉬운건 아예 그냥 fixed해놓고 top:0; 해놓는 경우 또는 scrollTop();의 값이 헤더 높이보다 커진다면 display:none;해뒀던 다른 헤더를 뿅 불러온다던가 위 두가지가 걍 뚝딱뚝딱 만들 수 있는것임. 하지만 첫번째의 경우엔 상단에 광고바를 넣고 싶은 경우 사실상 쓸 수 없고 두번째의 경우는 광고바는 넣을 수 있어도 특유의 애니메이션 효과때문에 정신이 없음. 물론 스크롤을 빨리 하면 별로 티가 안나지..

화면 크기가 짱 넓을 때 이전 포스팅 참조 https://aosceno.tistory.com/354 Masonry layout(핀터레스트 레이아웃) 참고사이트 https://opentutorials.org/module/2398/13712 핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피 소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유.. aosceno.tistory.com 엄청 간단하다. 컨테이너(부모)에서 column-width 값만 설정하면 된다 (column-count를 설정하지 않으면 되는 것이다..) 아이템(자식)의 너비는 걍 100%로 하고! ㅇㅇ https://www.w3schools.com/css/css3_multiple_co..

참고사이트 https://opentutorials.org/module/2398/13712 핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피 소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. 사용기술 관련기술 예제 #columns{ column-width:350px; column-gap: 15px; } #columns figure{ disp opentutorials.org https://css-tricks.com/piecing-..