2024/09/18 2

웹컴포넌트 실전 사용기. 모든 페이지에 활용할 수 있는 컴포넌트로 만들기 (서울시 유치원 정보 사이트 프로젝트 ep.7)

프로젝트 진행 전에 컴포넌트를 활용할 확률이 많을 것으로 판단되어서 미리 R&D를 진행 했었고, 그 테스트를 통한 가정을 프로젝트 실전에 적용을 해보려고 시도했다. 일단 예상했던 부분은 카드 디자인들을 컴포넌트로 많이 사용하지않을까로 예측했었는데 막상 카드들의 생성 자체가 for문으로 반복 생성된 부분들이어서 이를 굳이 컴포넌트화 시킬 필요는 없겠다고 판단했다. 따라서 페이지별로 반복되게 사용되는 부분을 찾아보니 '헤더+타이틀'과 '푸터'였고 이 두 가지 부분만 컴포넌트화 해보기로 결정했다. 지난번에 미리 진행해 본 방법대로 진행을 해보았는데…(웹 컴포넌트 테스트 1 - https://designerdk.tistory.com/6)(웹 컴포넌트 테스트 2 - https://designerdk.tistory..

컬러 및 텍스트 스타일 변수화해서 사용하기 (서울시 유치원 정보 사이트 프로젝트 ep.6)

피그마로 진행된 디자인에 대해 css로 퍼블리싱 작업이 들어갔다. 디자인 관련 내용의 포스팅도 올렸다.https://designerdk.tistory.com/18 피그마로 디자인 작업을 할 때 보통 텍스트스타일, 컬러스타일 등 자주 사용하는 스타일을 지정해놓고 사용하는 편이다. (일명 팔레트 만들기) 그래야 작업도 편할 뿐더러 디자인 일관성도 유지되고 향후 유지보수에도 효과적이기 때문.  이는 당연히 css에도 똑같이 적용될 것이라 판단해서 피그마와 동일하게 스타일 변수화 작업에 들어갔다. 작업의 혼돈을 줄이기 위해 피그마와 네이밍도 최대한 일치시켰다. /* 컬러 스타일 */:root{ --surface-bg: #F5F5F5; --surface-primary: #186DED; --surface-white..