2.4 KiB
2.4 KiB
CSS 정리 구조 (CSS Organization)
Auth·일일봉투 수불현황 뷰 기준. Tailwind + 페이지 단위 커스텀 스타일.
1. 기본 원칙
- Tailwind CSS를 메인으로 사용. CDN:
https://cdn.tailwindcss.com?plugins=forms,container-queries. - 페이지/화면 단위로 필요한 경우에만
tailwind.config확장(colors, fontFamily 등)과<style>블록 사용. - 프로젝트 공통 스타일이 있으면 한 곳에 모아서 참조(예: 레이아웃·버튼 클래스).
2. Tailwind 설정 (페이지 내)
- 뷰 파일
<head>안<script>에서tailwind.config.theme.extend로 커스텀 색·폰트 정의. - Auth(로그인) 예:
page-bg,brand-blue,brand-blue-hover,text-primary,text-secondary,input-border,fontFamily.sans,boxShadow.soft. - 업무 화면(일일봉투 등) 예:
system-header,title-bar,control-panel,btn-search,btn-excel-border,btn-excel-text,btn-print-border,btn-exit,fontSize.xxs.
3. 커스텀 CSS 블록
- 용도: 테이블, 스크롤, 레이아웃 등 Tailwind만으로 표현하기 어려운 부분.
- 위치: 같은 뷰 파일 내
<style data-purpose="...">로 구분. 예:data-purpose="typography",data-purpose="table-layout". - 네이밍: 클래스명은 소문자·하이픈. 예:
.data-table,.main-content-area. 페이지 특화 클래스는 해당 뷰에만 두기.
4. 폰트
- 로그인/간단 폼: Inter 등 (예: Google Fonts
Inter). - 업무 화면:
Malgun Gothic,Noto Sans KR등 (예:fontFamily.sans에 배열로 지정).
5. 반응형·접근성
min-h-screen,max-w-[420px]등 유틸리티로 레이아웃. 필요 시md:브레이크포인트 사용.- 포커스 링 등은 Tailwind
focus:,focus-visible:로 통일.
6. 정리
| 구분 | 사용처 | 비고 |
|---|---|---|
| Tailwind 유틸리티 | 전체 | 기본 스타일 |
| tailwind.config.extend | 뷰별 | 색, 폰트, 그림자 등 |
| <style> 블록 | 뷰별 | 테이블, 스크롤, 레이아웃 |
| data-purpose | <style> | 블록 용도 구분 |
새 화면 추가 시 기존 Auth·일일봉투 수불현황 뷰의 Tailwind·config·style 구조를 참고해 동일한 방식으로 정리한다. 디자인 일관성(레이아웃·색상·버튼·테이블)은 08-디자인규칙.md를 따른다.