front/HTML&CSS&JS

Semantic UI

동 캄 2023. 3. 11. 11:45
반응형

Semantic UI

  • BOOTSTRAP과 함께 레이아웃 제작에 매우 도움이 되는 CSS FRAMEWORK이다.

사용법

  1. 먼저 Semantic UI 사이트에 들어가 GET STARTED 버튼을 눌러 파일을 다운받고, 사용하고자 하는 디렉토리에 다운로드 받은 파일의 압축을 푼다. 링크
  2. 다음으로, 디렉토리의 위치를 잘 파악하고, 해당 다운로드 받은 파일 내의 semantic.css 와 semantic.js 파일에 접근할 수 있도록 주소를 연결해준다.
<head>
    <link rel="stylesheet" type="text/css" href="Semantic/semantic.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Semantic/semantic.js"></script>
</head>
  1. Semantic UI의 홈페이지에 들어가서 해당 요소의 사용법과 예시를 찾아보고, 해당 코드를 가져와서 사용한다.
<button class="ui button">Follow</button>
  1. 만약, 버튼과 같이 요소를 동적으로 작동시키고 싶다면, 자바스크립트 코드를 작성하여 동작시켜야한다. (이것도 UI 사용법을 살펴보면 알 수 있다.)
정말 편하고 간단하게 페이지 레이아웃을 만들 수 있어서 좋다. 지금까지 모두 손으로 하나하나 했는데, 이렇게 좋은게 있다니 자주 이용해야겠다.
반응형