WWWEB106 node 삭제하고 다시 설치하기 리액트를 드디어 하게 되는... ㅠㅠ 일단 노드 버전을 20.5로 맞추라고 해서,기존에 설치된 노드를 삭제하려고 하니... 어떻게 삭제를 하는 것인가?(초보의 눙물눙물...) 삭제 방법그냥 설정이나 제어판 들어가서 프로그램 삭제에서 삭제하면 됨. 그리고 다시 설치~~~완료!! 2024. 4. 26. css로 요소 1개인지 체크방법 아주 가끔씩 쓰게되서 찾게되는 css 선택자로 요소 1개 체크하는 방법... :fisrt-child:last-of-child(1) 코드 예시 버튼 1 버튼 2 버튼 1 2024. 1. 31. 갤럭시 폴드의 실제 가로 해상도는 345px 갤럭시 폴드 스펙에서 viewport 사이즈는 접었을 때가 280이라고 나와있는데, 실제로는 345px가 나온다고 함. [모바일 해상도] 갤럭시 폴드4 viewport 사이즈, 모바일 해상도 확인하기 갤럭시 폴드4 (Galaxy Fold 4) 가로폭 - 접힌 상태 : 345px - 펼친 상태 : 691px 디바이스에서 아래 URL에 접속하면 직접 테스트 해 볼 수 있습니다. [test] viewport / userAgent (codepen.io) [test] viewport / userAgent ... co zinee-world.tistory.com 갤럭시 플립4: 412×1006 갤럭시Z 폴드3: 320×872 / 674×842 2024. 1. 29. [js] keyCode는 그만 쓰자! 요약: keyCode 대신 code를 사용하자 KeyboardEvent: keyCode KeyboardEvent: keyCode property - Web APIs | MDN The deprecated KeyboardEvent.keyCode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key. developer.mozilla.org Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may ha.. 2024. 1. 16. 포토샵 pixel aspect ratio correction is for preview purposes only. turn it off for maximum image quality. 간단 해결법 웹에서 이미지를 불러오니 비율이 맞지 않음;; 이상해서 포토샵으로 이미지를 열어보려니까 "pixel aspect ratio correction is for preview purposes only. turn it off for maximum image quality." 라는 경고창이 뜨고, 탭에 보면 [scaled]라고 표시됨. 이는 비율이 다른 프로그램에 의해 비율이 변경이 되어 있어서 그렇다고... 해결법은 "View > Pixel Aspect Ratio > Square" 2024. 1. 1. [Mobile.벤치] 트립닷컴 호텔 UI/UX (feat.webm) 호텔예약 사이트들의 UI/UX는 어떻게 되어있을까? 그 1번째로 트립닷컴의 호텔 예약 사이트를 살펴봄~ 트립닷컴은? 트립닷컴(Trip.com)은 전 세계 4억명의 고객과 45,000명의 직원을 보유한 세계 최대의 글로벌 여행 플랫폼으로 상하이에 본사를 두고 있으며 영국의 스카이스캐너를 계열사로 두고 있다. 뉴욕 나스닥에 상장되었고 시가총액은 약 30조원으로 평가받는다고 한다 (feat.위키) 트립닷컴 호텔 메인 트립닷컴 호텔 상세 2023. 12. 20. 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. 이전1 1 2 3 4 ··· 12 다음 728x90 반응형
