Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 가상메모리 관리
- 운영체제
- dfs
- 코딩테스트
- dict
- 다익스트라
- N과M
- 브루트포스
- 힙
- programmers
- 수학
- 그리디
- 재귀
- 백준
- MYSQL
- 스택
- level3
- level1
- BOJ
- 파이썬
- BFS
- DP
- 프로그래머스
- level2
- 가상메모리
- 다이나믹 프로그래밍
- level0
- python
- 딕셔너리
- 구현
Archives
- Today
- Total
동캄의 코딩도장
Semantic UI 본문
Semantic UI
- BOOTSTRAP과 함께 레이아웃 제작에 매우 도움이 되는 CSS FRAMEWORK이다.
사용법
- 먼저 Semantic UI 사이트에 들어가 GET STARTED 버튼을 눌러 파일을 다운받고, 사용하고자 하는 디렉토리에 다운로드 받은 파일의 압축을 푼다. 링크
- 다음으로, 디렉토리의 위치를 잘 파악하고, 해당 다운로드 받은 파일 내의 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>
- Semantic UI의 홈페이지에 들어가서 해당 요소의 사용법과 예시를 찾아보고, 해당 코드를 가져와서 사용한다.
<button class="ui button">Follow</button>
- 만약, 버튼과 같이 요소를 동적으로 작동시키고 싶다면, 자바스크립트 코드를 작성하여 동작시켜야한다. (이것도 UI 사용법을 살펴보면 알 수 있다.)
정말 편하고 간단하게 페이지 레이아웃을 만들 수 있어서 좋다. 지금까지 모두 손으로 하나하나 했는데, 이렇게 좋은게 있다니 자주 이용해야겠다.
'front > HTML&CSS&JS' 카테고리의 다른 글
CSS KEYFRAME (0) | 2023.03.13 |
---|---|
BOOTSTRAP (0) | 2023.03.11 |
JSON (0) | 2023.03.08 |
XML (0) | 2023.03.08 |
Ajax (0) | 2023.03.08 |