Programming/JPA ⁄Spring

JDBC 와 MYSQL 연동하기 9) Semantic UI 적용해보기 (BootStrap 대안)

📝 작성 : 2021.04.21  ⏱ 수정 : 
반응형

최종 프로젝트를 할때 모든 팀이 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 를 둘러보니 마음에 드는 디자인들이 정말 많아 앞으로가 기대됩니다.

반응형