Juni_Dev_log

(node.js) [Part.7] 익스프레스 프로젝트를 모듈화하기 - UI 라이브러리로 웹 문서를 예쁘게 꾸미기 (semantic UI) 본문

Theorem (정리)/node.js

(node.js) [Part.7] 익스프레스 프로젝트를 모듈화하기 - UI 라이브러리로 웹 문서를 예쁘게 꾸미기 (semantic UI)

Juni_K 2021. 1. 28. 15:42

app2.js 파일을 노드로 실행하면 웹 서버가 실행된다.

이제 사용자는 필요한 정보를 요청해서 받아볼 수 있다. 사용자가 웹 브라우저를 열고 웹 서버로 데이터 조회를 욫어하고 싶다면 login.html 같은 웹 문서를 띄워보자.

이와 같이 사용자는 웹 문서를 주로 보게 되므로, 웹 문서가 이쁘게 보이는 것이 중요하다. 최대한 간단한 방법으로 꾸며보도록 한다.

Semantic UI 라이브러리로 웹 문서 꾸미기

원래는 CSS와 자바스크립트를 사용해야하지만, 코드의 양을 줄이고 싶다면, UI 라이브러리를 사용하면 된다.

다양한 UI 라이브러리 중에서 Semantic UI 라이브러리는 태그만으로도 버튼이나 입력 상자와 같은 웬만한 UI 구성요소를 만들 수 있다.

 

semantic-ui.com/

 

Semantic UI

Shipping Choose your shipping options

semantic-ui.com

심플한 UI 스타일을 사용하며, 모바일 단말에서도 제대로 동작한다. 

먼저, 왼쪽 위의 [Menu] 버튼을 눌러보면 버튼이나 입력상자와 같은 구성 요소를 어떻게 만들 수 있는지 확인할 수 있다.

Card 컴포넌트를 눌러 보면, 하나의 정보를 박스 안에 넣어서 보여주는 카드 방식의 UI를 볼 수 있다.

 

프로젝트 웹 문서를 Semantic UI의 버튼, 입력 상자, Card 컴포넌트 등을 사용해서 수정해보자.

ModuleExample을 복사해서 DefaultExample 프로젝트를 만들고 해당 폴더에 semantic-ui 를 설치한다.

 

> npm install semantic-ui --save

 

설치를 진행하면, [DefaultExample] - [node_modules] 폴더에 semantic-ui 폴더 안에서 semantic.min.css 파일과 semantic.min.js 파일을 [/public] 폴더로 복사한다.

 

먼저 login.html에 추가해보자.

#login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width, height = device-width, initial-scale = 1">
    <title>로그인</title>
    
    <link href="./semantic.min.css" rel="stylesheet">
    
    <script src="./jquery-2.1.4.min.js"></script>
    <script src="./semantic.min.js"></script>
    
...
 
</html>
 cs

 

<meta name="viewport" content="width = device-width, height = device-width, initial-scale = 1">

: 모바일 단말에서는 조회할 때 웹 문서가 너무 작게 보이지 않도록, viewport를 사용한다. 모바일 웹 사이트에서 사용하는 태그이며, 가로 크기와 세로 크기에 맞춰 웹 문서의 크기를 정해준다. 

따라서, PC화면에 맞춰진 크기 때문에 웹 문서가 너무 작게 보이는 문제를 없애준다.

 

<link> 태그로 semantic-ui 라이브러리에 필요한 CSS 파일을 사용하도록 추가한다.

그 아래, 제이쿼리를 사용하기 위한 파일을 추가하고, semantic-ui 라이브러리에 필요한 자바스크립트 파일을 사용하도록 추가한다.

 

Card 컴포넌트 추가하기

semantic-ui 라이브러리를 사용할 준비가 되었다.

<body> 태그 안에 Card 컴포넌트를 사용하기 위한 태그를 추가한다.

 

#login.html

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
31
32
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width, height = device-width, initial-scale = 1">
    <title>로그인</title>
    
    <link href="./semantic.min.css" rel="stylesheet">
    
    <script src="./jquery-2.1.4.min.js"></script>
    <script src="./semantic.min.js"></script>
    
</head>
<body>
   <div class="container">
       <div id="cardbox" class="ui blue fluid card">
           <div class="contents">
               <div class="left floated author">
                   <img id="iconImage" class="ui avatar image" src="./images/author.png">
               </div>
               <div>
                   <div id="titleText" class="header">로그인</div>
                   <div id="contentsText" class="description">아이디와 비밀번호를 입력하고 로그인 하세요.</div>
               </div>
           </div>
       </div>
       
        ...
 
   </div>
</body>
</html>
 cs

인터넷에서 아무 아이콘 이미지를 다운해서 author.png  라는 이름으로 [images] 폴더 안에 넣는다.

 

<table>태그로 로그인 입력 상자와 버튼 추가하기

이제 <table> 태그로 아이디와 비밀번호를 입력할 수 있는 입력 상자, 그리고 로그인 버튼을 넣어보자.

#login.html

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
31
32
33
34
35
36
        ...
       <form id="form1" method="post" action="/process/login">
           <table>
               <tr class="row">
                   <td class="col1"><label id="contentsText">아이디</label></td>
                   <td class="col2" colspan="2">
                       <div class="ui input">
                           <input class="inputbox" type="text" name="id">
                       </div>
                   </td>
                   <td></td>
               </tr>
               <tr class="row">
                   <td class="col1"><label id="contentsText">비밀번호</label></td>
                   <td class="col2" colspan="2">
                       <div class="ui input">
                           <input class="inputbox" type="password" name="password">
                       </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="로그인" name="">
                   </td>
               </tr>
           </table>
       </form>
        ...
 cs

아이디 입력 상자, 비밀번호 입력 상자, [로그인]버튼이 만들어졌고, 아이디를 저장할 것인지를 묻는 체크상자가 있다.

 

<style>태그로 전체 화면 모양 만들기

<style>태그 안에 코드를 입력한다.

#login.html

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
<style>
        * {
            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;
        }
        
    </style>
 cs

 

- 웹 브라우저마다 margin과 padding 값이 조금씩 다르다.

=> 먼저, margin과 padding값을 0으로 초기화하는 CSS 속성을 추가한다.

* 기호를 넣으면 웹 문서 안의 모든 태그에 CSS속성을 적용할 수 있다.

그리고 문서 안에 들어간 요소의 크기보다 테두리가 커지지 않도록 box-sizing 속성의 값을 border-box로 넣어준다.

 

- <html> 태그와 <body> 태그의 가로 세로 크기를 100%를 만들어주고, 배경색을 조절한다.

- container 에 대한 display 속성값을 flex로 설정한다. flexbox를 사용하여 레이아울을 구성한다. align-items, justify-content 를 모두 center로 설정하면, 화면 가운데로 정렬된다.

#login.html

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
31
32
33
34
35
36
37
38
        #cardbox{
            width: 70%;
        }
        
        #iconImage{
            display: inline;
        }
        
        #titleText{
            font-size: 1.4em;
            font-weight: bold;
            color: #777;
        }
        
        #contentsText{
            color: #999;
        }
        
        #form1{
            padding: 1em;
        }
        
        .row{
            height: 3em;
        }
        
        .col1{
            width: 5em;
        }
        
        .inputbox{
            width: 20em;
        }
        
        #buttonContainer{
            padding-top: 0.6em;
            text-align: right;
        }
 cs

 

이제 스마트폰 단말기가 PC와 같은 Wi-Fi로 연결되었다면, PC의 IP를 입력하여 모바일 단말의 웹 브라우저로 조회해볼 수 있다.

 

로그인 카드를 모바일 화면에 맞도록 CSS 조정하기

그런데 스마트폰 웹 브라우저에서 로그인 화면을 조회하면 가로 크기가 작아서 입력 상자나 버튼이 카드 밖으로 벗어나 있다. 이것은 pc의 웹 브라우저 화면과 모바일 단말의 화면 크기가 달라서 발생하는 문제이다.

따라서 모바일 화면에 맞도록 css를 조정해야한다. login.html 을 복사해서 login_mobile.html을 만들고 CSS를 수정한다.

#login_mobile.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        ...
    <style>
        
        #cardbox{
            width: 90%;
        }
        
        ...
        
    </style>
    
</head>
<body>
   ...
       <div class="ui input">
        <input class="inputbox" type="text" placeholder="아이디 입력" name="id">
    </div>
 
    <div class="ui input">
        <input class="inputbox" type="password" placeholder=" 입력" name="password">
    </div>                                    
   ...
</body>
</html>
 cs

- 카드의 가로폭을 70% -> 90%로 수정한다.

- placeholder 속성을 추가한다.

 

이제 PC의 웹 브라우저에서 로그인 화면을 요청하면 login.html을 보여주고, 모바일 단말에서 요청하면 login_mobile.html 을 보여주도록 만든다.

반응형 웹으로 웹 문서를 구별해서 보여주기

만약 하나의 파일에서 모바일 단말에서 요청한 것인지 아니면 PC에서 요청한 것인지 구별해서 보여주려면 반응형 웹(Responsive Web)을 사용하면 된다. 

반응형 웹은 단말의 종류에 따라 다르게 보이는 웹 문서를 상황에 맞게 설정할 수 있다. 보통 미디어 쿼리(Media Query)를 사용해서 단말의 종류를 구분한 후 css를 조정한다.

 

login.html을 복사해서 login_responsive.html을 만들고, <style>태그에 코드를 추가한다.

#login_responsive.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
 
    @media screen and (min-width : 320px) and (max-width : 768px){
            #cardbox{
                width: 90%;
            }
            
            label[id=contentsText]{
                display: none;
            }
        }
        
    @media screen and (min-width : 768px) and (max-width : 979px){
            #cardbox{
                width: 80%;
            }
        }
       
</style>
 cs

- @media 로 시작하는 부분에서 단말의 가로 크기를 최솟값과 최댓값 사이의 범위로 지정한다.

: 320px <  x  < 768px 인 경우 , cardbox의 width 를 90%로 하고, <label>태그를 보이지 않도록 한다.

: 768px <  x  < 979px 인 경우, cardbox의 width를 80%로 한다.

 

사용자 리스트 웹 문서 수정하기

사용자 리스트 웹 문서도 수정해보자. 사용자 리스트를 요청하는 웹 문서는 listuser.html 파일이다. 이 파일에서 <head> 태그 안의 내용을 login.html 파일과 똑같이 수정하고, <body>태그 안에 코드는 다음과 같이 수정한다.

#listuser.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
    <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="./images/author.png">
               </div>
               <div>
                   <div id="titleText" class="header">사용자 리스트</div>
                   <div id="contentsText" class="description">아래 [조회] 버튼을 누르세요.</div>
               </div>
           </div>
           <form id="form1" method="post" action="/process/listuser">
               <table>
                   <tr class="row" align="center" valign="middle">
                       <td id="buttonContainer"><input id="submitButton" class="ui primary button" type="submit" value="조회" name=""></td>
                   </tr>
               </table>
           </form>
       </div>
   </div>
...
 cs

사용자 조회에 응답하는 웹 문서 꾸미기

사용자 리스트는 위와 같은 요청 화면보다 응답 화면을 예쁘게 만드는 것이 중요하다.

응답 코드는 자바스크립트로 되어 있으므로 직접 코드를 넣으면된다.

 

listuser.html을 복사하여 listuser_response.html 파일을 만들고 태그 부분을 수정한다.

# listuser_response.html

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width, height = device-width, initial-scale = 1">
    <title>사용자 리스트 응답</title>
    
    <link href="./semantic.min.css" rel="stylesheet">
    
    <script src="https://code.jquery.com/jquery-2.2.1.js"></script>
    <script src="./semantic.min.js"></script>
    
    <style>
        * {
                padding:0;
                margin:0;
                box-sizing:border-box;
            }
            
            html {
                width:100%;
                height:100%;
            }
            
            body {
                width:100%;
                height:100%;
                color: #000;
                background-color: #fff;
            }
                    
            .container {
                margin-right: auto;
                margin-left: auto;
                padding-left: 20px;
                padding-right: 20px;
            }
 
            #cardbox {
                width:70%;
            }
 
            #iconImage {
                display:inline;
                width:2em;
                height:2em;
            }
            
            .bottomArea {
                background-color:rgba(242,248,255,255) !important;
            }
        
    </style>
    
</head>
<body>
    <div class="container">
      
      <br>
      
       <div class="ui raised segment">
           <a class="ui blue ribbon label">사용자 리스트</a>
           <br><br>
           <div class="ui two column grid">
            <!-- 첫 번째 카드  -->
               <div class="column">
                   <div class="ui blue fluid card">
                       <div class="content">
                           <div class="header">레드벨벳</div>
                           <div class="meta">
                               <span class="right floated time">20세</span>
                               <span class="category">아이돌</span>
                           </div>
                           <div class="description">
                               <br>
                               <p>걸그룹 가수입니다.</p>
                               <p>아이돌입니다.</p>
                           </div>
                       </div>
                       <div class="bottomArea extra content">
                           <div class="right floated author">
                               <img class="ui avatar image" src="./images/woman.png">010-0000-1234
                           </div>
                       </div>
                   </div>
               </div>
               <!-- 두 번째 카드  -->
               <div class="column">
                   <div class="ui blue fluid card">
                       <div class="content">
                           <div class="header">소녀시대</div>
                           <div class="meta">
                               <span class="right floated time">30세</span>
                               <span class="category">아이돌</span>
                           </div>
                           <div class="description">
                               <br>
                               <p>걸그룹 가수입니다.</p>
                               <p>아이돌입니다.</p>
                           </div>
                       </div>
                       <div class="bottomArea extra content">
                           <div class="right floated author">
                               <img class="ui avatar image" src="./images/woman.png">010-1234-1234
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</body>
</html>
 cs

- <div> 태그에 'ul raised segment' 로 속성 값을 추가하면 리본을 추가할 수 있다. 리본은 왼쪽이나 오른쪽에 만들어서 글자를 눈에띄게 만들 수 있다.

- ' ui two column grid'인  <div> 태그가 있는데 이것은 2분할된 격자를 만든다.

 

이렇게 진행하면 다음처럼 페이지가 나온다.

listuser_response.html

화면이 왼쪽 위에 '사용자 리스트'가 적힌 파란색 리본이 달린 형태로 영역이 구성되었다.

각 카드 영역의 아래쪽에는 아이콘과 전화번호가 보인다. 만약, 병렬로 배치된 사용자 리스트를 세로로 재구성하려면 <div>태그 중에서 class 속성 값이 'ui two column grid'인 태그와 'column' 태그를 제거하면 된다.

다음은 사용자 리스트가 세로로 배치되도록 수정한 레이아웃이다.

 

listuser_response.html 병렬

 

사용자 추가용 웹 문서 꾸미기

adduser.html 파일을 수정한다.

입력상자를 추가하려면 <table> 태그 안에 입력 상자의 수만 늘리면 된다.

semantic-ui 를 사용하기 위해 login.html 파일의 내용을 그대로 복사해서 입력한 후, 사용자 이름을 입력할 수 있는 입력 상자를 하나 추가한다.

 

<!DOCTYPE html>
<html lang="ko">
...
<body>
   <div class="container">
       <div id="cardbox" class="ui blue fluid card">
           <div class="contents">
               <div class="left floated author">
                   <img id="iconImage" class="ui avatar image" src="./images/author.png">
               </div>
               <div>
                   <div id="titleText" class="header">사용자 추가</div>
                   <div id="contentsText" class="description">정보를 입력하고 [추가] 버튼을 누르세요.</div>
               </div>
           </div>
           <form id="form1" method="post" action="/process/adduser">
               <table>
                   <tr class="row">
                       <td class="col1"><label id="contentsText">아이디</label></td>
                       <td class="col2" colspan="2">
                           <div class="ui input">
                               <input class="inputbox" type="text" name="id">
                           </div>
                       </td>
                       <td></td>
                   </tr>
                   <tr class="row">
                       <td class="col1"><label id="contentsText">비밀번호</label></td>
                       <td class="col2" colspan="2">
                           <div class="ui input">
                               <input class="inputbox" type="password" name="password">
                           </div>
                       </td>
                       <td></td>
                   </tr>
                   <tr class="row">
                       <td class="col1"><label id="contentsText">사용자명</label></td>
                       <td class="col2" colspan="2">
                           <div class="ui input">
                               <input class="inputbox" type="text" name="name">
                           </div>
                       </td>
                       <td></td>
                   </tr>
                   <tr valign="baseline">
                       <td></td>
                       <td></td>
                           
                       <td id="buttonContainer" align="right">
                           <input id="submitButton" class="ui primary button" type="submit" value="추가" name="">
                       </td>
                   </tr>
               </table>
           </form>
       </div>
   </div>
</body>
</html>

 

지금까지 UI 라이브러리로 웹 문서를 꾸미는 방법에 대해서 알아보았다.

UI 라이브러리에는 부트스트랩(Bootstrap)이나 타이톤(Titon)같은 다른 UI 라이브러리도 함께 사용해보길 권장한다.

우리의 목적에 맞는 레이아웃과 위젯이 들어간 결과물을 만들 수 있느냐가 중요하다. 따라서 라이브러리는 필요에 맞게 선별해서 사용하자.

저작자표시 비영리 변경금지

'Theorem (정리) > node.js' 카테고리의 다른 글

(node.js) [Part.8] 뷰 템플릿 적용하기 - pug 뷰 템플릿 사용하기  (0) 2021.01.31
(node.js) [Part.8] 뷰 템플릿 적용하기 - ejs 뷰 템플릿 사용하기  (0) 2021.01.30
(node.js) [Part.7] 익스프레스 프로젝트를 모듈화하기 - 설정 파일 만들기  (0) 2021.01.25
(node.js) [Part.7] 익스프레스 프로젝트를 모듈화하기 - 사용자 정보 관련 기능을 모듈화하기  (0) 2021.01.23
(node.js) [Part.7] 익스프레스 프로젝트를 모듈화하기 - 모듈화 방법 자세히 살펴보기  (0) 2021.01.21
'Theorem (정리)/node.js' Related Articles more
Comments