Semantic-ui로 간단하게 CSS 효과주자

작년 8월에 작성된 글입니다.

---

semantic-ui를 통해 icon을 추가하는 방법을 알아볼게여

Semantic

영어로는 의미론적인 이라는 뜻을 가지고 있는데요!
오늘 제가 소개해 드릴 Semantic-ui라는 사이트에선 fontawesome과 같이 다양한 icon과 버튼 기타 등등을 만나볼수 있습니다.

우분투 유저 분들은 저를 follow me~
아니라면 https://semantic-ui.com/introduction/getting-started.html 여기 접속해서 하라는 대로 하면 됩니다

1. semantic ui 설치하기

npm install semantic-ui --save

2. 중간중간 설정 잘해주기

Espress 웅앵웅 엔터
Is this your project folder ? 확인해서 맞다면 Yes
Where should we put Semantic Ui inside your project?? semantic/
header, icon, image, reveal 스페이스로 체크
Shold we set permissions on outputted files? No
Do you use a RTL language? No
Where should we ouput Semantic UI? out/
cd semantic
gulp build

이 과정까지 마쳤다면 프로젝트 폴더 내에 semantic폴더가 생겼을 거에요.

그렇다면 인제 index.html 파일로 이동 ㄱㄱ

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

위의 링크태그를 추가해주세요

적용

semantic ui 홈페이지에 들어가서 맘에 드는 아이콘의 이름을 className에다가 넣어주세요

class Sidemenu extends React.Component {
  render() {
    return (
      <div>
        <i className="home mini icon" />
        <i className="home tiny icon" />
        <i className="home small icon" />
        <i className="home icon" />
        <i className="home large icon" />
        <i className="home big icon" />
        <i className="home huge icon" />
        <i className="yellow home massive icon" />
      </div>
    );
  }
}

위의 코드를 웹 페이지에 띄워보면...

className에 색상과 사이즈 말고도 다양한 효과들을 줄 수 있는데요
자세한 사항은 홈페이지에서 확인해보세요~~

제가 오늘 포스팅에서 다룬 내용은 아이콘밖에 없지만!
절대로, icon만 기능적으로 쓸 수 있는건 아닙니다요

인터넷 강의 보면서 만든걸 보여드릴게요

import React from 'react';

const ApprovalCard = (props) => {
    console.log(props.children);
    return (
        <div className="ui card">
            <div className="content">{props.children}</div>
            <div className="extra content">
                <div className="ui two buttons">
                    <div className="ui basic green button">Approve</div>
                    <div className="ui basic red button">Reject</div>
                </div>
            </div>
        </div>
    );
};

export default ApprovalCard;

저기에 className으로 들어간 값들이 다 semantic-ui에서 가져온 것들이에요
결과물을 한번 보실까요!

div를 css에서 바로 효과를 주는 방법도 있지만
이렇게 라이브러리의 className만을 가져와서 div공간을 꾸미는 방법도 있다는거~
CSS파일 없이 저 코드가 그냥 끝이에요 진짜 신기하죠 ㅋㅋㅋㅋ
이래서 라이브러리를 잘 쓸줄 알아야 하나봐요 큽 ㅠㅠ

일단 저는 Grid를 마스터해야 프로젝트를 잘 할수 있기 때문에
아이콘 외의 Semantic-ui 활용법은 다음 기회에 좀 더 상세하게 다루도록 하겠습니다!!

Reference

https://react.semantic-ui.com/