홈

SCSS

util.css / util.scss
1. util.css 만 전처리기 scss로 작업이 되어있기에, 수정을 하고자 하시면 sass를 우선 설치합니다.
2. sass를 설치하기 위해선 nodo.js기반의 패키지 관리자 npm을 사용하여 할 수 있습니다.
3. 터미널에서 명령어 npm install -g sass
4. css 폴더로 이동하여 컴파일 하여 css를 생성합니다. 그 css를 불러오면 됩니다.
5. sass -util.scss util.css
6. scss파일이 변경될때마다 자동으로 컴파일 하고자 하신다면 sass --warch util.scss:util.css 명령어를 사용하시면 자동 컴파일이 됩니다.

Include

html, head, footer
1. gulp 를 터미널에 입력해 주시면 빌드가 됩니다.
2. 바로바로 확인이 어려워서 우선 브라우저 콘솔로 수정을 하시면 되겠습니다.

info

valuemark 프로젝트 2024.07 기준입니다.
reset.css
1. 브라우저 초기화 css
podo_root.css
1. css 변수들이 모여있다.
util.css
1. Font, Form, Align, pc,mobile, Color, Line clamp, List, Space clamp, Object, display, Width, Height, Size, Space Between, Flex, Margin / Padding, Border, Table, Etc 등 스타일과 공통요소를 제외한 유틸요소들 집합
common.css
1. 스타일과 유틸을 제외한 공통요소들. 스타일과 겹쳐지기도 한다.
2. input, select 기본 모양
3. checkbox, radiobox 스타일
4. button 스타일
5. Badge 스타일
6. Icons 스타일
7. 이외가 스타일에 해당한다.
animate.css
1. 애니메이션 css 집합
2. 10개 까지 있으며, 추가될 수 있다. 이것또한 sass로 되어있다.
페이지명.css
1. 디자인 입혀진 복잡한 스타일들은 여기있다. 순서를 제일 아래, mobile.css보다는 위 내려보낸다.
podo_mobile.css
1. 반응형 css 집합. 순서를 제일 아래로 내려보낸다.

머리말