semantic-ui를 통해 icon을 추가하는 방법을 알아볼게여
Semantic
영어로는 의미론적인 이라는 뜻을 가지고 있는데요! 오늘 제가 소개해 드릴 Semantic-ui라는 사이트에선 fontawesome과 같이 다양한 icon과 버튼 기타 등등을 만나볼수 있습니다.
우분투 유저 분들은 저를 follow me~ 아니라면 https://semantic-ui.com/introduction/getting-started.html 여기 접속해서 하라는 대로 하면 됩니다
- semantic ui 설치하기
npm install semantic-ui --save
- 중간중간 설정 잘해주기
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 활용법은 다음 기회에 좀 더 상세하게 다루도록 하겠습니다!!