Semantic UI : 소개 ~ js가 필요한 컴포넌트의 사용법

룰루루 2021. 5. 31. 12:52

2021. 5. 31. 12:52

[생활코딩 CSS 강의 중 마지막 - Semantic UI 부분]

참고한 사이트:

1. 자바스크립트가 필요한 컴포넌트의 사용법 - Semantic UI (opentutorials.org)

2. Dropdown | Semantic UI (semantic-ui.com)

1. 라이브러리의 개념

library란, 무언가를 만들 때 공통적으로 많이 사용되는 것들을 한데 모아서, 재사용하기 쉽게 만들어 놓은 것.

여기에서는 라이브러리로 Semantic UI와 Bootstrap를 소개했다.

Semantic UI (semantic-ui.com) 이 사이트의 모든 요소가 Semantic UI로 만들어졌다.

Semantic UI

Shipping Choose your shipping options

semantic-ui.com

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

사람들이 가장 많이 사용하는 라이브러리로 알려져 있다.

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

2. Semantic UI 적용하는 기본설정 따라 해 보기

설치 방법에는 복잡하지만 기본적인 방법과, 간단하지만 본질적이지는 않아 나중에 어려움이 있을 수 있는 방법이 있는데, 여기서는 후자를 사용했다.

: 그냥 semantic UI 홈페이지에서 다운로드를 누르고, 현재 사용하는 html 에디터에서 Include in Your HTML에 있는 소스 코드를 복사해서 붙여 넣으면 끝.

예제로 버튼을 만들어 보았다.

<head>
    <link rel="stylesheet" type="text/css" href="semantic/Semantic-UI-CSS-master/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/Semantic-UI-CSS-master/semantic.min.js"></script>
</head>
<body>
    <button class="ui button">
      Semantic UI
    </button>
    <button>
    Default
    </button>
</body>

이 코드를 입력해서 아래처럼 나왔다. 버튼이 총 두 개다.

오른쪽이 가장 기본적인 버튼인데, 화려하지 않은 정말 기본 디자인이다. 그런데 button 태그에 class 선택자를 지정했더니 왼쪽 버튼처럼 모양이 바뀐 것을 볼 수 있다.

-> 이는 우리가 link 태그로 불러온 semantic.min.css 파일에 "ui button"이라는 클래스에 할당된 버튼 서식(?)이 따로 존재하기 때문에 가능하다. 파일을 불러오지 않고 class만 지정한다고 바뀌는 게 당연히 아니다.

Q. 버튼을 직접 만드는 건 매우매우 어려울 것 같은데, 여러 버튼 디자인을 사용하고 싶다면 라이브러리를 떠돌아 다니면 되는 것인지 궁금하다.

(A). 후속 강의를 들어 본 결과 그런 것 같다... 하지만 요즘은 여러 UI들이 많이 나와서 그나마 다행. 아마 내가 생각한 것의 대부분은 인터넷 어딘가에 돌아다니지 않을까 싶다.

3. Semantic UI 잘 사용하는 법

1. Semantic UI의 사이드바

: 사이드바에는 Semantic UI로 구현할 수 있는 여러 기능들이 있다. 각 기능을 누르면 해당 기능을 구현하면 어떤 모습이 되는지를 보여준다. 이걸 참고해서 원하는 기능을 사용하면 된다.

2. 원하는 기능을 가져오는 방법

1) Include in your HTML에서 미리 해당 css 파일과 javascript파일을 link 태그로 가져온다.

2) 해당 기능의 Example 코드를 복사 붙여넣기한다.

=> 2)까지 하면 실행되는 기능이 있고, 실행이 안 되는 기능이 있다.

실행이 안 되는 기능의 경우, javascript의 기능이 필요해서 그렇다. 즉 javascript를 initialize(초기화)해야 한다. 3)으로!

* 이런 기능은 보통 '움직임'을 포함하는 경우가 많다!

3) 보통 이런 기능의 경우, 페이지에 4가지의 탭이 있다. (Definition / Examples / Usage / Settings)

여기서 Usage에 들어가서, javascript 코드를 복사해 줘야 한다.

복사할 때는 script 태그 만들고 그 안에 넣어줘야지, 그냥 넣어주면 반영이 안 된다!

b/c html에서 script태그의 역할 중 하나는, css나 javascript등 다른 언어? 프로그램?을 불러올 때 script 태그 안의 코드는 그 다른 언어로 시행하겠다! 라고 선언하는 것이기 때문에, 이 선언을 안 해주면 html이 해당 코드를 javascript 방식으로 처리하지 못한다.

<사용예시>

1. Dropdown

이렇게 Text라고 쓰여진 버튼? 을 누르면 위/아래로 선택할 수 있는 콤보 상자처럼 나오는 기능이 Dropdown이다. 이 기능은 '움직임'이 있어서 그런지 javascript를 initialize해야 사용할 수 있다.

1) 코드 복사하기

2) javascript initialize시키기 : script 태그를 밑에 추가하고, 이런 코드를 추가한다.

<script>
    $('.ui.dropdown').dropdown();
</script>

이 코드는 javascript의 문법대로 실행된다.

$ 뒤의 () 안에는 어떤 대상에다 코드를 적용할 것인지를 명시하고, 뒤에는 메소드(함수)를 호출한 것이다.

즉 javascript에 있는 dropdown 함수를 불러와서 class가 ui dropdown인 엘리먼트들에 해당 기능을 적용했다.

3) 기존 기능을 변경하는 방법

: Semantic UI를 사용하면서 원하는 점과 조금 다를 수 있다.

ex) dropdown의 목록이 좀 더 천천히 내려왔으면 좋겠다 등등

-> 그런 세부사항들은 4가지 탭 (Definition / Examples / Usage / Settings) 중에서 Settings에서 설정 가능하다.

이런 식으로 각 기능들이 있다. 가운데는 default value이고, 오른쪽엔 설명, 왼쪽에는 해당 속성의 이름이 나와 있다. 즉 이 속성을 변경하고 싶으면 duration 값을 다르게 바꿔 주면 된다.

<script>
    $('.ui.dropdown').dropdown({duration:1000});
</script>

dropdown 기능의 세부사항을 지정하는 것이므로, dropdown 메소드 안에 {}를 넣고, {(속성명):(값)} 으로 지정한다.

'front-side > CSS' 카테고리의 다른 글

10. 코드 경량화(minify) ~ CSS 뛰어넘기(preprocessor) (0)	2021.05.18
9. 그래픽 fin ~ 유지보수-link와 import (0)	2021.04.13
8. 그래픽 (0)	2021.04.12
7. 레이아웃 (0)	2021.04.07
6. 레이아웃 추가(심화)내용 (0)	2021.04.05

아스