창고

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://dribbble.com/shots/5808364-Procurement-Dashboard-Dark-Mode/attachments/1252317 Dribbble - dashboard-dribbble-dark.png by Steven Hanley dribbble.com 다크테마 + 보라색 (그라디언트) + 포인트는 민트 여기의 이미지랑 색상이 너무 예뻐서 칼라팔레트 따왔습니다. 배경색은 HSB 258,30,22 컨텐트 박스 색은 255,31,25 로 1. 채도에선 거의 차이가 없지만 2. 명도에선 컨텐트 박스가 근소하게 더 밝으며 3. 보통 그림자(어두운)를 한색계열로 가는 반면 오히려 어두운 배경색이 컨텐트 박스보다 자홍색쪽으로 근소하게 이동하여 따뜻한 어두움으로 빠졌음 4. 눈을 배려하는 다..

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

정작 리얼 그리드 홈페이지는 개발 안 해본데다가 백엔드랑 연결했을 때 저렇게 구현 가능한지 ㅋㅋㅋ 모르는 ㅋㅋㅋ 거에서 그냥 패기롭게 디자인만 하고싶은대로 해봄 백엔드에 대한 지식이 0이다 보니 그누보드로 해야헐틴디 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 무턱대고 시안을 만들었지만 내가 할 줄 모르는 프론트엔더 쪽 지식 1) 그리드 2) 최신글 사진 출력시 저렇게 자동 보정되도록 (물론 익스는 제외 ^^) 역시 시간 지나고 다시 보니 허접쓰헌것이 많이 보이지용 그래도 일 없을때 월급루팡하면서 재밌게 만들었음 홈페이지 만들어주겠다구 큰소리 땅땅 쳐놓고... 세상에나.. 파일 날짜를 보니 2018년 11월 13일이네 ㅠㅠ...

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

https://www.youtube.com/watch?v=vAww50n-2_M 롤스토리디자인연구소에서 나온 방법을 차용하였습니다. 1. 글씨를 타이핑한다. 1-2. 이 글씨를 Convert to SmartObject 해주면 나중에 글씨를 수정할 일이 생겼을때 일일히 하나하나 수정 안 해도 된다. 2. Ctrl+J로 글씨를 복사한다. 3. Ctrl+T를 눌러 Free Transform된 상태에서 방향키를 한번씩만 눌러 대각선 방향으로 이동시켜 준뒤 엔터. 4. Ctrl+Alt+Shift+T를 눌러주면 일러스트레이터의 Ctrl+D같은 효과가 적용된다. 대각선 방향으로 개체가 일정한 간격으로 이동·복사된다. 4-2. 효과를 적용할 오브젝트들을 그룹화시킨다. 그리고 그룹의 Fill 값을 0으로 맞춤. FX > ..

0: 글자 색 #666 기준 (font:Roboto) 1. 채도,명도 관련(S, B) 가장 밝은 회색(우측 상단) 채도는 2만, 명도는 98 뭔가 이렇게 숫자 수치로 보면 너무 밝아서 #fff랑 구분 안 갈 것 같은데...간다 ㅇㅇ 트위터(2019년 하반기 기준) 어플리케이션은 저 H값이 204임. 근데 이럴때 가장 짙은 회색으로 명도/채도 할 때 내 취향보단 좀 더 누리끼리해져서 더 차갑게 뽑아봄. 2. 색상 관련(H) : 남색과 싸이언 중간 지점이 좋다. 너무 싸이언~옐로우로 가거나, 남색~보라색으로 가면 // 싸이언~옐로의 노란색의 Y... / 보라색의 M 이 회색에선 웜톤으로 나타나서 답답해짐. 색상값이 괜찮은지는.. 가장 짙은 회색(우측하단)에서 확인하면 된다 ㅇㅇ

https://www.shantisparrow.com/shareable-bites Pinterestable Work — Shanti Sparrow A collection of Shanti Sparrow design and Illustration in a Pinterest sharing format www.shantisparrow.com

https://www.youtube.com/watch?v=x-uGN5P8TRM How to Create Fluid Gradient Cover Art - Photoshop Tutorials 보고 따라했음 ^_^);

dopely top 칼라팔레트용 https://www.instagram.com/p/BxUTrqIgHW5/?utm_source=ig_web_options_share_sheet Instagram의 Mehdi Khodamoradi님: “Dopely Colors #126 9DC3E2 • 9DD2D8 • FADCE4 • FFB5CC • E2B9DB - Gradients Setting Rotation: 147 좋아요 2,770개, 댓글 24개 - Instagram의 Mehdi Khodamoradi(@mr.pugo)님: "Dopely Colors #126 9DC3E2 • 9DD2D8 • FADCE4 • FFB5CC • E2B9DB - Gradients Setting Rotation: 147° -…" www.insta..