메인페이지 꾸며보기 (내 프로젝트에 적용)

Front-End/Bootstrap 2019. 10. 4. 17:19

메인페이지 home.jsp 페이지에 디자인을 추가한 글씨를 추가함


home.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>메인페이지</title>
<head>
 
 
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link href="/css/bootstrap.css" rel="stylesheet">
<header class="masthead">
<link href="/css/agency.css" rel="stylesheet">
 

- CSS 디자인 설정 -

 <style>
      d {
        font-family: "Arial Black", sans-serif;
        font-size: 45px;
        font-weight: bold;
        color: #ffffff;
      }
      .s3 { text-shadow: 6px 2px 2px gray; }
      
      
       c {
        font-family: "Arial Black", sans-serif;
        font-size: 45px;
        font-weight: bold;
        color: gren;
      }
      
      .s4 { text-shadow: 10px 4px 4px red; }
      
       p {
        margin: 20px;
        padding: 20px 0px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Arial Black", sans-serif;
        font-size: 60px;
        font-weight: bold;
      }
      .s2 {
    
        color: #ffffff;
        text-shadow: 4px 4px 0px #bdbdbd;
      }
      
      
    </style>
  


   
  
    </head>
 
 
<%@ include file="include/header.jsp"%>
<%@ include file="include/menu.jsp"%>
 
<body background = "https://i.pinimg.com/originals/c6/4a/1d/c64a1d3ec620f0550c9211e83bbb0512.jpg">
<br>
<br>
 <Script src="/js/jquery-3.3.1.min.js"></script>
 <Script src="/js/bootstrap.min.js"></script>
 
<p class="s2">welcome to hs_project!!</p>
 
<div style="width: 60%; height:150px; float: right;">
    <center>
    
     <br><br><br><br><br>
    <d class="s3">We Create Value</d><br><br><br><br>
    <d class="s3">With You...</d><br><br><br><br>
    <d class="s3">Now is the time.</d><br><br><br><br>
    <c class="s4">Communicate and share with each other</c><br><br><br><br>
    
    </center>
</div>
 
<div style="width: 30%; height:150px; float: left;">
 
<%@ include file="include/login.jsp"%>
 
</div>
 
     
 
 
</body>
 
<!-- 로그인 실패나 성공시 메시지를 받아서 출력하는 자바스크립트 구문 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function(){
        var responseMessage = "<c:out value="${message}" />";
        if (responseMessage != ""){
            alert(responseMessage)
        }
    })
</script>
 
 
<br>
<br>
 
 
</html>
cs




저작자표시

'Front-End > Bootstrap' 카테고리의 다른 글

게시판 상세보기 페이지, 댓글 목록 페이지 꾸며보기 (내 프로젝트에 적용)  (0) 2019.10.08
게시판페이지 꾸며보기 (내 프로젝트에 적용)  (0) 2019.10.07
전체적으로 bootstrap 적용 (일부)  (0) 2019.10.02
로그인 폼에 bootstrap 적용  (0) 2019.10.02
메뉴바에 Bootstrap 적용  (0) 2019.10.02
:

티스토리툴바