최종 프로젝트를 할때 모든 팀이 BootStrap을 이용할 것 으로 보여 너무 획일화 된 디자인의 웹 사이트들이 나오지 않을까 싶어 다른 대안들을 몇개 찾아보았습니다. 그러던중 Semantic UI가 요즘 트렌드에도 맞아 보이고 BootStrap과 기능이나 사용상의 차이는 그닥 커보이지 않아서 Semantic UI를 써보려고 합니다.
semantic-ui.com/introduction/getting-started.html
Getting Started | Semantic UI
semantic-ui.com
위의 사이트에서 다운받습니다. 본인의 취향에 맞게 바꿔가면서 쓰려면 Building Tool을 설치해서 한다는데, 아직 기본적인 것도 사용해 보지 않았으니, 일단 기본적인 Default Theme 을 써보려고 합니다. Download Zip을 눌러 다운받습니다.
다운 받은 뒤에, 압축을 풀어 보니 2메가 남짓한 파일들이 있습니다. 폴더 통째로 프로젝트에 등록해줍니다. 저는 webapp/js/폴더에 복사해서 넣었습니다.
폴더명을 간단히 하기 위해 webbapp/js/semantic 으로 폴더 명을 변경했습니다.
include를 해서 예제 코드를 작성해서 서버를 실행해봅니다.
Chrome Developer tool 에서 확인했을때, 정상적으로 불러왔다면 Status에 200 이 뜹니다.
테스트를 위해 semantic-ui.com/ 에서 몇가지 태그들을 복사해서 넣어봤습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/semantic/semantic.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/semantic/semantic.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h4>Welcome page!</h4>
<i class="audio description icon"></i>
<i class="blind icon"></i>
<i class="braille icon"></i>
<i class="closed captioning icon"></i>
<i class="closed captioning outline icon"></i>
<i class="deaf icon"></i>
<div class="ui left icon input loading">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
<button class="ui labeled icon button">
<i class="pause icon"></i>
Pause
</button>
<button class="ui right labeled icon button">
<i class="right arrow icon"></i>
Next
</button>
<div class="ui inverted segment">
<button class="ui inverted basic button">Basic</button>
<button class="ui inverted primary basic button">Primary</button>
<button class="ui inverted secondary basic button">Secondary</button>
<button class="ui inverted red basic button">Basic Red</button>
<button class="ui inverted orange basic button">Basic Orange</button>
<button class="ui inverted yellow basic button">Basic Yellow</button>
<button class="ui inverted olive basic button">Basic Olive</button>
<button class="ui inverted green basic button">Basic Green</button>
<button class="ui inverted teal basic button">Basic Teal</button>
<button class="ui inverted blue basic button">Basic Blue</button>
<button class="ui inverted violet basic button">Basic Violet</button>
<button class="ui inverted purple basic button">Basic Purple</button>
<button class="ui inverted pink basic button">Basic Pink</button>
<button class="ui inverted brown basic button">Basic Brown</button>
<button class="ui inverted grey basic button">Basic Grey</button>
<button class="ui inverted black basic button">Basic Black</button>
</div>
</body>
</html>
사용하는게 BootStrap과 크게 다를게 없고 , 디자인이 마음에 들어서 종종 사용해 보게 될 듯 합니다!
JDBC 와 MYSQL 연동하기 1번부터 시작해서 MySql 로 게시판 (알바생 관리) 를 만들어 보고 있었는데 Semantic ui를 간단하게나마 적용시켜 보았습니다.
이것만 해서는 BootStrap과 차이가 없네요
까만색으로 버튼도 만들어보고
예제에 있는 버튼도 적용해 보았습니다.
Documents 를 둘러보니 마음에 드는 디자인들이 정말 많아 앞으로가 기대됩니다.
'Programming > JPA ⁄ Spring' 카테고리의 다른 글
| Spring Junit 테스트시 Caused by: java.io.FileNotFoundException: ServletContext resource [/WEB-INF/tiles/tiles.xml] cannot be resolved to URL because it does not exist 오류 해결 (0) | 2021.05.21 |
|---|---|
| Spring 에서 Tiles framework 쉽게 사용하기 (0) | 2021.05.20 |
| JDBC 와 MYSQL 연동하기 8) log4jdbc 적용하기 (0) | 2021.04.17 |
| JDBC 와 MYSQL 연동하기 7) MyBatis 적용하기 (0) | 2021.04.17 |
| JDBC 와 MYSQL 연동하기 6) MVC 패턴 적용하기 (0) | 2021.04.17 |