창고

예제 사이트 : 눈누(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..