semantic-ui 테마 변경, 폰트 변경 하기

자세히 설명된 블로그를 찾았으나 익숙치 않은 node.js , glup을 워딩 만으로 이해 하기엔 내공이 부족하여
이미지를 덧붙여 다시 정리해 보았습니다.

1. npm 설치가 사용 가능해야 합니다. ( node.js 가 설치 되있어야 합니다.)
1.1 node.js 설치 https://nodejs.org/ko/

2. 참조한 : https://plming.tistory.com/184 내용을 숙지해 순서대로 진행합니다.

2.1 일단 폴더하나를 만듭니다. test 라고 했습니다 ( 저는 semantic )
$ mkdir test

2.2 npm 초기화를 합니다.
$ npm init

npm init 화면

중간에 엔터를 계속눌러 진행하여 마무리 합니다.

3. fomantic-ui 를 설치합니다. ( fomantic-ui 에대한 설명은 참조블로그 참조 )
$ npm install --save fomantic-ui

fomantic-ui 설치중

fomantic-ui 설치 옵션

설치중 위 (1) 번 Automatic 을 선택하고 엔터를 누릅니다.

설치가 끝난 화면 입니다.

아래와 같이 semantic 관련 파일이 생성이 됩니다.
fomantic-ui 설치 완료

4. semantic/src/themes/default/globals/site.variables ( 테마원본 파일 )

위 경로에는 css 값을 정의하는 원본파일이 있습니다. 노란색 박스 안에 폰트명을 "Noto" 폰트로 일괄 변경 하고자 합니다.

5. semantic/src/site/globals/site.variables ( 변경사항을 커스텀 합니다. )

위 경로의 파일을 4번의 내용을 참고로 해서 변경하고자 하는 내용을 정의합니다.
저는 폰트명만 변경하고 싶어 폰트명만 변경 하였습니다.

6. gulp 명령어로 빌드합니다. ( CSS 파일만 재구성 됩니다. )
$ gulp build-css ( gulpfile.js 파일이있는 경로에서 명령을 실행(파워쉘,cmd 활용 ) 합니다. )

설치과정 입니다.

위와 같이 설치가 끝나면 아래와 같이 “dist” 폴더가 생성이 됩니다.

semantic theme glup build dist 폴더 생성

"dist" 폴더 안에 생성된 파일을 보면 아래와 같이 폰트명이 재정의 되어있는것을확인하실수 있습니다.

semantic theme glup build 파일

semantic.css 파일을 확인해 보면 font 명이 변경된것을 확인할수 있습니다.

변경된 css 파일을 모두 업로드 하여 사용하시면 됩니다.
감사합니다.