WWWEB109 Pretendard 웹폰트 적용하기 Pretendard 특징 모양 위에서 서술했듯 Inter에 조금 남아 있는 휴머니스트적인 인상을 네오 그로테스크에 가깝게 다듬었다. 이외로 @나 원 기호—₩ 등을 일상적으로 쓰이는 모습으로 맞추고, San Francisco와 비교했을 때 조금 좁게 보였던 숫자도 폭을 기존보다 넓혀 더욱 자연스럽도록 했다. 글자 높이 Inter는 글자 크기가 11px일 때 가장 또렷하게 보일 수 있게 11px 그리드에서 구조가 잡혀 있는데, apple-system을 바탕으로 구성한 레이아웃이 Pretendard를 쓰는 환경에서도 동일하게 작동할 수 있게 글자 높이를 San Francisco와 맞췄다. 자간 San Francisco Text와 같은 자간 구조를 가진 Inter는 12px 읽기 환경에 맞춰져 있는데, 12px.. 2023. 10. 11. 마우스 커서를 이미지로 변경하기 css에서 "cursor:pointer;"와 같이 cursor 속성을 통해 시스템 기본 커서 마우스의 모양을 지정할 수 있는데 이걸 직접 디자인한 이미지로 변경해줄 수 있음! ㅎㅎ button:hover{ cursor: pointer; } /* 커서 이미지로 변경하는 경우 기본 형식 */ button:hover{ cursor: url(img-cur-hover.png), pointer; } /* 커서 이미지 위치를 변경해주는 경우(위치값은 생략 가능) */ button:hover{ cursor: url(img-cur-hover.png) 10 15, pointer; } /* 여러 이미지 사용 가능 */ button:hover{ cursor: url(img-cur-hover.png) 10 15, cursor:.. 2023. 9. 22. 디자인 시스템 정의 및 가이드 예시 디자인 시스템이란? 디자인 시스템은 디자인 원칙과 중요한 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. 이전1 1 2 3 4 5 ··· 13 다음 728x90 반응형
