Form 태그에 onSubmit="return false;" 추가

 

<form onSubmit="return false;">

</form>

 

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

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 이클립스에서 db연동하여 화면 구성하기  (0) 2016.09.28
[HTML/CSS] 애니메이션  (0) 2016.09.27
[HTML/CSS] 기본적인 웹 화면 만들기  (0) 2016.09.27
[HTML/CSS] 그리드(grid)를 이용한 반응형 웹  (0) 2016.09.27
[HTML/CSS] 그리드(grid)  (0) 2016.09.27

소스

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
<%@ page import="java.sql.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
    private Connection conn;
    private Statement stmt;
    private ResultSet rs;
%>
<%
    Class.forName("oracle.jdbc.driver.OracleDriver");
    conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "scott", "tiger");
    stmt = conn.createStatement();
    rs = stmt.executeQuery("select * from guest");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;        
        }
        #header,#footer{
            background-color: #ccc;
            height: 80px;
        }
        #header>h1{
            text-align: center;
        }
        table{
            width: 100%;
        }
        table td:nth-child(1){
            width: 20%;
        }
        table td:nth-child(2){
            width: 30%;
        }
        .row{
            border-bottom: red solid 1px;
        }
        .row>div{
            display: inline-block;
            width: 25%;
        }
        a{
            text-decoration: none;
        }
        #footer li{
            display: inline-block;
            width: 22%;
            margin: 0px 3px;
        }
        #footer a{
            display: inline-block;
            background-color: #aaa;
            width: 100%;
            height: 80px;
            text-align: center;
            line-height: 80px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>app 화면</h1>
    </div>
    <div id="content">
        <div id="table">
            <div class="row">
                <table>
                    <tr>
                        <td rowspan="2">사번</td>
                        <td rowspan="2">이름</td>
                        <td>날짜</td>
                    </tr>
                    <tr>
                        <td>금액</td>
                    </tr>
                </table>
            </div>
        </div>
        <% while(rs.next()){ %>
        
        <a href="#?sabun=<%=rs.getInt("sabun") %>">
         <div class="row">
            <div class = "col"><%=rs.getInt("sabun") %></div>
            <div class = "col"><%=rs.getString("name") %></div>
            <div class = "col"><%=rs.getDate("nalja") %></div>
            <div class = "col"><%=rs.getInt("pay") %></div>
         </div>
         </a>
        <% } %>
    </div>
    <div id="footer">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">BACK</a></li>
        </ul>
    </div>
</body>
</html>
cs

결과


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

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/JSP] Form 작성시 자동 Submit 막기  (0) 2019.10.24
[HTML/CSS] 애니메이션  (0) 2016.09.27
[HTML/CSS] 기본적인 웹 화면 만들기  (0) 2016.09.27
[HTML/CSS] 그리드(grid)를 이용한 반응형 웹  (0) 2016.09.27
[HTML/CSS] 그리드(grid)  (0) 2016.09.27

소스

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>애니메이션</title>
    <style>
        .menu1>div{
            width: 200px;
            height: 100px;
            float: left;
            background-color: bisque;
            border-style: solid;
            border-color: white;
            border-width: 10px;
            border-radius: 50px;
            text-align: center;
            line-height: 100px;
            transition-duration: 1s;
        }
        .menu1>div:hover{
            color: white;
            background-color: gold;
            height: 300px;
            line-height: 300px;
        }
        .menu2{
            clear: both;
        }
        .menu2>ul{
            list-style: none;
        }
        .menu2>ul>li{
            width: 100px;
            height: 50px;
            background-color: lightgreen;
            text-align: center;
            line-height: 50px;
            margin: 10px;
            transition-duration: 1s;
        }
        .menu2>ul>li:hover{
            width: 300px;
            color: white;
            background-color: aquamarine;
        }
        .menu2>ul>li:nth-child(2){
            transition-duration: ease-in;    /*점점 속도가 느려진다*/
        }
        .menu2>ul>li:nth-child(3){
            transition-duration: ease-out;    /*점점 속도가 빨라진다*/
        }
        .menu2>ul>li:nth-child(4){
            transition-delay: 2.0s;    /*2초 기다린다*/
            transition-duration: 1s;
        }
    </style>
</head>
<body>
    <div class="menu1">
        <div>menu1</div>
        <div>menu2</div>
        <div>menu3</div>
        <div>menu4</div>
    </div>
    <div class="menu2">
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
        </ul>
    </div>
</body>
</html>
cs

결과

첫 화면

menu1에 마우스를 가져다 댔을 경우

 transition-duration: 1s; 의  부분에서 1s를 3s로 변경한다면 진행 속도가 느려짐을 볼 수 있다.

menu2에 마우스를 가져다 댔을 경우

menu2의 경우는 서서히 속도가 느려지며 진행되고, menu3의 경우는 서서히 속도가 빨라지며 진행한다.

menu4의 경우는 마우스를 올렸을 때부터 2초가 지나고 움직이는 모습을 볼수있다.


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

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/JSP] Form 작성시 자동 Submit 막기  (0) 2019.10.24
[HTML/CSS] 이클립스에서 db연동하여 화면 구성하기  (0) 2016.09.28
[HTML/CSS] 기본적인 웹 화면 만들기  (0) 2016.09.27
[HTML/CSS] 그리드(grid)를 이용한 반응형 웹  (0) 2016.09.27
[HTML/CSS] 그리드(grid)  (0) 2016.09.27

기본&그리드 이용한 웹 화면 만들기


1. 그리드를 사용하지 않은 웹 화면

소스

<body>부분에는 구성을 보여준다

우선 header부분으로 로고 이미지를 넣고

menu부분에 메뉴를 4개를 넣어 a태그로 설정했다.

그리고 왼쪽은 서브메뉴의 공간, 중앙엔 메인 내용, 오른쪽은 광고란으로 구성하고

제일 하단에 footer부분으로 웹 화면을 구성한다.

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
<body>
   <div>
        <div id="header">
            <img alt="" src="googlelogo.png" />
        </div>
        <div id="menu">
            <ul>
                <li><a href="#">menu1</a></li>
                <li><a href="#">menu2</a></li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
            </ul>
        </div>
        <div id="clear"></div>
        <div id="submenu">
            서브메뉴
        </div>
        <div id="content">
            <img alt="" src="jung.png" />
            <h1>환영합니다</h1>
            <p>정우성입니다.. :)</p>
            <br/>
        </div>
        <div id="aside">
            광고
        </div>
        <div id="footer">
            오픈 API | 이용약관 | 개인정보취급방침 | 청소년보호정책 | 권리침해신고 | 고객센터 | E-mail수집거부정책
        <br/> Copyright ©  Corp. All rights reserved.
        </div>
    </div>
</body>
cs

<style>부분의 소스이다

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
<head>
    <meta charset="utf-8">
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        body>div{
            width: 85%;
            margin: 0px auto;
        }
        #header>img{
            height: 80px;
            width: auto;
            margin: 10px;
        }
        #menu{
            background-color: antiquewhite;
            height: 50;
        }
        #menu>ul{
            width: 430px;
            margin-left: auto;
            margin-right: auto;
        }
        #menu>ul>li{
            float: left;
            list-style: none;
            margin-top: 5px;
            margin-right: 10px;
            margin-bottom: 5px;
        }
         #menu>ul>li:last-child{
            margin-right: 0px;
        }
        #menu>ul>li>a{
            display: inline-block;
            background-color: tomato;
            height: 40px;
            width: 100px;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
        #clear{
            clear: both;
        }
        #menu>ul>li>a:hover{
            background-color: brown;
        }
        #submenu,#content,#aside{
            float: left;
        }
        #submenu{
            background-color: antiquewhite;
            width: 20%;
        }
        #content{
            width: 60%;
        }
        #content>img{
            width: 100%;
            height: auto;
        }
        #aside{
            background-color: antiquewhite;
            width: 20%;
        }
        #footer{
            clear: both;
            background-color: gainsboro;
        }
    </style>
</head>
cs

결과

하단 부분입니다.


2. 그리드를 사용한 웹 화면

소스

그리드를 이용하기위하여 <link href="css/grid.css" rel="stylesheet" /> 가 필요하다.

<body>부분의 구성은 위의 구성과 동일하게 작성하였다.

<div class="clear"></div> 부분이 추가됨을 확인 할 수 있다.

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
<body>
    <div class="container_12">
        <div class="header grid_12">
            <img alt="" src="googlelogo.png" />
        </div>
        <div class="clear"></div>
 
        <div class="menu push_2">
        <div class="grid_2">menu1</div>
        <div class="grid_2">menu2</div>
        <div class="grid_2">menu3</div>
        <div class="grid_2">menu4</div>
        </div>
        <div class="clear"></div>
        
        <div class="menu2 grid_3">서브메뉴</div>
        
        <div class="content grid_6">
            <img alt="" src="jung2.png"/>
            <h1>환영합니다.</h1>
        </div>
        
        <div class="aside grid_3">광고</div>
        <div class="clear"></div>
        
        <div class="footer grid_12">
            사이트 정책 및 약관 | 회사소개 | 광고 | 마이비즈니스 | 제휴제안 | 이용약관 | 개인정보취급방침 | 청소년보호정책 | 고객센터
        </div>
        <div class="clear"></div>
    </div>
</body>
cs

<style>부분의 소스이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
    <meta charset="UTF-8">
    <title>grid system</title>
    <link href="css/grid.css" rel="stylesheet" />
    <style>
        .header>img{
            width: auto;
            height: 80px;
        }
        .content>img{
            width: 100%;
            height: auto;
        }
        .menu2,.aside{
            background-color: antiquewhite;
        }
    </style>
</head>
cs

결과



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

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 이클립스에서 db연동하여 화면 구성하기  (0) 2016.09.28
[HTML/CSS] 애니메이션  (0) 2016.09.27
[HTML/CSS] 그리드(grid)를 이용한 반응형 웹  (0) 2016.09.27
[HTML/CSS] 그리드(grid)  (0) 2016.09.27
[HTML/CSS] 반응형 웹 (모바일 환경&태블릿 환경&PC 환경)  (0) 2016.09.27

이번 포스팅은 그리드 파일을 이용한 것이 아닌 직접 작성하였다.

전체 소스

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container{
                    margin: 0px auto;
        }    
        
        .grid1,.grid2,.grid3
                ,.grid4,.grid5,.grid6
                ,.grid7,.grid8,.grid9
                ,.grid10,.grid11,.grid12{
                    float: left;
                    border: 1px red solid;
                    box-sizing: border-box;
                }
        
        @media screen and (max-width:400px){
            /*모바일*/    
            .container{
                width: 100%;
            }    
            .container .mgrid1{width: 8.333%;}
            .container .mgrid2{width: 16.666%;}
            .container .mgrid3{width: 25%;}
            .container .mgrid4{width: 33.333%;}
            .container .mgrid5{width: 41.666%;}
            .container .mgrid6{width: 50%;}
            .container .mgrid7{width: 58.333%;}
            .container .mgrid8{width: 66.666%;}
            .container .mgrid9{width: 75%;}
            .container .mgrid10{width: 83.333%;}
            .container .mgrid11{width: 91.666%;}
            .container .mgrid12{width: 100%;}
            .mrow{clear: both;}
            .mclear{
                display: none;
            }
            .mbtn{
                width: 80px;
                height: 80px;
                border: 1px red solid;
                box-sizing: border-box;
                border-radius: 5px;
                margin: 5px;
                float: right;
                background-color: gray;
            }
            .mbtn>div{
                width: 50px;
                border: 3px red solid;
                margin-top: 14px;
                margin-left: auto;
                margin-right: auto;
            }
            .menu>div:nth-child(3),
            .menu>div:nth-child(4),
            .menu>div:nth-child(5),
            .menu>div:nth-child(6){
                display: none;
            }
        }
        
        @media screen and (min-width:401px){
             /*pc용*/
            .container{
                width: 900px;
            }
            .container .grid1{width: 75px;}
            .container .grid2{width: 150px;}
            .container .grid3{width: 225px;}
            .container .grid4{width: 300px;}
            .container .grid5{width: 375px;}
            .container .grid6{width: 450px;}
            .container .grid7{width: 525px;}
            .container .grid8{width: 600px;}
            .container .grid9{width: 675px;}
            .container .grid10{width: 750px;}
            .container .grid11{width: 825px;}
            .container .grid12{width: 900px;}
            .row{clear: both;}
        }
    </style>
</head>
<body>
  <div class="container">
      <div class="header row mrow">
          <div class="grid12 mgrid12">
              logo img
          </div>
      </div>
      <div class="menu row">
        <div class="mrow">
            <div class="mgrid12">
                <div class="mbtn">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="mrow">
           <div class="grid2 mclear">&nbsp;</div> 
        </div>
        <div class="mrow">
            <div class="grid2 mgrid12"><a href="#">menu1</a></div>
        </div>
        <div class="mrow">
            <div class="grid2 mgrid12"><a href="#">menu2</a></div>
        </div>
        <div class="mrow">
            <div class="grid2 mgrid12"><a href="#">menu3</a></div>
        </div>
        <div class="mrow">
            <div class="grid2 mgrid12"><a href="#">menu4</a></div>
        </div>
        <div class="mrow">
            <div class="grid2 mclear">&nbsp;</div>
        </div>
      </div>
      <div class="row">
          <div class="mrow">
              <div class="content grid9 mgrid12">content</div>
          </div>
          <div class="mrow">
              <div class="aside grid3 mgrid12">aside</div>
          </div>
      </div>
      <div class="footer row mrow">
         <div class="grid12 mgrid12">
           정책 및 약관 | 회사소개 | 광고 | 마이비즈니스 | 제휴제안 | 이용약관 | 개인정보취급방침 | 청소년보호정책 | 고객센터  
         </div>
      </div>
  </div>
</body>
</html>
cs

결과

PC 

모바일


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

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 애니메이션  (0) 2016.09.27
[HTML/CSS] 기본적인 웹 화면 만들기  (0) 2016.09.27
[HTML/CSS] 그리드(grid)  (0) 2016.09.27
[HTML/CSS] 반응형 웹 (모바일 환경&태블릿 환경&PC 환경)  (0) 2016.09.27
[HTML/CSS] 위치 변경하기  (1) 2016.09.26

+ Recent posts

티스토리툴바