분류 전체보기174 [Javascript, css] 스크롤 내리면 카운팅 시작 되는 소스 안녕하세요! 카운팅 숫자의 업그레이드 버전을 알아보겠습니다. 우선 구현이 어떻게 되는지 결과 부터 보시죠!스크롤을 내려 주세요! Result Html Count number 사용자 명 방문자 명 대기시간 분 대기문서 건 JavaScript function animateValue(id, start, end, duration) { var range = end - start; .. 2024. 6. 25. [CSS]마우스 호버시 아이콘 모양 변경(사이드바 보기/감추기역할) 주로 사용된 csstransform:hover 1. html 2. CSS.arrow { z-index: 999; top: 50%; left: 0px; position: fixed; transform: translateX(100px) translateY(-50%) rotate(0deg) translateZ(0px); transition: transform .3s ease-out; cursor: pointer !important;}.arrow .icon-wrap { justify-content: center; align-items: center; width: 2rem; he.. 2024. 6. 19. 자바스크립트 가이드 - 이론, 기초 공부 사이트 https://wguide.co.kr/js-variable/ W.GUIDE(더블유가이드)실무자들을 위한 가이드 및 팁 공유 커뮤니티wguide.co.kr 말끔하게 정리가 잘 되어 있습니다.자바스크립트 기초 공부 하기에 좋은 사이트 입니다. 2024. 6. 18. 랩 스튜디오, 유용한 도구툴 모음(생상코드변환, 삼각형css만들기, 폰트단위변환...) 랩 스튜디오 라는 사이트에서 제공하고 있는 유용한 도구 모음 사이트 입니다. 개발/디자인 직군에 사람들에게 유용한 툴이 잘 갖춰져 있는 듯 합니다. https://sitero.co.kr/colorcode 사이트로(SITERO)필요한 도구를 가장 편리하게 개발하여 사이트로 만들었습니다.sitero.co.kr 2024. 6. 18. [figma]피그마 단축키 이 두개만 알면 작업 속도가 훨씬! 빨라집니다. 기존에 어도비 포토샵과 일러스트를 위주로 사용하시던 분들에게,피그마에 익숙해 지려면 이 두가지 단축키를 알고 시작하면 훨씬 빨라 집니다. 1. 속성 복사 / 속성 붙여넣기 요소를 선택한 뒤 마우스 우측 버튼을 누르면 아래와 같이 선택도 가능 합니다. 복사 Ctrl + Alt + C (윈도우) / command + Alt + C (맥)기존 Ctrl + c/v 에서 Alt를 추가해 주면 됩니다! 폰트, 여백, 등 해당 요소의 스타일 속성이 복사 됩니다. 디자인 할 때 가장 많이 시간이 드는 단순 노가다의 시간을 줄여주는 키. 일러스트에 프로그램에서도 (가장 좋아하던) 속성을 복사하는 스포이드 키와 비슷하다고 보면 돼요! 2. 사이즈 조절 단축키 - K 피그마 왼쪽 상단에 move 와 sca.. 2024. 6. 17. [피그마]와이어 프레임(wire frame) 제작, 유용한 템플릿 추천 피그마로 와이어 프레임 제작 할 때 유용한 템플릿을 몇개 추천 드립니다. 피그마 템플릿 검색 방법 https://www.figma.com/community 해당 부분에 들어가서 wire frame 으로 검색하면 다양한 템플릿이 나옵니다. 검색하면 다양한 템플릿이 나오는데요, 이중 유료도 있고, 플러그인을 활용하는 것도 있습니다.요즘 템플릿도 다 디자인이 잘 되어 나와서, 본인 디자인에 맞는 스타일을 골라서 쓰면 되는데요. 저는 몇가지 기준을 잡고 템플릿을 골랐습니다ui가 명확히 드러날 수 있는 디자인(강조요소 명확)너무 디테일 하지 않은 템플릿종종, 기획단계에서 지나치게 디테일 해지는 경우가 있습니다. 디자인의 자유도를 방해할 수 있기 때문에 적당히(?) 디테일하고 심플한 디자인을 찾다가 발견한 템플.. 2024. 6. 17. 3d, 액티브 웹사이트, 무료소스,웹사이트디자인 https://tympanus.net/codrops/demos/ DemosCodrops' curated collection of 500+ demos, prototypes, animations, templates, layouts, UI styles, and experimental design concepts. Download and use freely under MIT.tympanus.net 신기한, 다양한 인터랙티브한 효과들로 구성된 웹페이지를 소개하는 페이지 입니다.무료로 소스나 코드가 제공 되는 것들도 있어서, 활용하면 좋을 듯 합니다! https://tympanus.net/Development/TextureTransition/ 2024. 6. 14. [Javascript, css] 라이트모드/다크모드 설정 day night mode 요즘 사이트들은 대부분 낮/밤 모드가 있습니다.이 부분을 구현하는 방법은 여러가지가 있는데,저는 아래와 같은 방식으로 구현해 봤어요. 다크모드 설정 방법 1. 다크모드 버튼 클릭시 dark 클래스 추가 - 스크립트로 제어 2. 다크모드 버튼 아이콘 이미지는 백그라운드 이미지로 제어 - 클릭 시 css로 아이콘 변경 가능 3. root 속성으로 작성된 css를 활용 - 다크모드에서 일괄 수정 4. 아이콘 이미지의 경우(SVG) 반전 효과 사용 : css의 filter:invert(1) 속성 활용 위의 사항들을 순서로 하여 마크업과 CSS 제작을 진행해 봅니다. 최종 view 모습 (하단에서 확인) 라이트 모드 다크모드 HTML .. 2024. 6. 14. 디자인[웹사이트디자인/반응형] 웹사이트 영감 디자인 https://www.intercom.com/?ref=lapaninja Intercom: The complete AI-first customer service solutionIntercom is the complete AI-first customer service solution, giving exceptional experiences for support teams with AI agent, AI copilot, tickets, phone & morewww.intercom.com 2024. 4. 24. [웹사이트디자인/반응형] Atoms - 어토믹해빗[아주작은습관의 힘 어플] https://atoms.jamesclear.com/?ref=lapaninja Atoms. The official Atomic Habits app Tiny changes, remarkable results! Atoms is the definitive habit app inspired by the groundbreaking principles of James Clear's best-selling book Atomic Habits. atoms.jamesclear.com 2024. 4. 22. [figma]피그마 단축키 - 수평뒤집기, 수직 뒤집기 위처럼 화살표는 방향만 바뀌는 경우가 많은데, 그럴때마다 다시 아이콘을 찾을 필요 없이 단축키로 수직/수평 뒤집기를 해주면 됩니다. 피그마 실무 진행시 알아두면 좋을 단축키 피그마, 수평 뒤집기 수직 뒤집기 간단 하지만 알아두면 너무 유용한 피그마 단축키중 하나 입니다. 👍👍👍 2024. 3. 17. [figma]피그마 아이콘 쉽게 사용 방법- 플러그인 활용 피그마 아이콘 쉽게 사용하기 UI UX 디자인을 할때, 가장 필요한 요소중에 하나가 아이콘 입니다. 필요한 아이콘을 빨리 찾는 것만으로도 시간이 많이 단축 되는데요! 이때 필요한 플러그인인 구글 머터리얼 아이콘 플러그인을 사용을 추천 드려요! 설치 방법 이렇게 하시면 팝업창이 뜨면서, 바로 사용이 가능해 집니다! 구글 머터리얼 아이콘 플러그인 사용법 아래와 같이 검색을 통해서 찾아주시면 금방 찾을 수 있습니다. 두께 변경 하기 다른 아이콘으로 변경 다양한 옵션들을 통해 편하게 쓰고 싶은 아이콘을 사용해 보세요! 감사합니다 :-) 2024. 3. 17. [jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게 셀렉트 박스에서 선택 시 해당 내용으로 이동하게 하는 제이쿼리 소스 입니다. 별도 페이지 생성이 필요 없으며 id 값으로 해당 내용을 감추거나 보여줍니다. 적용 이미지 위 디자인과 같이 책보는 느낌처럼 활용도 가능한 소스 입니다. 탭과 유사한 기능이라고 보시면 됩니다. HTML 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text Chapter 2 : Select another text Chapter 3 : Selet third text box 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text.. 2024. 2. 22. [jQuery] mouseenter , mouseleave 마우스 호버 효과 - 마우스 엔터 마우스 호버효과처럼 보이지만 조금 다른 mouseenter/mouseleave 효과 입니다. 마우스가 특정 요소 위에 들어오거나 벗어날 때만 반응하므로 드롭다운 버튼이나 툴팁 등의 UI에서 주로 사용됩니다. 주로 사용되는 부분 드롭다운 버튼 인풋 박스 HTML KR KR EN CN CSS #Lang > * { display: inline-block; vertical-align: middle; } #Lang .lang_list { position: relative; width: 50px; text-align: center; font-size: 14px; } #Lang .lang_list > a { display: block; width: 100%; height: 40px; line-height:2.5; f.. 2024. 1. 31. 브랜딩 컬러와 UI/UX의 활용 비법 색상 심리학을 잘 이용한 브랜드브랜드 컬러를 잘 정해서 좋은 디자인으로 보여지는 사례 5가지 Coca-Cola (빨간색) 빨간색은 강렬하고 활기찬 이미지를 전달하며, Coca-Cola는 브랜드 메시지와 함께 빨간색을 효과적으로 활용하여 전 세계적으로 인식됩니다. Apple (은은한 회색과 흰색) Apple은 심플하고 현대적인 이미지를 위해 은은한 회색과 흰색을 사용하며, 이 컬러 조합은 고급스러움과 혁신을 강조합니다. Facebook (파란색과 흰색) 파란색은 신뢰와 안정성을 상징하며, Facebook은 이 컬러를 활용하여 글로벌 소통 및 연결을 나타냅니다. Nike (주로 검정과 주황색) 검정은 고급스러움과 강인한 이미지를 전달하고, 주황색은 활기찬 에너지를 표현합니다. Nike는 이 두 가지 컬러를 .. 2024. 1. 18. 중국어 문장부호 알고 디자인/코딩 하기 안녕하세요! 오늘은 중국어 문장 부호에 대해서 필요한 만큼만(디자이너/퍼블리싱) 알아보겠습니다. 종종 다국어 홈페이지를 제작 하게 되는데, 그중 중국어를 만나 작업하게 될 경우 유의해야할 부분이 바로 문장 부호 입니다. 특히나, 중국어의 경우, 문장 부호에 따라 여백이 유난히 넓어 디자인에 영향을 주기도 합니다. 百度空间，让世界发现你阅读、下载、分享文档 위의 두 기호가 서로 다른 역할을 합니다. 둘다 쉼표 이지만, 역할을 달라요. 1. 반점 쉼표와 유사 합니다. 짧은 쉼을 나타냅니다. 가장 일반적인 것으로서 문장 중에서 가장 많이 쓰입니다.2. 모점반점보다는 짧은 쉼표라고 볼수 있습니다. 단어를 열거할때 쓰입니다. 모점은 쉼표와 비슷하게 생겼는데, 쉼표와 반대 방향으로 되어 있죠. 저처럼 중국어를 (일도).. 2023. 12. 12. [디자인] 로고 무료 제작, 고퀄 사이트 , 즐겨찾기 로고는 아무래도 많은 시행착오를 겪어야 하는 디자인 중에 하나입니다. 여러가지 디자인 시안을 통해 아이디어를 엿볼 수 있는 좋은 사이트를 발견 했습니다. 원본을 얻으려면 비용을 추가해야 하지만, 아이디어를 참고 하기엔 좋은 듯 합니다! :-) 1. 브랜드 이름과 슬로건 적기 2. 브랜드 키워드 적기 3. 컬러 스타일 선택 두두그. 로고를 만들어 주고 있습니다. 결과물을 보는 화면이 좋습니다. 큼직하게 보여 주니, 실제로 적용했을 때 어떤 느낌일지 예상해 볼 수 있어요!! 10개 이상의 결과물을 보여주는데, 하단에 idea 아이콘을 클릭하면 같은 디자인에 다양한 컬러 버전을 보여 줍니다. 로고를 만들어 주는 사이트는 많지만, 여기는 생각보다 고퀄의 이미지를 생성해 줘서 놀랍더라구요. 다양한 아이디어를 엿볼.. 2023. 12. 8. 디자인 꿀팁! 포토샵과 xd 일러스트에서 아이콘을 폰트 처럼 사용하기 디자인을 하다가 가장 유용한것중에 하나가 바로 아이콘을 바로바로 사용하는 것입니다. 그중 가장 유용한게 바로 폰트처럼 아이콘 사용하는 것인데요! 구글 아이콘도 폰트처럼 사용 가능하다는 것을 발견 했어요! 사용법 1. 아래 사이트에서 사용할 아이콘을 골라줍니다. Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com 2. 아이콘의 텍스트를 적어주세요. 3.폰트를 "Material Icons" 으로 변경해 줍니다. 그럼 텍스트로 .. 2023. 12. 1. [javaScript] 클릭 시 클래스 명 변경 되는 자바스크립트 클릭시 자동으로 아이콘의 클래스 명이 변경되게 하는 소스 입니다. 아이디 저장 과 같은 기능뿐 아니라, 클래스 명이 토글 형태로 변경 되어야 하는 부분에 사용할때 가능 합니다. *방법 : 폰트 아이콘의 클래스명을 제어해서 아이콘 모양을 변경해줍니다! html 아이디 저장 css .login_save{ margin:3em } .login_save i{ font-size: 26px; padding-right:3px; cursor:pointer; font-weight:400; color:#999; letter-spacing: -1px; } .login_save i.xi-check-circle{ color:#000 } JavaScript const logo = document.getElementById("sta.. 2023. 11. 29. [js/css] 스크롤바 커스텀 디자인 mCustomScrollba, 스타일 플러그인 mCustomScrollbar는 사용이 간편해서 많이 사용되는 커스텀 스크롤바 중 하나 입니다. 사용하다 보니 자꾸 손이가는 플러그인중 하나라서 사용법과, 자료를 함께 공유하고자 합니다.🙆 특징 다양한 디자인이 있다. 컨텐츠에 가로값에 영향을 주지 않는다. 가로스크롤 생성이 가능하다 사용방법 css / js 소스를 불러온다 사용할 div에 클래스를 추가해준다 스크립트를 작성해 준다 1. 소스불러오기 2. class 추가 하기 ............. 3. 스크립트 작성 이 스크롤바의 최대 장점인 다양한 디자인 적용입니다. 아래 사이트에 들어가시면 여러가지 디자인을 확인할 수 있습니다. https://manos.malihu.gr/repository/custom-scrollbar/demo/examples/s.. 2023. 11. 24. [css]구글 아이콘 웹폰트 사용방법 저는 웹 퍼블리싱을 할때 주로 웹폰트아이콘을 사용합니다. 아이콘 이미지 보다도 사용성이 무척 좋기 때문인데요. 사용방법 구글 웹아이콘(바로가기 url) 로 들어가서 사용하고자 하는 아이콘 선택 fillter 옵션에서 - fill / weight / 등 옵션 선택하기 경로 및 복사 하기 **별도로 저장해서 이미지로도 사용이 가능합니다. 1. 아이콘 선택 (원하는 스타일로 맞춤) 2. 스타일 링크 복사 3. 스타일 css 복사 4. html로 적용 home check_box toggle_off download_for_offline result 라인스타일(line icon) 꽉찬스타일(fill) https://fonts.google.com/icons?icon.set=Material+Symbols 다음엔 폰트 .. 2023. 11. 23. [css] 말줄임 표시 방법 , 1줄 or 2줄 일때 말줄임표는 정말 자주 쓰입니다. 스크립트로 처리하기도 하지만 Css로도 처리가 가능합니다. 사용된 css - white-space:nowrap; 자동줄바꿈방지 - overflow-x:hidden; 넘어가는 것 안보이게 - text-overflow:ellipsis; 넘어서 안보이는 텍스트 ... 표시 *주의 : width값 지정 필요 html 텍스트가 길어지면 말줄임표가 자동으로 생깁니다. 텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다. css body{ color:#555; } .wrap{ display: flex; align-items: center; height: 200px; justify-content: c.. 2023. 11. 22. [css] white-space 여백 공백 처리 속성(pre, pre-wrap,pre-line) , br 태그 먹을까? html에 내용을 넣을때, white-space 속성을 사용하는 경우가 있습니다. 여백과 공백을 다루는 white-sapce 속성에 대해서 조금더 자세히 알아봤어요! 줄바꿈 부분이 각 속성마다 다르기에 문득,, br 태그를 통해 줄바꿈이 가능한지 궁금 했습니다. 공백과 들여쓰기 줄바꿈 normal 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 nowrap 공백 여러개가 있어도 1개만 적용 줄바꿈 없음 pre 공백 있는 그대로 표시 줄바꿈 없음 pre-wrap 공백 있는 그대로 표시 자동 줄바꿈 pre-line 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 break-spaces 공백 있는 그대로 표시 자동 줄바꿈 pre / pre-wrap / pre-line 속성을 각각 비교해 보기로 했습니다. - 같은.. 2023. 11. 21. [Css] 배경 blur 버튼 만들기 (애플 공식 홈 st. 글래스모피즘버튼 ) 버튼 뒤쪽에 blur 효과가 적용되어 버튼을 좀더 도드라져 보이게 합니다. 공식 애플 웹사이트를 방문했다가 위와같은 스타일의 버튼이 적용되어 있는 것을 보고 만들어 봤어요! 사실 이 스타일은 글래스모피즘 이라고 불립니다. 사용되는 css backdrop-filter 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다. 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다. 적용 방법 backdrop-filter: blur(2px); 버튼으로 만들기 결과 css .btn_blur { backdrop-filter: blur(4px); background-color: rgb(66 66 69/70%); border-radius:.. 2023. 11. 13. 모바일에서 input 태그, number 숫자 자판(키패드) - 안드로이드/아이폰 모바일 퍼블리싱 - 인풋 타입에서 숫자 자판 나오게 하기 input type 으로 숫자, number을 지정할 때 일반 자판이 아닌 숫자 자판을 나오게 하려면 아래와 같이 지정해 주면 됩니다. 안드로이드 아이폰, IOS 위처럼 적게 입력하면 Android OR IOS 모두 숫자키패드가 나옵니다. 참고 : https://stackoverflow.com/questions/25425181/iphone-ios-presenting-html-5-keyboard-for-postal-codes 2023. 10. 16. 캐스트 퍼즐이란? (데블스 플랜 감옥퀴즈) 요즘 넷플릭스에서 한창 재밌게 보고 있는 데블스 플랜입니다. 데블스 플랜에서 가장 낮은 점수 두명이 감옥을 가게 되는데, 감옥에 들어갈때 캐스트 퍼즐이 하나씩 놓여 있습니다. 진짜, 집요하게 붙들고 이리저리 맞추다 보면 어느샌가 맞춰 지는 이게 뭔지 궁금해서 찾아보다가 구매까지..ㅎㅎ 캐스트 퍼즐이란? 캐스트퍼즐은 일본의 하나야마사에서 만드는 퍼즐 브랜드라고 하네요. https://hanayama-toys.com/ HUZZLE (CAST PUZZLE) Disassemble and Reassemble Puzzle 직역하면, 모으고 해체하는 퍼즐 저는 이 아이를 구매해 봤어요! 캐스트 링. 구매는 쿠팡을 통했습니다. 현재 가격대는 만원에서 만 오천원 사이인데,, 캐스트퍼즐 / 하나야마 퍼즐 등으로 검색 하면.. 2023. 10. 6. [디자인]색의 비율과 균형 , 강조 색상의 사용 60–30–10 규칙균형잡힌 색상을 구성하기 위한 조화로운 비율60% → 중성색 (흑/백) 30% → 보조색 10% → 강조색(악센트) 주로 실내 인테리어를 할때 많이 사용 하는 비율로 강조 색상을 10%비율로 설정 하는 것이다. 웹에서 강조색(CTA버튼) 웹에서는 5~10% 정도로 사용 해도 충분하기도 하다. CTA 버튼에 주로 사용 하여 사용자의 시선을 유도 한다. *CTA란? 마케팅에서 사용되는 용어입니다. CTA는 제품이나 서비스를 고객에게 판매하기 위해 사용되며, 보통 웹사이트나 광고 등에서 볼 수 있습니다. CTA는 고객에게 어떤 행동을 취하도록 유도하는 문구나 버튼입니다. 강조색에 인터랙션 추가마우스 호버시 → 밝게 마우스 포커스 시(클릭) → 진하게 강조색 사용 범위버튼, CTA 버튼, 링.. 2023. 9. 7. 앱/웹 디자인 Color (중요도에 따라) 모바일이나 웹 등 디자인시 가장 중요하다고 할 수 있는 부분이 바로 컬러 입니다. 의미에 따른 컬러 사용으로 다양한 정보를 제공 할 수 있기 때문입니다. 웹 앱 UI 디자인시 컬러의 의미와 사용법을 알아봤습니다. UI 디자인에서 컬러는? 상호작용 표현( 버튼, 체크박스, 컨트롤박스, 링크, 슬라이더) 의미 전달 (경고, 금지, 오류, 안전,긍정) 상태 전달 (활성/비활성, 컨트롤상태) 위계 순서 (중요도 순서) 강조 브랜드 컬러로서 - 브랜드를 나타내는 고유색 - 브랜드 통일감 - 사용자에게 동일한 경험과 메세지 전달 컬러의 구성 Primary color - 주색 Secondary color- 보조색(액션색상,강조색) 흑백 액션 색상(상호작용) 색상의 사용 버튼, CTA 버튼, 링크, 컨트롤, 토글, 스.. 2023. 9. 6. [디자인]앱 추천 참고 사이트- 레퍼런스 모음 사이트 (국내/해외) 국내 앱 디자인 레퍼런스 소개 https://wwit.design/ 아래와 같이 다양한 카테고리 혹은 페이지 별로 시안을 확인 할 수 있다 해외 앱 소개 https://mobbin.com/browse/ios/apps?sort=publishedAt 2023. 8. 3. 구글 애널리틱스, 재방문 수 확인 (DAU/WAU) 월간/일일 사용자 수 구글 애널리틱스 - 사용자 재방문률 확인 확인 경로 : 보고서 > 참여도 > 참여 > 개요 > 사용자 재방문마케팅 및 사이트 운영을 위해서 구글 애널리틱스를 사용하는 경우 점차 늘고 있어요. 사용자 재방문률은 매우 중요한 지표중에 하나 이고, 위의 구글 애널리틱스 메뉴를 통해 확인이 가능합니다. DAU / WAU / MAUDAU : 일일 활성 사용자 수: 지난 24시간 동안의 활성 사용자 수 WAU : 주간 활성 사용자 수 : 지난 7일 동안의 활성 사용자 수 MAU : 월간 활성 사용자 수 : 지난 30일 동안의 활성 사용자 수 그래프 상 표기 기준WAU / MAU = 주간활성사용자수 / 월간 활성 사용자자수 = 월간 사용자대비 주간 사용자수 DAU / WAU = 일일활성사용자수 / 주간 활성 사용자자.. 2023. 8. 3. 이전 1 2 3 4 5 6 다음 728x90 반응형
