김명주 / kartrider

Go to a project
Toggle navigation Toggle navigation pinning
김명주
707f6a9d 1 parent 9a0f8dfb

Modify div location, size 

and Change variable name
Expand all
Inline Side-by-side
Showing 7 changed files with 98 additions and 111 deletions
1 - 1 +body{
2 -html, body{ 2 + background-image:url("metadata/image/home.png");
3 - width: 100%; 3 + background-repeat: repeat-x;
4 - height: 100%;
5 - margin:0;
6 } 4 }
5 +#ent_frame{
6 + width: 1600px;
7 + height: 900px;
8 + margin: auto;
9 +}
10 +
7 .line 11 .line
8 { 12 {
9 height: 40px; 13 height: 40px;
...@@ -45,7 +49,6 @@ html, body{ ...@@ -45,7 +49,6 @@ html, body{
45 width: 100%; 49 width: 100%;
46 height: 45%; 50 height: 45%;
47 top:5%; 51 top:5%;
48 - background-color: skyblue;
49 } 52 }
50 53
51 #btn1 54 #btn1
......
This diff is collapsed. Click to expand it.
...@@ -2,34 +2,38 @@ body ...@@ -2,34 +2,38 @@ body
2 { 2 {
3 background:rgb(26, 154, 248); 3 background:rgb(26, 154, 248);
4 } 4 }
5 +#main_frame
6 +{
7 + width:1600px;
8 + height:900px;
9 + margin: auto;
10 +}
5 .search 11 .search
6 { 12 {
7 - position:absolute; 13 + position:relative;
8 width: 700px; 14 width: 700px;
9 height:100px; 15 height:100px;
10 - top:33%; 16 + top:-15%;
11 - left:50%; 17 + margin:auto;
12 background:white; 18 background:white;
13 border-radius: 50px; 19 border-radius: 50px;
14 - margin:-50px 0px 0px -350px; 20 + border:4px solid black;
15 - border:3px solid black;
16 } 21 }
17 #left 22 #left
18 { 23 {
19 - position:absolute; 24 + position:relative;
20 - width:500px; 25 + width:400px;
21 - height:500px; 26 + height:400px;
22 - top:40%; 27 + top:45%;
23 - left:5%;
24 28
25 } 29 }
26 #right 30 #right
27 { 31 {
28 - position:absolute; 32 + position:relative;
29 - width:550px; 33 + width:450px;
30 - height:500px; 34 + height:400px;
31 - top:40%; 35 + top:45%;
32 - left:65%; 36 + left:45%;
33 } 37 }
34 .box { 38 .box {
35 animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 39 animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
......
1 <html> 1 <html>
2 - <head> 2 +
3 - <title>전적 검색</title> 3 +<head>
4 - <meta charset="utf-8"> 4 + <title>전적 검색</title>
5 - <!-- 제이쿼리 불러오기 --> 5 + <meta charset="utf-8">
6 - <!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>--> 6 + <link rel="stylesheet" type="text/css" href="search_home.css" />
7 - <link rel="stylesheet" type="text/css" href="search_home.css" /> 7 + <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
8 - <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> 8 + <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
9 - <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 9 +</head>
10 - 10 +
11 - </head> 11 +<body>
12 - <body> 12 + <div id="main_frame">
13 <img class="box" id="left" src="metadata/image/wodi.png"> 13 <img class="box" id="left" src="metadata/image/wodi.png">
14 <img class="box2" id="right" src="metadata/image/sdao.png"> 14 <img class="box2" id="right" src="metadata/image/sdao.png">
15 <div class="search" id="a"> 15 <div class="search" id="a">
16 <input type="text" id="name" placeholder="카트라이더 닉네임 입력" /> 16 <input type="text" id="name" placeholder="카트라이더 닉네임 입력" />
17 <button id="OK"></button> 17 <button id="OK"></button>
18 </div> 18 </div>
19 - <script> 19 + </div>
20 - $("#OK").click(function(){ // OK 버튼 클릭하면 20 +</body>
21 - $.ajax({ 21 +
22 - url: '/search', // postTest 주소로 22 +<script>
23 - async: true, // 동기화 - 서버에서 반응이 올때까지 기다림 23 + $("#OK").click(function () {
24 - type: 'POST', // POST 방식으로 24 + $.ajax({
25 - data: { 25 + url: '/search',
26 - test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄 26 + async: true,
27 - }, 27 + type: 'POST',
28 - dataType: 'json', 28 + data: {
29 - success: function(data){ 29 + test: $("#name").val()
30 - if(data=="200"){ 30 + },
31 - const div_target=document.querySelector('#a'); 31 + dataType: 'json',
32 - var obj=document.createElement('img'); 32 + success: function (data) {
33 - obj.id="loading"; 33 + if (data == "200") {
34 - obj.src='metadata/image/loading.gif'; 34 + const div_target = document.querySelector('#a');
35 - div_target.append(obj); 35 + var obj = document.createElement('img');
36 - window.location.href="/search/result"; 36 + obj.id = "loading";
37 - } 37 + obj.src = 'metadata/image/loading.gif';
38 - else{ 38 + div_target.append(obj);
39 - swal("ERROR", "존재하지 않는 닉네임입니다."); 39 + window.location.href = "/search/result";
40 - } 40 + }
41 - } 41 + else {
42 - }); 42 + swal("ERROR", "존재하지 않는 닉네임입니다.");
43 - }); 43 + }
44 - </script> 44 + }
45 - </body> 45 + });
46 + });
47 +</script>
48 +
46 </html> 49 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 body{ 1 body{
2 background:rgb(240, 239, 239) 2 background:rgb(240, 239, 239)
3 } 3 }
4 -#div 4 +#main_frame
5 +{
6 + width: 1600px;
7 + height: 1000px;
8 + margin:auto;
9 +}
10 +#most
5 { 11 {
6 position: relative; 12 position: relative;
7 - width: 1200px; 13 + width: 400px;
8 - height: 200px; 14 + height: 800px;
9 - left:50%; 15 + left:6%;
10 - margin:0px 0px 0px -600px;
11 float:left; 16 float:left;
12 } 17 }
13 #emblem 18 #emblem
...@@ -27,51 +32,34 @@ body{ ...@@ -27,51 +32,34 @@ body{
27 top:4%; 32 top:4%;
28 left:3%; 33 left:3%;
29 } 34 }
30 -#s_home 35 +#nick
31 -{
32 - position:relative;
33 - width:100%;
34 -}
35 -#title
36 { 36 {
37 font-family: 'Nanum Gothic'; 37 font-family: 'Nanum Gothic';
38 - font-size:large; 38 + font-size:35px;
39 font-weight:bold; 39 font-weight:bold;
40 } 40 }
41 -#resu 41 +
42 -{ 42 +#record
43 - position: relative;
44 - width: 1700px;
45 - height: 1100px;
46 - margin: 0 auto;
47 - top:250px;
48 -}
49 -#most
50 { 43 {
51 position: relative; 44 position: relative;
52 - width: 400px; 45 + width: 55%;
53 - height: 800px; 46 + height: 900px;
54 - left:6%; 47 + left:10%;
55 float:left; 48 float:left;
56 } 49 }
57 -#imgId 50 +
51 +#s_home
58 { 52 {
59 - vertical-align: middle; 53 + position:relative;
54 + width:100%;
60 } 55 }
61 -#nick 56 +#title
62 { 57 {
63 font-family: 'Nanum Gothic'; 58 font-family: 'Nanum Gothic';
64 - font-size:35px; 59 + font-size:large;
65 font-weight:bold; 60 font-weight:bold;
66 } 61 }
67 -#div1 62 +
68 -{
69 - position: relative;
70 - width: 50%;
71 - height: 900px;
72 - left:10%;
73 - float:left;
74 -}
75 63
76 #IMG 64 #IMG
77 { 65 {
...@@ -93,18 +81,7 @@ body{ ...@@ -93,18 +81,7 @@ body{
93 width:80px; 81 width:80px;
94 height:60px; 82 height:60px;
95 } 83 }
96 -#IMG4 84 +
97 -{
98 - width:80px;
99 - height:60px;
100 -}
101 -#img3
102 -{
103 - position: relative;
104 - width: 100%;
105 - height:100%;
106 - float:left;
107 -}
108 85
109 #table 86 #table
110 { 87 {
......
This diff is collapsed. Click to expand it.
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
10 var vec = ""; 10 var vec = "";
11 function Ajax(index) { 11 function Ajax(index) {
12 $.ajax({ 12 $.ajax({
13 - url: '/test/result', 13 + url: '/test/result',
14 - async: true, 14 + async: true,
15 - type: 'POST', 15 + type: 'POST',
16 data: { 16 data: {
17 - test: index 17 + test: index
18 } 18 }
19 }); 19 });
20 } 20 }
......