Semantic-Ui
html 페이지의 화면을 Semantic-Ui로도 간단하게 꾸밀 수 있다.
사이트에서 제공되는 코딩을 통해 버튼, 입력창 등 원하는 곳에 맞춰서 사용하면 된다.
설치 방법과 사용 예제를 알아보겠다.
Semantic UI 다운로드
Semantic UI
Shipping Choose your shipping options
semantic-ui.com
위의 사이트에서 알집 파일을 설치받는다.
그다음 이클립스 내에서 semantic.min.js 와 semantic.min.css를 'data'라는 폴더에 넣어주었다.
이는 밑에 파일 경로를 통해 확인할 수 있다.
cmd 창 - 모듈 등록
npm install semantic --save
cmd창에서 모듈을 등록해준다.
추가로 사이트에서 원하는 ui를 찾아 <>라는 버튼을 누르면 해당 코딩이 나온다.
그대로 html 파일에 복사하여 실행하면 웹페이지에 그대로 나오게 될 것이다.
그렇다면 이제 이를 활용해 로그인 페이지를 만들어 보겠다!
CSS (+반응형 웹문서 구별)
@CHARSET "UTF-8";
* {
padding:0;
margin:0;
box-sizing:border-box;
}
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
color: #000;
background-color: #fff;
}
.container {
width:100%;
height:100%;
display:flex;
flex-flow:column wrap;
align-items:center;
justify-content:center;
}
#cardbox {
width:35%;
}
#iconImage {
display:inline;
}
#titleText {
font-size:1.4em;
font-weight:bold;
color:#777;
}
#contentsText {
color:#999;
}
#myForm {
padding:1em;
}
.row {
height:3em;
}
.col {
width:5em;
}
.inputbox {
width:13em;
}
#buttonContainer {
padding-top:0.6em;
text-align:right;
}
@media screen and (min-width:320px) and (max-width:1024px){
#cardbox {
width:80%;
}
}
@media screen and (min-width:1024px) and (max-width:1920px){
#cardbox {
width:30%;
}
}
기본적으로 적용될 css 세팅을 해두었다.
semantic ui에서 사이즈 등을 사용자 지정으로 변경해줄 수 있다.
또한 반응형 웹 (Responsive Web)을 사용하여 스크린 환경에 따라 다르게 보이게 한다.
@media를 통해 스크린 사이즈 범위를 조건으로 두어
각각 카드박스의 가로길이를 다르게 주었다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>로그인 테스트</title>
</head>
<link rel="stylesheet" type="text/css" href="./data/semantic.min.css">
<link rel="stylesheet" type="text/css" href="./data/login.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./data/semantic.min.js"></script>
<body>
<div class="container">
<div id="cardbox" class="ui blue fluid card">
<div class="content">
<div class="left floated author">
<img id="iconImage" class="ui avatar image" src="./image/author.png">
</div>
<div>
<div id="titleText" class="header">로그인( •̀ ω •́ )✧♥</div>
<div id="contentsText" class="description">
아이디와 비밀번호를 입력하고 로그인하세요!
</div>
</div>
</div>
<form action="/process/login" id="myForm" method="post">
<table>
<tr class="row">
<td class="col">
<label id="contentsText">아이디</label>
</td>
<td class="col" colspan="2">
<div class="ui input">
<input class="inputbox" type="text" name="id"/>
</div>
</td>
<td></td>
</tr>
<tr class="row">
<td class="col">
<label id="contentsText">비밀번호</label>
</td>
<td class="col" colspan="2">
<div class="ui input">
<input class="inputbox" type="password" name="pwd"/>
</div>
</td>
<td></td>
</tr>
<tr valign="baseline">
<td></td>
<td>
<div class="ui toggle checkbox">
<input type="checkbox" name="saveOption">
<label>아이디 저장</label>
</div>
</td>
<td id="buttonContainer" align="right">
<input id="submitButton" class="ui primary button" type="submit" value="로그인"/>
</td>
</tr>
</table>
</form>
</div>
<a href="/public1/addUser.html">회원가입</a>
<a href="/public1/listUser.html">회원리스트</a>
</div>
</body>
</html>
실질적으로 Semantic UI 사이트에서 가져와 사용한 코딩이다.
상단에 link와 script를 통해 적용할 파일 경로 혹은 사이트 경로를 입력한다.
위의 Semantic 알집 파일에서 가져왔던 파일들도 넣어준 경로로 연결해준 것을 확인할 수 있다.
중간에 원하는 문자를 입력하거나 하이퍼링크를 추가로 걸어 변경이 가능하다.
상화에 알맞게 ui를 활용할 수 있으니 편리하다는 큰 장점이 있다.
- 결과창 (웹페이지 화면)
위의 Semantic UI를 활용해 만든 결과창이다.
4월 7일 수업🌜
요즘 수업하면서 웹페이지 출력 화면에 따로 이모티콘을 넣는 등의 여유(?)가.. 생겼다ㅎㅎㅎㅎ
사실 여유라기보다는 선생님의 코딩을 그대로 따라서 하는 것보단
내 마음대로 추가해주면서 결과를 확인하다 보니 더욱 이해가 되고 재밌게 할 수 있던 것 같다 ^-^
'개발 교육 TIL > front-end' 카테고리의 다른 글
| [React] Visual Studio Code 설치, es6(ecmascript) 자바스크립트 기초 문법 (0) | 2022.04.13 |
|---|---|
| [Node.js] View Template(뷰템플릿) - ejs 사용하기 + jade (0) | 2022.04.08 |
| [Ajax] Ajax로 게시판 / 방명록 만들기 (jQuery, JSP) (0) | 2022.03.19 |
| [Javascript] DOM(Document Object Model) - HTML DOM 객체 생성 (0) | 2022.03.17 |
| [Ajax] get 또는 post 방식으로 데이터 보내기, 자바스크립트 메소드 (0) | 2022.03.16 |
