semantic-uisemantic-ui 시작하기


비고

이 절에서는 semantic-ui가 무엇인지, 그리고 개발자가 왜 그것을 사용하고 싶어하는지에 대한 개요를 제공합니다.

또한 semantic-ui 내의 큰 주제를 언급하고 관련 주제에 링크해야합니다. semantic-ui에 대한 문서는 새로운 것이므로 관련 주제의 초기 버전을 만들어야 할 수도 있습니다.

버전

번역 출시일
[2.2.10] 2017-03-28
[2.2.9] 2017-02-21
[2.2.8] 2017-02-21
[2.2.7] 2016-12-21
[2.2.6] 2016-10-27
[2.2.5] 2016-10-27
[2.2.4] 2016-08-25
[2.2.3] 2016-08-21
[2.2.2] 2016-07-07
[2.2.1] 2016-06-27
[2.2.0] 2016-07-26
[2.1] 2015-09-02
[1.12] 2015-04-13
[1.0] 2014-11-24
[0.1] 2013-09-25

NodeJS를 통한 설치 - 권장 사항

NodeJS를 통한 설치가 권장되는 방법입니다. 원하는 구성 요소 만 선택하여 파일을 빌드 할 수 있으므로이 파일을 사용하는 것이 좋습니다.

1 단계 : 노드 ( 링크 ) 설치

2 단계 : Gulp를 컴퓨터에 전역 설치 (-g)

npm install -g gulp
 

시맨틱 UI는 Gulp를 사용하여 필요한 구성 요소만으로도 테마 버전의 라이브러리를 빌드 할 수있는 명령 줄 도구를 제공합니다.

3 단계 : 프로젝트에 로컬로 Semantic-UI 설치

cd /path/to/your/project

npm install semantic-ui --save
 

4 단계 : semantic-ui가 저장된 폴더로 이동하여 다음 꿀꺽 마술 작업을 실행합니다 (자동으로 수행 될 수 있음)

cd node_modules/semantic-ui    
gulp install
 

그러면 대화식 설치 프로그램이 시작됩니다. 지침에 따라 원하는 SUI 요소를 선택하면 관련된 파일이 빌드됩니다.

  • 먼저 설치 유형을 선택해야합니다. 사용자가 자동 모드 를 선택하여 SUI를 작성할 수 있습니다
  • 그런 다음 프로젝트 폴더와 SUI를 저장할 위치를 지정해야합니다 (기본값은 semantic/ ).
  • 사용자 정의 설치의 경우, 원하는 구성 요소를 선택할 수있는 옵션이 제공됩니다.

5 단계 : HTML에 링크

컴파일 된 CSS 및 JavaScript 파일을 HTML에 링크하십시오.

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
 

모두 완료되었습니다!