WWWEB107 디자인 시스템 정의 및 가이드 예시 디자인 시스템이란? 디자인 시스템은 디자인 원칙과 중요한 UX 전략에 의해 결합된 UI 구성 요소의 모음으로 사용자 경험 내에서 각 구성 요소가 어떻게 생활하는지에 대한 지침을 제공함. 레고처럼 각 구성 요소를 다양한 조합으로 재사용하여 제품을 빌드하거나 업데이트. 디자인 시스템은 종종 스타일 가이드로 디자인 정보를 포함. 색상, 타이포그래피, 스타일 등 일관된 UI는 전체 디자인 시스템을 가치 있게 만듦. 디자인 시스템 예시 구글(Google)의 머티리얼 디자인 Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps te.. 2023. 9. 7. [CSS] ":nth-child()"로 몇 번부터 몇 번까지 선택하기 위 그림처럼 기획에서 평소에 잘 보지 못한 디자인을 요청해옴~ 해당 요소에 평범하게 클래스를 주고 스타일을 입히는 것이 일반적인 방법이었으나, nth-child로 몇 번부터 몇 번까지 선택하는 방법을 사용함. 해당 기획은 테이블이 아닌 클릭하는 요소라 위 마크업처럼 안에 버튼들로 100개를 채워줌~ ... ... ... . . . ... 디자인은 41번부터 45번까지 컬러를 입혀야 하기 때문에, :nth-child()로 간단하게 해주면 끝~~~ .button-list :nth-child(n+41):nth-child(-n+45){ background: #79d6df; } 알아두면 좋은 선택 예시 /* n번 단일 선택 */ .selector:nth-child(n){ background: pink; } /* .. 2023. 8. 21. [Design] 153로지틱스 (#animation #반응형) 휠 스크롤 시 텍스트나 circle 라인 애니, 모션 등 괜찮은 애니메이션이 많이 지루하지 않고 재밌게 구성되어 있는 사이트라 생각됨. 153로지스틱스 상품을 담아 가치를 빚다. 153로지스틱스 홈페이지 입니다. www.153logistics.com 2023. 8. 11. 타입스크립트 핸드북, 윈터루드님의 소개 - 한 입 크기로 잘라먹는 타입스크립트 한 입 크기로 잘라먹는 타입스크립트 ts.winterlood.com 🌱 Section 1. 타입스크립트 개론 기술을 잘 이해하려면 그것이 어떤 배경에서 탄생했는지 알 필요가 있습니다. 1섹션 에서는 타입스크립트의 탄생 배경을 살펴보며 타입스크립트가 해결하고자 했던 문제가 무엇이고 타입스크립트가 어떤 특징을 가지고 있는지 자세히 살펴봅니다. 🌱 Section 2 ~ 3. 타입스크립트 기초 다지기 가장 기본적인 타입스크립트의 문법을 살펴봅니다. 동시에 타입스크립트가 말하는 타입이란 정확히 무엇인지 그리고 타입들이 서로 어떤 관계를 맺고 어떻게 상호작용하는지 살펴봅니다. 🌱 Section 4 ~ 6. 다양한 타입스크립트 문법 살펴보기 함수 타입 정의, 함수 오버로딩.. 2023. 7. 10. 포토샵 손바닥툴 stuck버그 바쁜 일정 속에 포토샵에서 핸드툴 버그가 발생함... ㅠㅠ 핸드툴은 보통 선택툴에서 스페이스바를 눌러서 화면 이동해서 작업을 하는데, 업데이트 후 스페이스바를 손을 떼도 계속 스페이스바를 누른 것처럼 동작함. 핸드툴을 꾹 눌러서 선택해도 동일한 증상임. 현재 윈도우 10에서 발생하고 있는 듯. Preferences > Tools > Enable Flick Panning, Animated Zoom 위 경로로 들어가서 두 옵션도 꺼보았으나 효과없음 ㅠㅠ 24.5 Hand tool became unusable In 24.5 the hand tool often remains stuck. Holding the spacebar or simply activating the tool, when the mouse but.. 2023. 7. 3. [일러스트] 아트보드를 오브젝트 사이즈에 딱 맞추는 방법 어도브 일러스트에서 작업한 것을 SVG 코드로 변환할 때가 종종 생기는데, 아트보드를 오브젝트 크기에 딱 맞추는 간단한 방법이 있으니 그것은 바로 Fit to Artwork Bounds Object메뉴에 Artboards메뉴로 가면 바로 찾을 수 있씀~~ ㅎㅎ 끝 ~ 😏 2023. 6. 20. [벤치] 네이버 활용백서 네이버의 PC화면 개편과 함께 어떻게 바꼈는지에 대한 웹 페이지도 따로 제작해놓음. 그 중에서 애니메이션 효과가 괜찮아서 나중에 참고해볼만한 것을 남겨봄~ 비디오로 제작된 메인 비주얼은 이번 PC화면 개편의 컨셉인 모바일 UI를 PC로 가져왔다는 점을 잘 나타내줌. 스크롤이 움직일 때 화면은 고정되고, 안에 아이템들만 움직이는 패럴럭스는 언제봐도 재밌는 요소인 듯~ 카드가 겹치는 듯한 UI 아이디어는 나중에 개인적으로 활용해볼만 함. 네이버 PC 메인 이렇게 새로워집니다! campaign.naver.com 2023. 6. 15. [vscode] css파일에 나오는 단위 힌트 레이어 끄는 방법 vscode에서 css파일을 수정을 하는데, 은근히 저 숫자들을 바꾸는데 자꾸 힌트 레이어가 떠서 뭔가 불편함. 저건 하드코딩으로 바꾸는게 빠른데.... 그래서 저 기능을 꺼보려고 찾아봄~~ 봄~~ 봄~~ 혹시 익스텐션때문인가 싶어 이것저것 disabled 시켜보고, 설정에서 hint를 찾아보기도 했으나 실패 @ ㅁ @a;; (여... 영어가 짧다 ㅠㅠ) 결론은 ① 설정에서 suggest키워드를 검색. ② Suggest: Show Units 에 체크박스를 해제. 끝~ 2023. 6. 13. [css] 텍스트 안에 그라데이션 배경 움직여보기 기획자에게 축하 메시지가 들어가는 이벤트 기획서가 도착함. 뭔가 경품도 주고 하는 이벤트인데, 그냥 글자만 "축하함"이라고 넣기가 허전해보여서, 뭐가 없을까 하다가... CSS에 background-clip: text; 속성을 이용해 텍스트 안에 그라데이션 애니를 주기로 함~ 일단 결과물은... 열심히 해보고나니 나름 느낌이 괜춘 괜춘~~ (레드써...ㄴ ) 아래 css를 하나씩 살펴보자~ CSS @keyframes moveGradientBg{ to{background-position: 300% 0;} } .item-text{ display: inline-block; position: relative; background: linear-gradient(90deg, #ff0 0%, #f86 20%, #ff.. 2023. 6. 8. 이전1 1 2 3 4 5 ··· 12 다음 728x90 반응형
