https://github.com/seojeounghoon/css_v1_MyHomePage

 

seojeounghoon/css_v1_MyHomePage

css project Hompage Design . Contribute to seojeounghoon/css_v1_MyHomePage development by creating an account on GitHub.

github.com

안녕하세요 왕초보 코딩 탈출입니다. 이것저것 많이하긴했지만 시간이 없다는 핑계로 블로그에 올리지 못했네요 ㅠ 

퍼블리셔는  아니지만  웹이 앱이건 디자인이 많이 발목을 잡아서 CSS를 공부하면서 올려볼까합니다.  

 

오늘은 간단하게 폰트설정하고 개발을 위해 기본 설정 하고 전체 배경 이미지를 넣겠습니다.

 

우선 폴더 구조는

index.html

css/style.css

img/

 

index.html 파일을 만들고 

css 와 img 폴더를 생성하고 

css 에는 style.css 파일을 생성합니다.

img폴더에는 차후에 이미지를 깃에 같이 포함해서 올릴테니 다운받으시면 됩니다. 

 

우선 기본 html 내용을 작성하고 

<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

다음과 같이 구글 폰트를 가져옵니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font -->
 
    <!-- CSS -->
    <link rel="stylesheet" href="./css/style.css">
    
 
    <title>왕초보코딩탈출</title>
</head>
<body>
    <header class="header">
        hello World!!!!
    </header>
</body>
</html>
 
  

 

다음으로 

모든 페이지의 margin, padding 을 0으로 주고  box-sizing: border-box 로 기본 설정하겠습니다.

 

그리고 body에 폰트의 기본 설정들과 컬러 라인높이등을 미리 설정해 둡니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color:#777;
}
  

이제 index.html 에 작성해둔 header 에 전체 이미지 넣기

 

1
2
3
4
5
6
.header {
    height: 100vh;
    background-image: url("../img/main.jpg");
    background-size: cover;
    background-position: top;
}
 
  

결과 화면

저작자표시 비영리

'웹 프론트엔드 > CSS-나의 홈페이지 만들기' 카테고리의 다른 글

3. 우측 상단 로고 넣기 화면 중앙에 텍스트 넣고 간단한 애니메이션 효과  (0) 2020.04.02
3. 배경 이미지에 그라데이션 넣기  (0) 2020.04.01
1. 프로젝트 개요  (0) 2020.03.31

디자인에는 Bootstrap을 사용하겠습니다.


구글에 bootstrap admin free template 무료 템플릿이 많이 있습니다. 


저는 AdminLTE 에서 제공하는 템플릿을 사용하겠습니다.


https://adminlte.io/   에서 템플릿을 다운로드 받습니다.




오늘 마우스를 두고와서 ㅠㅠㅠ 더 안이쁘네요 ㅠㅠ 죄송죄송


Source.code.zip 파일을 다운받으시면 됩니다.

다운로드 받으셔서 압축을 풀면 다음과 같은 여러개의 파일이 있는데 그중에서 


이렇게 3개의 파일만 사용 할것이니 우선 알고 계시면 되겠습니다.~


우선 공통으로 사용되는 부분부터 결정해야겠죠 저는 다음과 같이 나눴습니다.



1. 네비게이션 바 (navBar) 

2. 사이드 바 (sideBar)

3. 섹션 컨테이너 

4. 헤더

5. 라인

6. 푸터


이제부터 명칭은 다음과 같이 정의하겠습니다.


제가 계속적으로 수정할 부분은 4번 5번  헤더와 라인입니다. 나머지는 공통부분입니다. 



스프링으로 넘어와 보겠습니다.



servlet-context.xml 에서


1
<resources mapping="/resources/**" location="/resources/" />
cs


이 부분을 보시면 /resources/ 경로까지 설정 되어 있는걸 볼 수 있습니다. 이제 템플릿 다운 받은 것에서
dist , pages, plugins  resource에 복사해서 붙여 넣습니다. 

이제 JSP 파일을 하나 만들어 봅니다. 우선 만드시기 전에 

servlet-context.xml 에서



1
2
3
4
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>
cs


 <beans:property name="prefix" value="/WEB-INF/views/" />
 <beans:property name="suffix" value=".jsp" />


여기를 보시면 느낌이 오시나요 ? 

WEB-INF 아래 views 아래 jsp를 읽고 있네요  저는 views폴더 안에 lotto폴더를 하나 만들어서 lotto.JSP 파일을 만들겠습

니다.



다음과 같이 만들면 Encoding 타입이  EUC-KR 이네요 UTF-8로 바꾸겠습니다.  하나하나 바꾸셔도 되지만

 설정에서 바꾸겟습니다.



windows - preferences - web - JSP Files




다음과 같이 만들어주세요 



딱 보시면 알겠지만 공통으로 쓰이는 부분을 뺀 것입니다.

물론 장점은 한번만 수정하면 ~ 다 적용이 된다는 거겠죠 ?


우선 blank.html의 전체를 복사해서 lotto.jsp 파일을 수정해 넣습니다.




이제 각가 중복으로 사용하는 부분을 Ctrl + X 해서 잘라내서 include에 만들어 둔 곳에 복사해서 넣겠습니다.


꼭 직접 하시기 바랍니다~ 한번만 해보면 다음부터는 어떤 템플릿을 가져와도 나눌 수 있습니다. 꼭 직접하는게 중요해요


mata.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
    
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>프로젝트</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="resources/dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
cs



위에서 설명했 듯  CSS 파일은 resources 폴더 안에 있습니다, 그래서 요롷게 수정해주셔야합니다.

<link rel="stylesheet" href="resources/dist/css/adminlte.min.css">




navbar.jsp


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
114
115
116
117
118
119
120
121
122
123
124
125
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="../../index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
 
    <!-- SEARCH FORM -->
    <form class="form-inline ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fa fa-search"></i>
          </button>
        </div>
      </div>
    </form>
 
    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="fa fa-comments-o"></i>
          <span class="badge badge-danger navbar-badge">3</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Brad Diesel
                  <span class="float-right text-sm text-danger"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">Call me whenever you can...</p>
                <p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  John Pierce
                  <span class="float-right text-sm text-muted"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">I got your message bro</p>
                <p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Nora Silvester
                  <span class="float-right text-sm text-warning"><i class="fa fa-star"></i></span>
                </h3>
                <p class="text-sm">The subject goes here</p>
                <p class="text-sm text-muted"><i class="fa fa-clock-o mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
        </div>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="fa fa-bell-o"></i>
          <span class="badge badge-warning navbar-badge">15</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">15 Notifications</span>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fa fa-envelope mr-2"></i> 4 new messages
            <span class="float-right text-muted text-sm">3 mins</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fa fa-users mr-2"></i> 8 friend requests
            <span class="float-right text-muted text-sm">12 hours</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fa fa-file mr-2"></i> 3 new reports
            <span class="float-right text-muted text-sm">2 days</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
          <i class="fa fa-th-large"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->
 
cs



sidebar.jsp


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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="../../index3.html" class="brand-link">
      <img src="/resources/dist/img/AdminLTELogo.png"
           alt="AdminLTE Logo"
           class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">SJH_PROJ</span>
    </a>
 
    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        
          <li class="nav-item">
            <a href="../widgets.html" class="nav-link">
              <i class="nav-icon fa fa-th"></i>
              <p>로또 프로젝트 </p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>
 
 
cs



footer.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<footer class="main-footer">
    <div class="float-right d-none d-sm-block">
      <b>Version</b> 3.0.0-alpha
    </div>
    <strong>Copyright &copy; 2014-2018 <a href="localhost:7080/lotto.do">sjhProject.io</a>.</strong> All rights
    reserved.
  </footer>
 
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
 
cs


script.jsp


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<script src="resources/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="resources/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- SlimScroll -->
<script src="resources/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="resources/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="resources/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="resources/dist/js/demo.js"></script>
cs


여기또한 경로를 다 수정해주셔야 합니다.~~~~


이렇게 다 나누고 나면 

lotto.jsp 에는 요렇게 앞으로 수정 할 Section 부분만 남습니다.  이제 공통으로 쓰기위해 나둬는 부분을 include 시켜줘야겠죠 ㅎㅎ


Ctrl + X 해서 도려낸 부분에 include를 시켜줍니다.  경로는 상대경로로 지금 현재 lotto.jsp 보다 위에 include폴더 부터 써주시면 됩니다 . 

<%@include file="../include/meta.jsp" %>



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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@include file="../include/meta.jsp" %>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <%@include file="../include/navbar.jsp" %>
  <!-- Main Sidebar Container -->
  <%@include file="../include/sidebar.jsp" %>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Blank Page</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Blank Page</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
 
    <!-- Main content -->
    <section class="content">
 
      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Title</h3>
 
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
              <i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="card-body">
          Start creating your amazing application!
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          Footer
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
 
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
 
  
</div>
<!-- ./wrapper -->
<%@include file="../include/footer.jsp" %>
<!-- jQuery -->
<%@include file="../include/script.jsp" %>
</body>
</html>
 
cs


이제 모든 디자인 작업을 끝냈으니 화면에 잘 나오나 확인 해야겠죠 ?ㅎㅎㅎ


향후에 ULR을 localhost:7080/~~~~.do 로 호출하기위해서 web.xml을 조금 수정하겠습니다.


 / 요 부분을


1
2
3
4
    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
cs


*.do 로 주정해주세요


1
2
3
4
    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
cs



이제 컨트롤러를 만들어서 화면을 확인해 보겠습니다,~


다음과 같이 com.sjh.rotto 아래에 lottoController 클래스를 하나 만들고 다음과 같이 작성합니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.sjh.rotto;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class LottoController {
 
    @RequestMapping("/lotto.do")
    public String dashBaord() {
        
        return "lotto/lotto";
    }
}
 
cs



이제보니 패키지를 rotto라고 햇네요 ;;;


작성하셨다면 이제 서버를 돌리고 

화면을 확인해보면


다음과 같이 화면이 나온다면 성공입니다.~

참고로 로고 이미지가 깨질 텐데 ~ 다 이해하셨다면 저와같이 나올 겁니다 ㅎㅎ 숙제!!



수고 많으셨습니다 ~~~ 이제 디자인 작업이 다 끝났으니 다음엔 로또정보를 DB에 넣어 보도록 하겠습니다~


수고하셧습니다~

저작자표시 비영리

'Spring+mariaDB+mybatis 프로젝트' 카테고리의 다른 글

7. 스프링 DB 연동하기  (3) 2018.06.24
6. 데이터 베이스 준비하기  (0) 2018.06.23
4. 스프링 톰캣서버 설치 및 첫 화면 띄우기  (0) 2018.06.21
3. 스프링 프로젝트 생성 및 버전 변경  (0) 2018.06.20
2. 스토리보드 작성하기  (0) 2018.06.20

+ Recent posts

티스토리툴바