반응형 CSS3 컬러 팔레트를 만들어주는 도구 - Smart Swatch 컬러 팔레트는 최근에 웹을 만들때 사용 빈도가 제법 높기때문에, 생성을 도와주는 편리한 도구들이 많이 나와 있습니다. 피그마를 사용할때도 컬러 팔레트를 생성해주는 플러그인들이 많아서 요긴하게 사용하곤 했었죠. 그런데 막상 디자인 작업이 끝나고 퍼블리싱을 할때 일일이 컬러 팔레트를 변수로 만들거나 그럴때 좀 번거롭죠. 물론 Tailwindcss나 Bootstrap같은 CSS 프레임워크를 사용하게 된다면, 이미 잘 만들어진 컬러 팔레트들이 있기 때문에 해당 부분만 잘 활용해도 무난하게 퍼블리싱 작업을 진행할 수 있습니다. 하지만 그런 컬러 팔레트들을 직접 손쉽게 생성할 수 있다면 얼마나 좋을까요? 저는 tailwindcss를 좋아하긴 하지만, 주어진 컬러 팔레트만 사용하다보면 아무래도 색상이 좀 성에 안찰때.. 2022. 8. 16. Hover, Active, Focus, Disabled 상태에 따른 CSS 버튼 디자인 보통 CSS 프레임워크들을 사용할 경우 버튼에 대한 상태를 다양하게 준비하고 있어서 별도로 만들 필요가 없는 경우가 많습니다. 하지만, 직접 버튼을 만듦으로써, 각 상태에 따라 어떤 애니메이션이나 기능적인 부분들을 재현할 수 있는지 볼 수 있다는 점이 학습에 도움이 되기때문에, 한 번쯤 만들어보는 것이 좋다고 생각합니다. 최근엔 모바일에서 사용이 많아진 관계로 버튼은 기본적으로 화면상에서 최소한 7mm x 7mm - 이건 조사하는 곳마다 다른데 10mm x 10mm을 기준 잡는 곳도 있고 천차만별 - 크기를 차지해야한다고 하는데, 이 크기를 px로 변환하면 대략 44px 정도의 크기를 권장합니다. 버튼 높이가 대략적으로 44px 이상이면 터치하는데 큰 무리가 없다는 이야기죠. 버튼을 디자인 할때 단순하게.. 2022. 8. 2. react + tailwindcss 로 만든 샘플사이트 지난번과 똑같은 디자인인데, 이번엔 리액트 + 테일윈드CSS로 만들어봤습니다. 확실히 리액트로 만들면 반복되는 작업들을 줄여줄 수 있다는 점이 가장 큰 장점인 것 같습니다. 섹션을 표현할때도 아래와 같은 상황이 생길 수 있습니다. 공통적인 부분이 많이 사용되는데요. 어느정도 규칙성이 있죠? 조금 더 세부적으로 보면 아래와 같은 예시를 볼 수 있습니다. 반복 되는 요소들이 보이시죠? 이런식으로 스타일을 정의해놓고 Testimonial과 Our Services 그리고 그 안에 필요한 내용들만 데이터로 전달해주면, 껍데기는 알아서 씌워주는 식으로 작동하게끔 해줍니다. 이렇게 컴포넌트 단위로 쪼개서 작업한다는 것이 리액트의 장점입니다. UI를 재활용할 수 있는 단위로 만드는 것이죠. 위의 카드 스타일도 마찬가지.. 2022. 8. 1. 이전 1 다음 반응형
