홈

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 명령어를 사용하시면 자동 컴파일이 됩니다.

info

valuemark 프로젝트 2024.07 기준입니다.
custom, style 을 제외한 모든 class 앞에 pd- 를 붙입니다.
reset.css
1. 브라우저 초기화 css
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. 이외가 스타일에 해당한다.
style.css
1. 디자인 입혀진 복잡한 스타일들은 여기있다. 순서를 제일 아래, mobile.css보다는 위 내려보낸다.
mobile.css
1. 반응형 css 집합. 순서를 제일 아래로 내려보낸다.

Kendo Ui 사용시 필요한

/css/kendo/2022.1.119/kendo.common.min.css
1. kendo 기본 형태 css
/js/kendo/2022.1.119/kendo.all.min.js
1. kendo 라이브러리 js
/js/kendo/2022.1.119/cultures/kendo.culture.ko-KR.min.js
1. kendo 달력 한글 js
/js/kendo.extension/kendo.ko_KR.js
1. kendo 메세지 한글 js

빌드 방법

Html Include

Node.js 가 필요합니다.

# npm 초기화
npm init -y

# gulp 설치
npm install gulp --save-dev

# gulp-file-include 설치
npm install gulp-file-include --save-dev

project/
│
├── src/
│   ├── html/
│       ├── header.html
│       └── index.html
├── html2/
│   └── code/
├── gulpfile-html.js
└── package.json

src/ 폴더: 소스 파일을 저장하는 폴더
html2/ 폴더: 빌드된 파일이 생성되는 폴더
gulpfile-html.js gulp html 설정 파일
code 코드를 볼 수 있게 만들어놓은 code 파일들 폴더

src/index.html
gulp-file-include를 사용하여 header.html 인클루드

gulpfile-html.js 설정

const gulp = require('gulp');
const fileInclude = require('gulp-file-include');

// prettier 모듈을 동적으로 import
// HTML 파일 병합 작업
async function fileIncludeTask() {
    const prettier = (await import('gulp-prettier')).default;

    return gulp.src(['src/html/*.html', '!src/partials/**']) // header.html 제외
        .pipe(fileInclude({
            prefix: '@@', // 인클루드 명령어의 접두사 설정
            basepath: '@file' // 인클루드 파일의 경로 설정
        }))
        .pipe(prettier({ // HTML 코드 포맷팅 설정
            parser: 'html', // HTML 파서 사용
            tabWidth: 4, // 들여쓰기 크기 (2칸)
            useTabs: false, // 탭 대신 스페이스 사용
            singleQuote: true, // 속성값을 single quote로 사용
            htmlWhitespaceSensitivity: 'ignore', // 공백 민감도 무시
            endOfLine: 'auto', // 운영체제에 맞는 줄바꿈 설정
            printWidth: 200 // 줄 바꿈 할 폭 길이
        }))
        .pipe(gulp.dest('html2')); // 병합된 파일을 dist 폴더에 저장
}

// 기본 작업 설정
exports.default = gulp.series(fileIncludeTask);

원래라면 gulp 으로만 실행 가능하지만, 분류마다 따로 선언해줘야 되서 package.json에 따로 설정해준다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "admin": "gulp --gulpfile gulpfile-admin.js",
    "html": "gulp --gulpfile gulpfile-html.js",
    "podo": "gulp --gulpfile gulpfile-podosw.js"
  },

이러면 npm run html 으로 실행된다.

gulp 에러 발생 시 최신버전 설치

# 기존 gulp 전역 설치 버전 제거
npm uninstall -g gulp

# 기존 gulp와 관련된 로컬 패키지 제거
npm uninstall gulp --save-dev

# gulp 최신 버전 전역 설치
npm install -g gulp-cli

# gulp 최신 버전 로컬 설치
npm install gulp --save-dev

Gulp 코드 포맷팅 설정

# Prettier는 코드 스타일을 일관되게 유지해주는 코드 포맷터입니다.
npm install --save-dev prettier gulp-prettier

# ESLint는 코드의 품질과 스타일을 점검해주는 도구로, 포맷팅도 가능합니다.
npm install --save-dev eslint gulp-eslint

사용자

머리말

Kendo Ui 사용시 필요한