분류 전체보기137 모달팝업, 모달창, 이미지 슬라이드 제이쿼리 플러그인 - 무료(MIT) Super Box - 단순한 모달 창 기능 - MIT 라이센스 https://bpier.re/projects/jquery_superbox/ jQuery SuperBox! The english version of this page has been generously translated from french by Anna Mondeteguy. jQuery Superbox! is a script which allows you display windows with the lightbox effect. This script is a plugin for jQuery (1.3.x). The minified version of Supe bpier.re ColorBox - 영상팝업 가능 - iframe 팝업 가능 - 슬.. 2023. 6. 16. [CSS 활용] css로 블러 효과(포토샵 blur 효과 주기) HTLM Whereas disregard and contempt for human rights have resulted Go ahead, resize me. CSS @import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Permanent+Marker&display=swap'); body { background: url("https://images.unsplash.com/photo-1593418270780-4c6e6b7eb5af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80") no-repeat ce.. 2023. 6. 15. [마케팅] 소구란 무슨 뜻일까요? 디자인 업무를 하다가,, 생소한 단어를 들었다. "제품의 소구포인트를 살려서 디자인 해주세요." 소구 포인트...? 소구란? 소구訴求, appeal 광고주가 소비장게 광고를 하기 위해 고려하는 일종의 공략 방법, 소구는 소비자가 행동을 일으키게 하는 것. 호소, 어필 이라는 말로 대신할 수 있다. 소구포인트(appeal point) 소구 포인트(소구점) 상품이나 서비스의 가장 어필하고 싶은 점 appeal point를 의미 한다. 즉, 뭐 강조 하고 싶은 내용이라는 말로 대신 할 수 있는 말. 소구력 찾다보니 '소구력' 이라는 단어도 종종 사용 되는 듯 하였다. 소구력은, 언론에서 적지 않게 쓰인다고 하는데, 특히 정치 기사에서 자주 보여 진다고 한다. 소구력은, 일본어 '소큐료쿠(そきゅうりょく, 訴求力.. 2023. 6. 15. [무료소스] 무료 신용 카드 목업, 소스 피그마 - figma 신용카드 UI kit (credit card ui ) 다양한 그라디언트 배경 컬러값과 조합 자료를 figma 소스로 다운 로드 가능 신용카드 뿐만 아니라 다양한 곳에 활용 가능한 패턴과 소스 다운로드 경로 https://www.figma.com/community/file/1134847584196760092 Credit Card UI Kit | Figma Community Figma Community file - Credit card UI Kit assets made entirely in Figma because I’m too lazy to use Adobe Illustrator. You can use it for your app or website mockup design. www.figma.com Cr.. 2023. 5. 29. [피그마] 폰트나 이미지 크기 자동조절 되게 하기 버튼이나 그룹 내용 크기 자동조절 버튼 사이즈 변경 하기 그룹핑된 이 버튼의 크기를 변경시키키 고자 할때, Move 툴 선택 시 무브 툴을 사용하여 사이즈를 수정 하게 되면 Scale 툴 선택 시 내용이 흘러 넘치지 않고, 현재 스케일, 크기 비율에 맞게 줄어 들게 된다. 기존 어도비나 이미지 편집 툴에서는 Shift 키를 누르면 되는 기능이나, 피그마의 경우엔 툴을 변경해 주어야만 가능! 자주 쓰는 부분이므로 단축키를 알아두는 것이 좋을 듯 하다. 단축키 Move tool - V Scale tool - K 2023. 5. 15. [디자인]중요한 정보를 강조 하는 방법 너무 쉬운 얘기지만 쉽지 않은 얘기이기도 하죠. 디자인을 할 때 중요한 정보를 강조하는 방법은 몇가지를 한번 찾아 보겠습니다. 0. 주인공 정하기 가장 중요한건, 디자인에서 주인공을 찾는 일입니다. 강조해야할 요소인 것이죠. 이 요소가 2개, 3개가 되면 정신없겠죠. 주인공을 정했다면 그 주인공을 강조할 수 있는, 방법들을 사용해서 강조를 해줍니다. 1. 사이즈 폰트 사이즈가 100px 넘는 사이즈로 제작 되었습니다. 생각보다 사이즈를 크게 주는 일이 디자인 할때는 쉽진 않습니다. 하지만 이왕 강조할 내용이라면 사이즈를 더해주고, 그외의 것들을 덜어 냄으로써 강조 할 수 있습니다. 2. 색상 대비 강렬한 색상대비를 줌으로써 강조하는 방법도 있습니다. 3. +- (덜어내고 더하기) 위의 포스터 처럼, 색상.. 2023. 1. 13. [디자인]가독성을 높이는 5가지 디자인 방법 (여백 활용) 디자인은 결국 내용을 전달 하기 위한 하나의 수단이기에 가독성을 높여 내용이 한눈에 들어오도록 하는 것이 중요 합니다. 가독성이 높다는 것은 여백을 잘 활용한다는 뜻입니다. 말을 할때도 호흡을 하듯이 이야기 하듯이 디자인에서도 여백으로 호흡을 주어 하고자 하는 말이 더 명확히 들릴 수 있도록 하는 것입니다. 여백 활용 하는 방법 1. 여백을 균일 하게 맞춘다. 아래 애플 사이트를 보시면 좌우 여백을 균일 하게 맞추고 각 요소들의 사이 간격도 균일하게 맞춰져 있습니다. 2. 제목과 세부내용이 구분된다. (시각적 점프 비율이 높다) 킨포크 웹사이트의 내용을 보면 제목과 내용의 글자 크기 차이를 크게 두어서 구분이 확실히 되도록 하였습니다. 3. 배경과 내용이 구분된다. 4. 자간이 적절하다. 우리가 일반적으.. 2023. 1. 13. [포토샵]가이드, 안내선 설정 (웹사이트디자인시) 웹사이트 디자인, 웹사이트 레이아웃 설정 컨텐츠 너비 1320px (네이버 홈페이지 기준)로 설정한다고 하면 마진 값을 좌/우로 300씩 주어서 기본 가이드 레이아웃을 설정해 주면 됩니다~! 가이드 선 디테일한 설정 ctrl + K 설정으로 들어가셔서 units & rulers 부분과 Guides, Grid & Slice 부분을 수정해주시면 됩니다! 2023. 1. 13. [포토샵]해상도와 사이즈 설정(인쇄용300dpi, 웹용72dpi) 안녕하세요! 포토샵 작업에 앞서 가장 첫번째로 해야할 일이 새문서를 만들면서 문서 설정을 하는 일입니다. 문서의 목적 첫번째로 생각해 봐야 할 것은 문서의 목적입니다. 1. 웹용 : 블로그나, 홈페이지, 페이스북, 인스타그램등의 웹사이트에 업로드 2. 인쇄용 : 프린트 목적 1. 웹용 해상도 72dpi 사이즈 : 웹사이트( 1920px X 1080px ), 인스타그램 업로드용(1080px X 1080px) 해상도 (resolution) : 72 color mode : RGB 1-2. 웹용 포스터 시안 : 210 X 297(mm) 2. 인쇄용 해상도 300dpi 사이즈 : 포스터( 210mm X 297mm ) 해상도 (resolution) : 300 color mode: CMYK 기타 속성 아트보드(art.. 2023. 1. 13. CSS 선택자 연습 게임 https://flukeout.github.io/# CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS 선택자 연습 2023. 1. 8. Flex 속성 연습 하기 추가 사이트 다양한 샘플을 테스트해볼 수 있는 사이트 https://codepen.io/enxaneta/pen/adLPwv Flexbox playground ... codepen.io 플렉스 게임으로 익히기 http://www.flexboxdefense.com/ Flexbox Defense Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS! www.flexboxdefense.com 2023. 1. 8. [Figma] 피그마 에서 지마켓 폰트 사용, 피그마 로컬 폰트 사용 방법 피그마에서 내 컴퓨터에 있는 폰트 사용하기 피그마는 기본적으로 브라우저 기반 프로그램이기 때문에 내 컴퓨터에 저장되어 있는 폰트를 바로 쓰는게 불가능 합니다. 지인에게 피그마로 디자인 작업을 해서 전달을 했는데,폰트 수정이 안된다고 하더라구요. 방법- 폰트 인스톨러 (font-installers) 설치 https://www.figma.com/downloads/?fuid=843356296609220310 www.figma.com 위 사이트에 접속 해서 폰트 인스톨러 설치를 해준다음 다시 해당 파일경로로 재접속을 하면 이처럼 물음표가 사라지고 수정이 가능한 형태가 됩니다~! 개인적으로 디자인 작업 할 때 자주 쓰는 폰트가 바로 지마켓 폰트예요.상업적으로 무료 이용이 가능하고 두꺼운 글자(bold) 와, 얇은.. 2023. 1. 6. 스타벅스 별 적립 기준 (브런치 활용), 스벅 별 적립 방법 마땅히 갈만한 커피숍이 없을 때 일관된 맛과 분위기 그리고 청결함을 유지하는 스타벅스를 자주 애용합니다. 그리고 스탬프 역할을 하는 별 적립이 생각보다 후한 곳이 스타벅스 입니다. 프로모션 음료 행사가 있을 때는 추가 별 3개 이상 적립해 주기도 하구요. (사이렌 오더의 겨웅) 생각보다 별 12개가 금방 쌓여서 무료 음료를 먹을 기회가 자주 오기에 자연스럽게 스벅으로 가게 되게 하는것 같아요. 한번에 별 4개⭐️⭐️⭐️⭐️ 적립 방법 어느 날엔가 평소처럼 커피와 빵을 먹었습니다. 배가 고파서 평소에 먹던 베이글이 아닌, 바비큐치킨 샌드위치를 먹었습니다.. (🥪 맛있어요!) 별이 네개씩이나 적립이 되어 있더라구요? 이용 시간 : 오전 12시 전 메뉴 : 브런치메뉴 (샌드위치, 베이글, 샐러드, 밀 박스.... 2023. 1. 6. 새해 계획표, 신년 계획 양식, 목표세우기 새해가 되면 꼭 하는것중 하나인 새해 계획 세우기! 요즘엔 테이블이나 잘만들어진 계획표가 많긴 하지만 어릴때 콤파스로 원형 모양을 만들어 그리던 아날로그 타입인 원형 시계모양이 제일 보기가 편하다. 엑셀이나 뭐 그런 툴로 비슷하게 만들 수 있긴 하지만 어지간히 불편한게 아니여서 혹시나 해서 관련 프로그램이 있나 해서 찾아 보니! 있었다. 사이트가 만들어 진지 좀 오래 됬긴 하지만 원형의 형태와, 색으로 구분되어지는 영역이 그래도 나름 쓸만하다. 수정 방법 텍스트와 시간 수정 방법 텍스트 내용을 수정 한다음에 계획표 적용을 눌러 준다. 컬러 변경 아래처럼 F 부분을 클릭하면 컬러 변경이 가능 하다. 아쉬운 점은, 폰트 사이즈 조절이 어렵다는 것...이다.. 어차피 출력해서 쓰는거면 이렇게도 할 수 있을 것.. 2023. 1. 5. 주소 단축해주는 사이트 https://to2.kr/ TO2 TO2는 긴 주소를 짧게 줄여주는 서비스입니다. to2.kr 주소를 단축해 주소는 많긴 한데 그중 기억하기 편한 형식의 단축 사이트를 찾음 2023. 1. 5. GSAP 무료 자바스크립트 애니메이션 라이브러리 용량이 가볍고 사용이 쉽고 상업적 용도를 포함하여 무료로 사용이 가능하다. https://greensock.com/ GreenSock GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser. greensock.com 사용방법 1. GSAP CDN 접속 https://cdnjs.com/libraries/gsap gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers G.. 2023. 1. 5. css flex 플렉스 속성 게임 연습, 플렉스박스 연습하는 게임,개구리게임정답 플렉스 박스 개구리 게임. Flexbox -Froggy https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 게임 룰 개구리를 이동 시켜서 잎파리 위에 올려 놓는 게임입니다. 개구리 = flex-item 힌트 보기 : 속성값을 클릭하면 넣을 수 있는 요소들이 보입니다. 위 속성들 중 알맞은 속성을 골라서 기입 해 주면 개구리가(flex-item) 이 이동합니다~ justify-content 속성 속성값 : flex-start | flex-end | center | space-between | space-around | space-evenly 특징 : 수평정렬 2단계 정답 justify-co.. 2022. 12. 27. css to scss css 변환 해주는 사이트 https://beautifytools.com/css-to-scss-converter.php CSS To SCSS Converter - BeautifyTools.com beautifytools.com 2022. 12. 23. 크리스마스, 눈 내리는 효과 만들기 (자바스크립트) 자바스크립트로 자연스럽게 내리는 눈 효과 만들기 Html css body,div{ margin:0; padding: 0; } .snow{ width:100%; height: 100vh; background-image: url(https://images.unsplash.com/photo-1491002052546-bf38f186af56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2200&q=80); background-size:cover; } JS function Snowy() { function t() { window.requestAnimationFrame(t), $.clearRect(0, 0.. 2022. 12. 22. CSS 이미지사이즈 맞추기 - object-fit & background 비교 CSS를 이용해 아래처럼 이미지를 가득 채워 넣는 방법으로 object-fit 과 background-size를 활용하는데 결과는 거의 유사하다 코드의 간결함과 호환성 부분을 체크한 뒤 활용 하면 될 듯. object-fit 장점 : 코드가 간편, 이미지나 비디오 적용 가능 단점 : IE 미지원 html object-fit: fill object-fit:contain object-fit: cover css .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } background-size 고정된 이미지라면 css 속성에서 background-imag 에다 넣어주고 서버에서 받아올 경우 아래처럼 이.. 2022. 12. 21. [css] flex로 간단하게 수직&수평 가운데 정렬 로그인 페이지나 로딩 페이지 등을 제작할 때 페이지 전체의 수직, 수평으로 요소를 배치하는 경우가 많다. 보통 margin: 0 auto 로 수평 정렬을 쉬이 되나 수직정렬을 쉽지 않다. css flex를 사용하면 좀더 손쉽게 수평, 수직 정렬이 가능하다. 결과 HTML Download CSS body{ height: 100vh; background: #f5f5f5; } .flex_container{ height: 100%; display:flex; justify-content:center; align-items:center; } .flex_item{ margin-top:-20px; text-align:center; } .flex_item p{ font-size: 16px; color: #999; mar.. 2022. 12. 20. 이미지 로렘 입숨- 이미지 자동 생성 경로 로렘입숨이 텍스트 자동생성 버전이라면 로렘픽숨은 이미지 자동생성 버전. 웹디자인 시안 기획 이나 UI 디자인 등에서 활용할 수 있는 유용한 기능. 임의로 이미지를 규격에 맞게 불러와 보여 줄 수 있다. https://picsum.photos/ Lorem Picsum Lorem Ipsum... but for photos picsum.photos 사용방법 https://picsum.photos/200 /* 정사각형 */ https://picsum.photos/200/300 /* 가로, 세로 */ 특정 이미지 넣기 https://picsum.photos/id/1/200/300 /* 아래 경로에서 넣고싶은 이미지의 아이디값을 넣어준다 */ https://picsum.photos/images Lorem Picsu.. 2022. 12. 20. [JS 활용] 제이쿼리, 상단으로 자연스럽게 가는 버튼만들기, scrollTop, fadeIn, fadeOut 클릭시 최상단으로 자연스럽게 올라가게 해주는 제이쿼리 소스 사이트 내용이 길 경우 가급적 추가해 주면 좋은 요소 결과 화면 *스크롤 해보세요 1. 처음엔 안보여짐 2. 스크롤을 일정부분 내리면 보여지게함 3. 상단으로 자연스럽게 이동 4. 상단에서 다시 안보여지게 함 html Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen boo.. 2022. 12. 8. 모바일 가로(수평) 스크롤 제거 하기 모바일 가로, 수평 스크롤 없애기 웹으로 작업하다가 모바일로 보면 체크하지 못한 부분중에 하나 숨어있는 영역까지 모바일에서는 보여지게 된다. CSS 추가 및 수정 html, body { max-width: 100%; overflow-x: hidden; } 그 외의 방법 위처럼 메타 태그를 수정하거나 추가하는 방법도 해결 방법중의 하나인데 내 경우에는 Css 추가 만으로 해결 되었다. 2022. 12. 8. [아이콘]icon 무료 다운로드 , svg, png 파일 등 두개 이상 다운 받으면 유료가 되지만,, 그래도 png는 무료 이기에, 급히 필요할때 유용한 사이트 데이터형식의 이미지도 무료로 제공하므로 굳굳 ! https://icons8.kr/icons/set/notion Notion 아이콘 – PNG 및 SVG 형식으로 무료 다운로드 모든 디자이너 Icons8 인디 디자이너 icons8.kr 2022. 12. 6. [반응형웹] Responsive 체크 앱 반응형 웹 만들기 위한 필수 앱 로컬에서 작업중인 파일의 반응형 확인을 위한 경우 아직 도메인이 없는 경우에 유용하고, 트래픽 등을 고려 한다면 로컬에서 작업 완료 후에 올리는게 좋기에, 미리 확인 하기 좋은 앱 이다. 다운로드 받아서 설치후 로컬 작업 중인 경로를 넣어 주면 이처럼 다양한 디바이스에서 적용되는 모습을 확인 가능하다! 도메인이 있거나 브라우저 주소가 있는 경우 1. 웹사이트자체에서 확인 http://www.responsinator.com/ Responsinator Responsinator · About · Login www.responsinator.com http://responsivedesignchecker.com/ Responsive Website Design Tester | Medi.. 2022. 12. 6. [노션] 아이프레임으로 노션 넣기 노션페이지 iframe 으로 embed 하기 노션으로 어떤 문서를 만들고, 그 내용을 홈페이지에 넣고 싶었다. 그래서 아래처럼 링크 주소를 따서 홈페이지에 아이프레임으로 넣어 보았다. 결과 화면 노션에서 아이프레임을 지원하지 않는건가.. 구글 검색을 해보니 해당과 관련한 답변이 있었다. Q. 노션을 홈페이지에 아이프레임으로 임베드 하는 방법 I recently had the same issue, it looks like Notion doesn't allow iframes, it blocks the requests. I found this tool online: www.notioniframe.com to generate an embeddable URL and the iframe HTML code to i.. 2022. 12. 6. [book]Do it 자바스크립트 입문, 책 요약 코딩과 프로그래밍의 차이 코딩은 소스코드를 작성하는 행위 프로그래밍 : 문제를 분석하고 논리적으로 해결할 수 있는 방법을 찾아 코딩하는 과정까지 포함하는 넓은 개념 자바스크립트로 할 수 있는 일은? - 웹사이트를 동적으로 만듬 - 웹 브라우저에서 실행되는 프로그램을 만듬 - 서버를 구성, 서버용 프로그램을 만들 수 있음 (노드제이에스 자바스크립트 프레임 워크를 사용하면 서버 프로그램을 쉽게 개발 가능) 자바스크립트의 특징은? - 모든 웹 브라우저에서 작동 - 웹브라우저에서 실행결과를 즉시 확인 가능 - 다양한 용도의 프로그램을 만듬 - 다양한 자바스크립트 공개 API 사용가능 - 다양한 라이브러리와 프레임 워크 사용 + 라이브러리 : 제이쿼리 +프레임워크 : 리액트, 앵귤러, 뷰 자바스크립트 소스 작성 .. 2022. 12. 3. 패럴렉스 parallax-scroll 플러그인 https://parallax-scroll.aenism.com/ Parallax-Scroll by Aen Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify and is loosely based on Peder Andr parallax-scroll.aenism.com 2022. 11. 16. [css 활용] 하이라이터, 형광펜 효과 주기 주 사용 CSS 요소 - 가상 선택자 : before, hover - background: linear-gradient - transition html 마우스를 글자에 올리면 형광펜이 그어지는 효과예요. 그라디언트 컬러를 줄수도 있어요! :-) css body{ background-image:url(https://images.unsplash.com/photo-1601662528567-526cd06f6582?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80); background-size:cover; background-position:center center; } .wrap{ mar.. 2022. 11. 3. 이전 1 2 3 4 5 다음 728x90 반응형
