분류 전체보기174 CSS 애니메이션 타이밍 효과 비교 (linear, ease, ease-in, ease-in-out) 주 사용 요소 animation-timing-function, 대표적인 설정값 linear : 일정한 속도로 진행 ease : 천천히 시작되고 속도가 줄어들면서 끝난 ease-in : 천천히 시작 ease-out : 빠르게 시작 ease-in-out: 빠르게 시작되어 평균속도 유지 Result 각 버튼을 클릭하면 속도확인 가능합니다. Html 기본값 linear ease ease-in ease-out ease-in-out Css div{ margin:50px auto; display:block; vertical-align: top; width:100px; height:100px; background:#202228; border-radius:6px; text-align:center; line-height:.. 2023. 8. 2. 베이글, 통호밀과 밀가루의 칼로리 비교. 통호밀과 밀가루의 차이 통호밀(Whole Wheat): 밀의 모든 부분을 사용한 형태로 영양가가 풍부하고 건강에 좋습니다. 밀가루(All-Purpose Flour): 밀의 일부만 사용한 가루로 영양소가 적지만 베이킹 등 다용도로 사용됩니다. 1. 통호밀(Whole Wheat): 통호밀은 밀의 추출과정을 거치지 않은 형태로 사용되는 호밀(whole wheat) 곡물입니다. 밀의 겉껍질, 견과, 견과 내의 엔도스퍼먼트까지 모두 함께 사용됩니다. 이렇게 모든 부분을 포함하는 것으로 영양가가 풍부하며 식이섬유, 비타민, 미네랄, 단백질 등이 풍부하게 함유되어 있습니다. 2. 밀가루(All-Purpose Flour): 밀가루는 밀을 분쇄한 가루로, 주로 백미만을 사용하여 견과나 견과 내의 부분을 제거한 형태입니다.. 2023. 8. 2. [Css 활용] 말풍선 위 아래로 움직이는 효과, 키프레임 주 사용 CSS - animation - keyframe + animation-timing-function + flex - 정가운데 배치 Html Css .wrap { height:100vh; display:flex; align-items:center; justify-content:center; } .moving { animation: move 0.7s ease-in 0s infinite alternate; margin-top: 0; width:80px } @keyframes move { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } Result *result 클릭해 주세요. 2023. 8. 1. [셔터스톡 기고자]디자인/사진 업로드 하기 안녕하세요!저는 UI UX 디자이너로도 일을 하고 있습니다.연습삼아 제작한 작업물들을 버리기 아쉬워서 셔터스톡에 업로드 했습니다. 테스트 삼아 직접 직은 사진도 몇개 올려 놨었죠. 총 7개 이미지를 업로드 해두었는데, 약 10번정도의 다운로드가 이루어 졌어요! 총 수익은 약 50달러정도 됩니다. (정말 소소 하지만 그래도 누군가 다운로드 받았다는 알람이 오면 기부니가 좋습니다) 그래서 틈틈이 디자인 자료를 업로드 해야 겠다 싶어업로드과정과 함께 이 글을 쓰게 되었습니다. 셔터스톡에 내 디자인 업로드 하기 셔터스톡에 내 이미지 업로드 방법 순서 1. 셔터스톡 기고자(shutterstock contributor) 에 가입한다. 2. 디자인(일러스트)을 가이드*에 맞게 작업한다.3. 업로드 한다. .. 2023. 7. 16. [웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점) 웹디자인/ 퍼블리싱 디자인 할 때 화면 크기를 어느정도로 잡아야 할지 정확히 잘 모를때가 있다. 가로값 기본은 1980이라면 높이값의 경우 모니터 사이즈인 1080이 아닌 약 1053 으로 해야 한다(상단URL 부분등 제외) 디자인 작업할때 자주 쓰는 해상도와 높이값 1. 1920 x 1080일명 FHD(Full High Definition)라고 불리는 해상도24인치 데스크탑, 보편적인 모니터 크기의 해상도XD 나 figma 에서 작업시 뷰포트는 1053px💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼고 작업을 한다. viewport는 약, 1053px 정도로 설정 2. 1536 x 864FHD 노트북의 해상도1920 x 1080에 125% 배율을 적용한 해상도노트북 폰트 사이즈 기본 .. 2023. 7. 6. [포토샵활용]gif 이미지 흰 테두리 없애기- 매트 설정 포토샵 에서 gif 내보내기배경이 있는 경우는 상관 없으나 투명 배경으로 내보낼때 주변에 흰테두리가 생기는 경우가 있습니다 이렇게 투명도가 전혀 먹지 않는 상태로 내보내 지게됩니다. 이때 몇가지 설정을 수정하여 내보내면 조금은(?) 나은 상태의 gif 투명 이미지를 만들 수 있습니다 기본설정 이렇게 미리 gif 이미지를 만들어 두었습니다. 웹용으로 저장 하기를 들어가서 설정을 확인 하면 투명디더 없음 / 매트 (흰샛배경) 으로 설정된 것을 볼수 있어요! 설정 수정 투명디더 없음 -> 확산 투명디더 매트 -> 없음 (양% 조절) 이렇게 두개를 설정해 주시고 저장을 눌러 주시면 됩니다. 결과는 이렇습니당 ㅠ 사실 투명도를 포함하는 완벽함 gif 만들기는 쉽지 않아요. 가능한 배경 색을 포함하는 gif 를 디.. 2023. 7. 5. css background 속성 / 단축 속성 / 주의점 css 상에서 백그라운드로 이미지를 넣을 때 주로 꽉찬 배경 이미지를 넣고자 할때 쓰인다. 자주쓰지만 또 자주 헷갈리는 속성중에 하나. 속성명이 길기 때문에 단축 속성으로 적어 주는게 좋다. 특히 단축 속성엔 유의해야할 몇가지를 잘 알아두면 좋을 듯 하다! 1. css background 속성 종류 background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment 2. Css 단축 속성 background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cli.. 2023. 6. 26. 모달팝업, 모달창, 이미지 슬라이드 제이쿼리 플러그인 - 무료(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. 새해 계획표, 신년 계획 양식, 목표세우기 새해가 되면 꼭 하는것중 하나인 새해 계획 세우기! 요즘엔 테이블이나 잘만들어진 계획표가 많긴 하지만 어릴때 콤파스로 원형 모양을 만들어 그리던 아날로그 타입인 원형 시계모양이 제일 보기가 편하다. 엑셀이나 뭐 그런 툴로 비슷하게 만들 수 있긴 하지만 어지간히 불편한게 아니여서 혹시나 해서 관련 프로그램이 있나 해서 찾아 보니! 있었다. 사이트가 만들어 진지 좀 오래 됬긴 하지만 원형의 형태와, 색으로 구분되어지는 영역이 그래도 나름 쓸만하다. 수정 방법 텍스트와 시간 수정 방법 텍스트 내용을 수정 한다음에 계획표 적용을 눌러 준다. 컬러 변경 아래처럼 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. 이전 1 2 3 4 5 6 다음 728x90 반응형
