Getting Started

Fomantic-UI를 처음 시작할 때 필요한 설치 방법과 기본 사용법을 단계별로 알려드릴게요. 문제가 생기면 GitHub 저장소에 이슈를 올려서 도움을 받을 수 있어요.

출처: 문서

본문

이 페이지에는 Fomantic-UI 사용을 시작하는 방법에 대한 자세한 가이드가 담겨 있어요. 문제가 있거나 궁금한 점이 있다면 GitHub 저장소에 이슈를 올려주세요.

General Usage

Descriptive classnames

Fomantic-UI의 기본 개념은 HTML 노드에 서술적인 클래스 이름을 추가하는 거예요.

ui primary button
            Button
        
        
        
            ui huge primary button
            Button

Class order

명세에 따라 CSS는 클래스 이름을 어떤 순서로 선언해도 상관없어요.

huge ui button primary
            Button
        
        
        
            ui left labeled right floated button
            LabeledButton
        
        
        
            ui left right button floated labeled
            LabeledButton
            
                Where should the button be floated? Left or right?
                Where should the button be labeled? Left or right?
            
        
        
        
            
                
                
                    
                        
                            Labeled
                            Button

Installation

Fomantic-UI는 NPM이나 여러 CDN 제공자를 통해 설치할 수 있어요. 원하면 배포 파일을 로컬에 직접 호스팅할 수도 있어요.

테마(theming)를 사용하려면 반드시 NPM으로 Fomantic-UI를 설치해야 해요. 그래야 테마를 만들고 관리하는 데 필요한 모든 파일을 받을 수 있거든요.

Installing via NPM

NodeJS는 여기에서 내려받을 수 있어요. NPM은 NodeJS와 함께 설치돼요.

Requirements
    
      NodeJS >= v12
      NPM >= v6
    
    
    Fomantic-UI also supports yarn as alternative package manager.
    

    
    

    
    
      $ npm init
    
    
    
    
      $ npm install fomantic-ui
    
    
    
    
      $ npm install fomantic-ui@nightly
    
    
    
    
      $ cd node_modules/fomantic-ui
      $ npx gulp install
    
    
    
    
      "dependencies": {
        ...
        "fomantic-ui": "^2.9.4"
        ...
      }
    
    
    
    
      $ cd semantic/
      $ npx gulp build

Using a CDN provider

Fomantic-UI는 가장 인기 있는 상위 3개 CDN 제공자에서 사용할 수 있어요.

jsDelivr
        
        
          Recommended
        
      
      
        
          cdnjs
        
      
      
        
          unpkg
        
    
    
      jsDelivr
      cdnjs
      unpkg

CSS, LESS & SASS distributions

Fomantic-UI는 CSS, LESS, SASS* 전용 배포판을 별도의 저장소로 제공해요.

CSS Repository
        
      
      
        
          LESS Repository
        
      
      
        
          SASS Repository
        
        * (A Ruby Gem offered by third party maintainers)
      
    
    
    

    
    
      CSS
      LESS
    
    
      
        $ npm install fomantic-ui-css
      
    
    
      
        $ npm install fomantic-ui-less

Updating

Updating NPM Installation

NPM으로 Fomantic-UI를 사용한다면 아래 명령어만 실행하면 업데이트할 수 있어요.

$ npm update fomantic-ui
    
    
    
    
      $ cd node_modules/fomantic-ui
      $ npx gulp install
    

    
    

    
    
      $ npx gulp build

Updating CDN

CDN 제공자를 사용한다면 업데이트가 간단해요. CDN URL의 버전 번호만 바꾸면 돼요.

Updating CSS & LESS Distributions

NPM으로 CSS 또는 LESS 배포판을 사용한다면 다음 명령어를 실행할 수 있어요.

CSS
      LESS
    
    
      
        $ npm update fomantic-ui-css
      
    
    
      
        $ npm update fomantic-ui-less

이 목록은 Fomantic-UI에 대한 유용한 자료들 몇 가지예요. 자료를 찾았거나 직접 만든 걸 추가하고 싶다면 여기에서 풀 리퀘스트를 만들어 주세요!

Resources

    
    
      
        
          Setting up Fomantic-UI with React
        
      
      
        
          How to customize Fomantic UI with LESS and Webpack? (applicable to Semantic UI too)

Community

Social

더 알아보기 (Learn more)

이제 Fomantic-UI 설치 방법과 기본 구조를 이해했어요. 다음으로 Glossary에서 쓰이는 용어를 익히고, New in 2.9에서 최신 변경 사항을 확인해 보세요.