유용한사이트24 [디자인] 로고 무료 제작, 고퀄 사이트 , 즐겨찾기 로고는 아무래도 많은 시행착오를 겪어야 하는 디자인 중에 하나입니다. 여러가지 디자인 시안을 통해 아이디어를 엿볼 수 있는 좋은 사이트를 발견 했습니다. 원본을 얻으려면 비용을 추가해야 하지만, 아이디어를 참고 하기엔 좋은 듯 합니다! :-) 1. 브랜드 이름과 슬로건 적기 2. 브랜드 키워드 적기 3. 컬러 스타일 선택 두두그. 로고를 만들어 주고 있습니다. 결과물을 보는 화면이 좋습니다. 큼직하게 보여 주니, 실제로 적용했을 때 어떤 느낌일지 예상해 볼 수 있어요!! 10개 이상의 결과물을 보여주는데, 하단에 idea 아이콘을 클릭하면 같은 디자인에 다양한 컬러 버전을 보여 줍니다. 로고를 만들어 주는 사이트는 많지만, 여기는 생각보다 고퀄의 이미지를 생성해 줘서 놀랍더라구요. 다양한 아이디어를 엿볼.. 2023. 12. 8. [디자인]앱 추천 참고 사이트- 레퍼런스 모음 사이트 (국내/해외) 국내 앱 디자인 레퍼런스 소개 https://wwit.design/ 아래와 같이 다양한 카테고리 혹은 페이지 별로 시안을 확인 할 수 있다 해외 앱 소개 https://mobbin.com/browse/ios/apps?sort=publishedAt 2023. 8. 3. [무료소스] 무료 신용 카드 목업, 소스 피그마 - 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. 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. 새해 계획표, 신년 계획 양식, 목표세우기 새해가 되면 꼭 하는것중 하나인 새해 계획 세우기! 요즘엔 테이블이나 잘만들어진 계획표가 많긴 하지만 어릴때 콤파스로 원형 모양을 만들어 그리던 아날로그 타입인 원형 시계모양이 제일 보기가 편하다. 엑셀이나 뭐 그런 툴로 비슷하게 만들 수 있긴 하지만 어지간히 불편한게 아니여서 혹시나 해서 관련 프로그램이 있나 해서 찾아 보니! 있었다. 사이트가 만들어 진지 좀 오래 됬긴 하지만 원형의 형태와, 색으로 구분되어지는 영역이 그래도 나름 쓸만하다. 수정 방법 텍스트와 시간 수정 방법 텍스트 내용을 수정 한다음에 계획표 적용을 눌러 준다. 컬러 변경 아래처럼 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. 이미지 로렘 입숨- 이미지 자동 생성 경로 로렘입숨이 텍스트 자동생성 버전이라면 로렘픽숨은 이미지 자동생성 버전. 웹디자인 시안 기획 이나 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. [아이콘]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. 대쉬보드 소스/디자인 참고 사이트 종종 대쉬 보드 관련 디자인을 하게 될 때 참고하기 좋은 사이트들 구매를 하거나 해야 하는 사이트들도 있는데, 디자인만 참고하면 될듯ㅎ Dashlite - 어드민 템플릿 https://dashlite.net/demo1/crm/support.html CRM - Support | DashLite Admin Template Hello Ishtiyak, We are really sorry to hear that, you have face an unexpected experience. Our team urgently look this matter and get back to you asap. Thank you very much. dashlite.net 다양한 분야의 대쉬보드 형태를 볼수 있고, 컬러 등 다양한 레.. 2022. 2. 24. 큐알 코드 제작- 무료 제작 사이트 큐알 코드 무료 제작 웹 사이트를 바로 갈 수 있게 해주는 큐알 코드! 요즘은 휴대폰 사진기능에서 큐알 코드만 인식이 되면 바로 해당 웹사이트로 연결 되기 때문에 QR 코드를 활용하는 경우가 종종 있다. 큐알코드 만들기 1. http://www.nfcqr.kr/qrc/ 사이트에 접속한다. 2. 홈페이지 URL을 입력한다. - 모바일 사이트가 있다면 모바일 주소를 입력(휴대폰에서 바로 연결) 3. 생성하기를 누른다. 4. 다운로드를 누른다. http://www.nfcqr.kr/qrc/ QR코드 발급 만들기 제작 무료 생성 NFCQR 무료 QR코드 발급 만들기 제작 생성 www.nfcqr.kr 2022. 2. 22. CAN I USE ? 크로스 브라우징, CSS 사용 범위 확인 Can I use 사이트 보는 방법 https://caniuse.com/ 해당 사이트에 접속 해서 CSS 속성을 입력해 준다. text-decoration-style: wavy 텍스트 언더라인을 물결로도 줄 수 있다는 사실이 놀라워서 (잘 몰랐던 스타일) 어느 브라우저 까지 되는지 찾아 봤다. 빨간 글씨 IE 는 안됨. 해보니 진짜 안됌.. 엣지도 12-18 버전 에 해당하는 브라우저는 안된다.. 최신 엣지 버전에서 적용해 보니 잘 보여진다. 사용자 분포 확인 상단 두번째 탭을 보니, 사용자들이 주로 어떤 버전을 사용하는지 분포 비율을 한눈에 볼 수 있다. 모바일의 경우, 대부분 이 스타일이 무리없이 보이는 듯 하고, 크롬 브라우저를 사용하는 대부분 무리없이 보여진다.. 2022. 1. 21. 웹디자인용 아이콘 폰트(서체,무료 아이콘 사이트) 웹디자인 할때 자주 쓰는 아이콘 폰트 XEICON 웹페이지나 product 디자인 등을 할 때 자주 사용하는 폰트 아이콘 이다. 폰트 아이콘이란? 일반적으로 쓰는 폰트 처럼 서체를 다운 받아 설치하고, (xeicon.ttf) 포토샵이나 일러스트에서 아이콘을 폰트 처럼 사용하는 것을 말한다. 서체 설치를 하고나면 이렇게 일러스트나, 포토샵 프로그램 글자 선택 창에 해당 폰트가 생긴다. 사용하기 http://xpressengine.github.io/XEIcon/library-2.3.3.html 위 페이지에 들어가서 사용할 아이콘을 복사한 뒤에 일러스트에서 텍스트 입력 툴을 누른뒤에 붙여넣기 해준다. 이렇게 아이콘을 폰트로 써서 그냥 사용하는 경우도 있고, 때에 따라, 굵거나 얇은 아이콘이 필요한 경우가 있는.. 2021. 11. 25. [XD무료 템플릿] UI 모바일 UI UX 디자인 키트 XD UI 프로젝트 키트 모바일 전용 무료 XD 키트에 있는 모바일 전용 디자인을 확인 할 수 있는 템플릿! 아이콘 등 쓸만한 요소들이 다 수 있어서 자료 공유 원본은 어도비공식 사이트에서 다운로드 가능하다. *다만 XD를 사용하려면 어도비를 구매해야 합니다..ㅠㅠ 무료 XD Vault 키트 및 템플릿 다운로드 https://www.adobe.com/kr/products/xd/features/ui-kits.html Vault 키트 디자인 소스 이 템플릿에는 가이드 부터 해서 디테일하게 필요한 모든 요소들이 거의 다 들어있다. 스크린샷 파일을 다운로드 받으면 아래 이미지들의 원본을 XD로 볼 수 있다. 프로토 타입까지 구현되어 있어서 XD 디자인을 한다면 참고 하면 좋을 듯! 원본 다운로드 경로 https.. 2021. 8. 5. XD 디자인 무료 키트 - 노트 프로그램 디자인 XD UI 프로젝트 키트 XD 툴을 사용하면서 무료 키트를 찾다가 발견한 디자인. 요즘 이런 다양한 UI 키트를 보다보면 그 안에 디자인 요소들이 잘 정리되어 있어서 디자인 공부하기에도 유용하다. 다만 XD를 깔려면 어도비를 구매해야 한다는 단점..ㅠ 그래도 나중에 쓸만한 요소들이 많은 무료 키트들을 틈틈이 보고 모아두면 디자인 작업 속도가 더욱 빨라질듯 하다! 무료 XD UI 키트 및 템플릿 다운로드 https://www.adobe.com/kr/products/xd/features/ui-kits.html 여기서 내가 다운 로드 받은 디자인은 NOTE APP 이었다. 파일을 다운로드 받으면 아래 이미지들의 원본을 XD로 볼 수 있다. 프로토 타입까지 구현되어 있어서 XD 디자인을 한다면 참고 하면 좋을 .. 2021. 8. 4. css 실전 예제 및 레이아웃 익혀볼 사이트 CSS 레이아웃을 배웁시다 이 사이트에서는 모든 웹 사이트의 레이아웃에 사용되는 CSS의 기초를 다룹니다. 이곳에서는 여러분이 선택자와 프로퍼티, 값이 무엇인지 알고 있다고 가정합니다. 그리고 레이아웃 작업이 여러 ko.learnlayout.com 처음 css를 배울때 많이 도움이 되어던 사이트 실전 예저들과 함께 복사하기/ 붙여넣기가 되어서 유용한 사이트 2021. 1. 9. [무료파일]sns아이콘 png 파일, 주요 앱아이콘 원본 AI SNS 아이콘 이미지. 투명 배경 PNG 파일 작업하다가, 최신 아이콘 앱 이미지가 없어서 다시 정리완료. 아이콘 앱 컬러 등이 조금씩 바뀐다.. 그라데이션이 있다가, 없다가 등등 가끔씩 필요한 투명 배경의 SNS 아이콘들. 네이버 밴드 앱 아이콘 / 유투브 앱 아이콘 / 인스타그램 앱 아이콘 페이스북 앱 아이콘 / 카카오톡 앱 아이콘 / 카카오 스토리 앱 아이콘 / 트위터 앱 아이콘 다운로드 PNG 이미지 파일 일러스트 원본 파일 2020. 12. 7. 디자인 디테일 게임, Cantunsee. cantunsee.space/ Can't Unsee A game where you need to pick the design that is most correct. Test your attention to details! cantunsee.space A game where you need to pick the design that is most correct. Test your attention to details.. 오.. 심심할때 하면 재밌을 수도 있고 짜증날 수도 있겠다. 그래도 사실 디자인 할때 이런 사소한 부분들이 굉장히 고민될때가 있는데 이게 정답인지는 확실히 알길이 없지만 여하튼 방향을 잡아주는데는 도움이 되는 것 같다. 근데.. 하다가 이쯤 되니까 이제 ㅋㅋㅋ 진짜 잘 ㅁ르겟.. 마치 틀린.. 2020. 12. 6. 구글 폰트- 구글 웹폰트 사용방법, (저작권) 디자인 무료폰트 디자인 할 때 사용 가능한 무료 폰트 찾기 구글 폰트 : 웹폰트 적용도 가능하고, 디자인 하기위해 다운로드도 가능한 무료 폰트 디자인 하다가 늘 염두에 두는것 중에 하나가 폰트 저작권 부분에서 가장 안전하고 두께 종류도 다양한 Noto Sans 주로 사용하지만,, 종종 꾸밈이 필요한 폰트를 사용해야할때, 애용하는 폰트 사이트 이다. 저작권 관련 해서는 아래와 같이 이야기 하고 있다. 번역기 돌려보면... 대충 아래와 같은 말인데 중요한건 모든 글꼴은 무료이며 공개 소스 라는 것! 멋진 타이포그래피를 통해 웹을 더욱 아름답고 빠르며 개방적으로 만듭니다. 웹 사이트와 제품에 개성과 성능을 제공하는 가장 좋은 방법은 훌륭한 디자인과 기술을 이용하는 것입니다. 우리의 목표는 직관적이고 강력한 오픈 소스 디자이너.. 2020. 7. 25. 구글 머터리얼 가이드 컴포넌트 https://material-components.github.io/material-components-web-catalog/#/ Material Components Web | Catalog material-components.github.io MATERIAL COMPONENTS FOR THE WEB MA 다양한 리소스와 함께, 구글 머터리얼 디자인을 기반으로 하는 html 코드 소스를 제공하고 리액트 소스도 함께 볼 수 있는 사이트. 컴포넌트 종류는 Home Button Card Checkbox ChipsData Table Dialog Drawer Elevation FABIcon ButtonImage ListLayout GridLinear Progress IndicatorListMenuRadio But.. 2020. 7. 15. 이전 1 다음 728x90 반응형
