김명주

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
......
......@@ -3,82 +3,94 @@
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="main_home.css"/>
<link rel="stylesheet" type="text/css" href="main_home.css" />
</head>
<body>
<img id="logo" src="metadata/image/logo.png">
<A id="link" href= "https://kart.nexon.com/Main/Index.aspx" target="_blank">공식 홈페이지 바로가기</A>
<A id="link" href="https://kart.nexon.com/Main/Index.aspx" target="_blank">공식 홈페이지 바로가기</A>
<div id="ent_frame">
<div id="select_div">
<button id="btn1" onClick="location.href='test'"> <img src="metadata/image/btn1.png"><br><text id="test">성향 테스트</text></button>
<button id="btn2" onClick="location.href='search'"> <img src="metadata/image/btn2.png"><br><text id="search">전적 검색</text></button>
<button id="btn1" onClick="location.href='test'"> <img src="metadata/image/btn1.png">
<br><text id="test">성향 테스트</text></button>
<button id="btn2" onClick="location.href='search'"> <img src="metadata/image/btn2.png">
<br><text id="search">전적 검색</text></button>
</div>
<div id="main_div">
<div id="notice_div">
<img src="metadata/image/notice.PNG">
<img src="metadata/image/notice.png">
<table id="table">
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135941" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 유령 배틀팀 등장 이벤트 당첨 라이더 안내</a>
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135941"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 유령 배틀팀 등장 이벤트 당첨 라이더 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135932" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 11/18(목) 같이하기 오류 수정을 위한 임시점검 안내</a>
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135932"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 11/18(목) 같이하기 오류 수정을 위한 임시점검 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135926" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 2021 카트라이더 리그 수퍼컵 승부예측 이벤트 보상 지급 안내</a>
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135926"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 2021 카트라이더 리그 수퍼컵 승부예측 이벤트 보상 지급 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135916" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> (수정) 11/18(목) 넥슨 정기점검 안내</a>
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135916"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> (수정) 11/18(목) 넥슨 정기점검 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135914" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 11/18(목) 보안센터 점검 및 U-OTP 서비스 종료 안내</a>
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135914"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 11/18(목) 보안센터 점검 및 U-OTP 서비스 종료 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135908" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> [수정] 11/15(월) 넥슨 전화 서비스 오류 안내</a>
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135908"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> [수정] 11/15(월) 넥슨 전화 서비스 오류 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135906" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 2021 신한은행 Hey Young 카트라이더 리그 수퍼컵 개막 안내</a>
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135906"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 2021 신한은행 Hey Young 카트라이더 리그 수퍼컵 개막 안내</a>
</td>
</tr>
<tr>
<td class="line">
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135905" id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17"
alt="공지"> 운영정책 위반 라이더 제재 안내</a>
<a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135905"
id="notice">
<img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30"
height="17" alt="공지"> 운영정책 위반 라이더 제재 안내</a>
</td>
</tr>
</table>
</div>
<div id="ranking_div">
<img src="metadata/image/ranking.PNG">
<img src="metadata/image/ranking.png">
<table id="table">
<tr>
<img src="metadata/image/menu.PNG">
<img src="metadata/image/menu.png">
</tr>
<tr>
<td id="ranktd"><img src="metadata/image/rank1.png"></td>
......@@ -163,8 +175,7 @@
</table>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......
......@@ -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>
<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>
</head>
<body>
<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 버튼 클릭하면
</div>
</body>
<script>
$("#OK").click(function () {
$.ajax({
url: '/search', // postTest 주소로
async: true, // 동기화 - 서버에서 반응이 올때까지 기다림
type: 'POST', // POST 방식으로
url: '/search',
async: true,
type: 'POST',
data: {
test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄
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';
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";
window.location.href = "/search/result";
}
else{
else {
swal("ERROR", "존재하지 않는 닉네임입니다.");
}
}
});
});
</script>
</body>
</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.