김명주

Modify div location, size

and Change variable name
html, body{
width: 100%;
height: 100%;
margin:0;
body{
background-image:url("metadata/image/home.png");
background-repeat: repeat-x;
}
#ent_frame{
width: 1600px;
height: 900px;
margin: auto;
}
.line
{
height: 40px;
......@@ -45,7 +49,6 @@ html, body{
width: 100%;
height: 45%;
top:5%;
background-color: skyblue;
}
#btn1
......
This diff is collapsed. Click to expand it.
......@@ -2,34 +2,38 @@ body
{
background:rgb(26, 154, 248);
}
#main_frame
{
width:1600px;
height:900px;
margin: auto;
}
.search
{
position:absolute;
position:relative;
width: 700px;
height:100px;
top:33%;
left:50%;
top:-15%;
margin:auto;
background:white;
border-radius: 50px;
margin:-50px 0px 0px -350px;
border:3px solid black;
border:4px solid black;
}
#left
{
position:absolute;
width:500px;
height:500px;
top:40%;
left:5%;
position:relative;
width:400px;
height:400px;
top:45%;
}
#right
{
position:absolute;
width:550px;
height:500px;
top:40%;
left:65%;
position:relative;
width:450px;
height:400px;
top:45%;
left:45%;
}
.box {
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
......
<html>
<head>
<title>전적 검색</title>
<meta charset="utf-8">
<!-- 제이쿼리 불러오기 -->
<!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
<link rel="stylesheet" type="text/css" href="search_home.css" />
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<head>
<title>전적 검색</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="search_home.css" />
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="main_frame">
<img class="box" id="left" src="metadata/image/wodi.png">
<img class="box2" id="right" src="metadata/image/sdao.png">
<div class="search" id="a">
<input type="text" id="name" placeholder="카트라이더 닉네임 입력" />
<button id="OK"></button>
</div>
<script>
$("#OK").click(function(){ // OK 버튼 클릭하면
$.ajax({
url: '/search', // postTest 주소로
async: true, // 동기화 - 서버에서 반응이 올때까지 기다림
type: 'POST', // POST 방식으로
data: {
test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄
},
dataType: 'json',
success: function(data){
if(data=="200"){
const div_target=document.querySelector('#a');
var obj=document.createElement('img');
obj.id="loading";
obj.src='metadata/image/loading.gif';
div_target.append(obj);
window.location.href="/search/result";
}
else{
swal("ERROR", "존재하지 않는 닉네임입니다.");
}
}
});
});
</script>
</body>
</div>
</body>
<script>
$("#OK").click(function () {
$.ajax({
url: '/search',
async: true,
type: 'POST',
data: {
test: $("#name").val()
},
dataType: 'json',
success: function (data) {
if (data == "200") {
const div_target = document.querySelector('#a');
var obj = document.createElement('img');
obj.id = "loading";
obj.src = 'metadata/image/loading.gif';
div_target.append(obj);
window.location.href = "/search/result";
}
else {
swal("ERROR", "존재하지 않는 닉네임입니다.");
}
}
});
});
</script>
</html>
\ No newline at end of file
......
body{
background:rgb(240, 239, 239)
}
#div
#main_frame
{
width: 1600px;
height: 1000px;
margin:auto;
}
#most
{
position: relative;
width: 1200px;
height: 200px;
left:50%;
margin:0px 0px 0px -600px;
width: 400px;
height: 800px;
left:6%;
float:left;
}
#emblem
......@@ -27,51 +32,34 @@ body{
top:4%;
left:3%;
}
#s_home
{
position:relative;
width:100%;
}
#title
#nick
{
font-family: 'Nanum Gothic';
font-size:large;
font-size:35px;
font-weight:bold;
}
#resu
{
position: relative;
width: 1700px;
height: 1100px;
margin: 0 auto;
top:250px;
}
#most
#record
{
position: relative;
width: 400px;
height: 800px;
left:6%;
width: 55%;
height: 900px;
left:10%;
float:left;
}
#imgId
#s_home
{
vertical-align: middle;
position:relative;
width:100%;
}
#nick
#title
{
font-family: 'Nanum Gothic';
font-size:35px;
font-size:large;
font-weight:bold;
}
#div1
{
position: relative;
width: 50%;
height: 900px;
left:10%;
float:left;
}
#IMG
{
......@@ -93,18 +81,7 @@ body{
width:80px;
height:60px;
}
#IMG4
{
width:80px;
height:60px;
}
#img3
{
position: relative;
width: 100%;
height:100%;
float:left;
}
#table
{
......
This diff is collapsed. Click to expand it.
......@@ -10,11 +10,11 @@
var vec = "";
function Ajax(index) {
$.ajax({
url: '/test/result',
async: true,
type: 'POST',
url: '/test/result',
async: true,
type: 'POST',
data: {
test: index
test: index
}
});
}
......