기억해두어야 할 용어 정리
@media (min-width: ___px) & @media (max-width: ___px)
min-width를 이해하고 기억하는 데 도움이 되는 방법으로는 "최소한 ~일 때까지" 라는 개념으로 기억하는 것입니다. 즉, min-width는 "화면의 너비가 최소한 이 값일 때 까지" 적용되는 스타일 규칙을 정의합니다.
min-width: 600px이라고 하면, 화면의 너비가 최소한 600px이 될 때까지 적용되는 스타일이라고 기억하면 됩니다. 화면의 너비가 600px을 넘어가는 순간부터 미디어 쿼리의 스타일이 적용되기 시작합니다.
max-width는 반대로 기억하면 됩니다. max-width를 기억하는 방법은 "최대한 ~일 때까지" 라는 개념으로 기억하는 것입니다. 즉, max-width는 "화면의 너비가 최대한 이 값일 때 까지" 적용되는 스타일 규칙을 정의합니다.
디자인할 때 참고하면 좋은 사이트 정리
Shadcn
적당한 수준의 UI 컴포넌트를 가지고 있는 UI 라이브러리입니다. 디자인이 유려해서 바로 가져다 사용하기에 나쁘지 않습니다.
(아직 직접 사용해보지는 않았습니다.)
headless UI
Shadcn과 비슷하게 적당한 수준의 UI 컴포넌트를 가지고 있습니다. 디자인이 유려해서 바로 가져다 사용하기에 나쁘지 않습니다.
Sailboat UI
위의 두 라이브러리과 비슷하게 적당한 수준의 UI 컴포넌트를 가지고 있습니다. 디자인이 유려해서 바로 가져다 사용하기에 나쁘지 않습니다.
HyperUI
순수 TailwindCSS로만 작성된 상당히 많은 컴포넌트들이 존재합니다(e-commerce, 마케팅, 일반 어플리케이션). 그래서 커스터마이징이 매우 수월할 것으로 예상됩니다. 디자인 시안이 있는 상태에서 빠른 개발이 필요하지만 어느정도의 커스터마이징이 필요할 때, 참고하면 좋은 사이트가 될 것 같습니다.
(이번 SARDIP Web GIS 프로젝트에 사용해 볼 예정)