FaceTheNew
1. Main Home
[완성 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FaceTheNew</title>
<link rel="shortcut icon" href="https://media.vlpt.us/images/waterlily_0101/post/b0a997db-b387-4f8f-a9c5-5042800353db/world-map.png">
<meta property="og:image" content="https://media.vlpt.us/images/waterlily_0101/post/fb89d14c-a927-46b9-94fc-bcf7b237df3e/FaceTheNew-MAIN-TITLE-%EC%9B%90%EB%B3%B8.gif">
<meta property="og:title" content="FaceTheNew">
<meta property="og:description" content="교환학생을 위한 정보 공유 웹서비스입니다.">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
.mytitle {
background-color: white;
width: 910px;
height: 502px;
margin: 290px auto 100px auto;
background-image: url("https://media.vlpt.us/images/waterlily_0101/post/fb89d14c-a927-46b9-94fc-bcf7b237df3e/FaceTheNew-MAIN-TITLE-%EC%9B%90%EB%B3%B8.gif");
background-position: center;
background-size: cover;
}
.mybtn {
display: inline-block;
width: 300px;
height: 50px;
line-height: 50px;
border: 1px lightgrey solid;
margin-top: 10px;
margin-right:50px;
background-color: lightgray;
text-align: center;
cursor: pointer;
border-radius: 13px;
color: white;
font-size: 17px;
box-shadow: 5px 5px 5px #A3A4FF;
transition-duration: 0.3s;
}
.mybtn:hover {color:#A3A4FF}
.hover1:hover {
box-shadow: 200px 0 0 0 rgba(1,1,1,1) inset,
-200px 0 0 0 rgba(1,1,1,1) inset;
}
.mybtn:active {color:grey}
.mybtn-group {
text-align: center;
}
.SmallExplain {
text-align: center;
margin-top: 150px;
color: black;
}
</style>
</head>
<body>
<div>
<div class="mytitle"></div>
<div class="mybtn-group">
<button href="" class="mybtn hover1" onclick="location.href='facethenewintro.html'">FaceTheNew 소개</button>
<button href="" class="mybtn hover1" onclick="location.href='requireddocuments.html'">교환학생 지원 서류</button>
<button href="" class="mybtn hover1" onclick="location.href='searchuniv.html'">파견 대학 검색</button>
<button href="" class="mybtn hover1" onclick="location.href='lifehack.html'">교환학생 학교생활 Tip</button>
</div>
<h4 class="SmallExplain">- 교환학생을 위한 정보 공유 웹서비스입니다 -</h4>
</div>
</body>
</html>2. 'FaceTheNew 소개' page
[완성 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FaceTheNew 소개</title>
<link rel="shortcut icon"
href="https://media.vlpt.us/images/waterlily_0101/post/b0a997db-b387-4f8f-a9c5-5042800353db/world-map.png">
<meta property="og:image"
content="https://media.vlpt.us/images/waterlily_0101/post/fb89d14c-a927-46b9-94fc-bcf7b237df3e/FaceTheNew-MAIN-TITLE-%EC%9B%90%EB%B3%B8.gif">
<meta property="og:title" content="FaceTheNew 소개">
<meta property="og:description" content="">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
.mytitle {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
}
.mybtn-group {
background-color: black;
width: 1400px;
height: 45px;
margin: 25px auto 0 auto;
border-top: 1px black solid;
border-bottom: 1px black solid;
}
.mybtn-secondary {
background-color: black;
color: white;
width: 200px;
height: 45px;
border: 1px black solid;;
font-size: 17px;
cursor: pointer;
transition-duration: 0.3s;
}
.mybtn-secondary:hover {color:#A3A4FF}
.mybtn-secondary:active {color:grey}
.subtitle {
background-color: white;
width: 1400px;
height: 70px;
line-height: 70px;
margin: 120px auto 60px auto;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
}
.messagebox {
width: 1300px;
margin: 0 auto 300px auto;
}
</style>
</head>
<body>
<div class="mytitle">
<img src="https://media.vlpt.us/images/waterlily_0101/post/02ff83ce-0474-4e0d-b886-69cf1b445588/FaceTheNew-TITLE-%EC%9B%90%EB%B3%B8-%EC%B5%9C%EC%A2%85.gif"
style="max-width:30%; height: auto;"
onclick="location.href='index.html'">
</div>
<div class="mybtn-group">
<button href="" class="mybtn-secondary hover1" onclick="location.href='facethenewintro.html'">FaceTheNew 소개</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='requireddocuments.html'">교환학생 지원 서류</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='searchuniv.html'">파견 대학 검색</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='lifehack.html'">교환학생 학교생활 Tip</button>
</div>
<h1 class="subtitle">◦ FaceTheNew 소개</h1>
<div class="messagebox">
<h3 style="font-size: 22px;"><span style="color: #F23005;">FaceTheNew</span>는 교환학생을 <span style="color: #A3A4FF;">준비 중</span>인, <span style="color: #A3A4FF;">경험 중</span>인, <span style="color: #A3A4FF;">경험한</span> 학생들을 위한 정보 공유 웹서비스입니다.</h3>
<br>
<h3 style="font-size: 20px;">💡 <span style="color: #F23005;">FaceTheNew</span>는 교환학생을 <span style="color: #A3A4FF;">준비</span>하고 있는 학생들에게 필요한 정보를 공유하고자 만든 공간입니다.<br /></h3>
<h3 style="line-height: 40px">교환학생을 가기 위해 준비해야 할 것들이 참 많습니다.<br/>
영어 성적은 기본이고, 교환학생 합격 후에 더 바빠집니다.<br/>
새로운 환경에서 길게는 1년 동안 생활해야 하기 때문에 꼼꼼히 확인해야 할 것들이 많습니다.<br/>
교환학생을 가서 마주할 익숙지 않을 수많은 새로움들과 좀 더 쉽게 친해지기 위해<br />
준비하고 알아야 할 정보들을 <span style="color: #F23005;">FaceTheNew</span>에서 정리해드리고자 합니다.<br />
<span style="color: #F23005;">FaceTheNew</span>가 교환학생을 시작하는 학생들에게 안전범퍼가 되길 바랍니다.</h3>
<br>
<h3 style="font-size: 20px;">💡 <span style="color: #F23005;">FaceTheNew</span>는 교환학생을 현재 <span style="color: #A3A4FF;">경험 중</span>인 학생들에게 필요한 정보를 공유하고자 만든 공간입니다.<br /></h3>
<h3 style="line-height: 40px">교환학생을 가면 지금까지 살아온 환경과 다른 문화와 마주합니다.<br />
그 과정에서 수많은 새로움과 부딪힙니다.<br />
그 새로움을 자신의 것으로 만드는 과정에서 익숙하지 않았던 것들과 친해집니다.<br />
그 가운데 <span style="color: #F23005;">FaceTheNew</span>가 교환학생으로 외국에 가 있는 학생들에게 한숨 돌릴 수 있는 쉼터가 되길 바랍니다.</h3>
<br>
<h3 style="font-size: 20px;">💡 <span style="color: #F23005;">FaceTheNew</span>는 교환학생을 <span style="color: #A3A4FF;">경험</span>한 학생들이 교환학생을 통해 배운 것들을 나눌 수 있는 공간입니다.<br /></h3>
<h3 style="line-height: 40px">익숙하지 않은 환경에서 마주한 새로움은 많은 것을 배울 수 있게 해줍니다.<br />
그 과정에서 쌓인 경험치는 삶을 대하는 자세에서, 세상을 바라보는 새로운 시각에서 나타납니다.<br />
<span style="color: #F23005;">FaceTheNew</span>는 여러분들이 마주한 새로움이 궁금합니다.<br />
여러분들이 배우고 느낀 새로운 시각이 궁급합니다.<br />
<span style="color: #F23005;">FaceTheNew</span>가 그 새로움들을 공유하는 공간이 되길 바랍니다.</h3>
</div>
</body>
</html>3. '교환학생 지원 서류' page
[완성 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FaceTheNew : 교환학생 지원 서류</title>
<link rel="shortcut icon"
href="https://media.vlpt.us/images/waterlily_0101/post/b0a997db-b387-4f8f-a9c5-5042800353db/world-map.png">
<meta property="og:image"
content="https://media.vlpt.us/images/waterlily_0101/post/fb89d14c-a927-46b9-94fc-bcf7b237df3e/FaceTheNew-MAIN-TITLE-%EC%9B%90%EB%B3%B8.gif">
<meta property="og:title" content="FaceTheNew : 교환학생 지원 서류">
<meta property="og:description" content="">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
.mytitle {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
}
.mybtn-group {
background-color: black;
width: 1400px;
height: 45px;
margin: 25px auto 0 auto;
border-top: 1px black solid;
border-bottom: 1px black solid;
}
.mybtn-secondary {
background-color: black;
color: white;
width: 200px;
height: 45px;
border: 1px black solid;;
font-size: 17px;
cursor: pointer;
transition-duration: 0.3s;
}
.mybtn-secondary:hover {color:#A3A4FF}
.mybtn-secondary:active {color:grey}
.commondocuments {
background-color: white;
width: 1400px;
height: 70px;
line-height: 70px;
margin: 120px auto 60px auto;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
}
.messagebox {
width: 1300px;
margin: 0 auto 0 auto;
}
.individualdocuments {
background-color: white;
width: 1400px;
height: 70px;
line-height: 70px;
margin: 120px auto 60px auto;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
}
.searchdocuments {
background-color: lightgrey;
width: 1100px;
height: 50px;
line-height: 50px;
border-radius: 13px;
color: white;
font-size: 17px;
margin: 0 auto 60px auto;
box-shadow: 5px 5px 5px #A3A4FF;
transition-duration: 0.3s;
}
.input-group-text {
padding:40px;
}
.form-control-continent {
background-color: lightgrey;
width: 400px;
height: 50px;
line-height: 50px;
border-left: 1px lightgrey solid;
border-right: 1px lightgrey solid;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
padding-left: 10px;
color: white;
font-size: 17px;
cursor: pointer;
}
.form-control-nation {
background-color: lightgrey;
width: 400px;
height: 50px;
line-height: 50px;
border-left: 1px lightgrey solid;
border-right: 1px lightgrey solid;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
padding-left: 10px;
color: white;
font-size: 17px;
cursor: pointer;
}
.sch_smit {
background-color: lightgrey;
height: 50px;
width: 50px;
line-height: 50px;
border: 1px lightgrey solid;
border-radius: 13px;
background-image: url("https://media.vlpt.us/images/waterlily_0101/post/cd260f99-d6dc-49cf-b144-bf8f3af30a49/search.png");
background-position: center;
background-size: cover;
float: right;
cursor: pointer;
}
.messagebox2 {
width: 1300px;
margin: 0 auto 300px auto;
border: 1px black solid;
}
</style>
</head>
<body>
<div class="mytitle">
<img src="https://media.vlpt.us/images/waterlily_0101/post/02ff83ce-0474-4e0d-b886-69cf1b445588/FaceTheNew-TITLE-%EC%9B%90%EB%B3%B8-%EC%B5%9C%EC%A2%85.gif"
style="max-width:30%; height: auto;"
onclick="location.href='index.html'">
</div>
<div class="mybtn-group">
<button href="" class="mybtn-secondary hover1" onclick="location.href='facethenewintro.html'">FaceTheNew 소개</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='requireddocuments.html'">교환학생 지원 서류</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='searchuniv.html'">파견 대학 검색</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='lifehack.html'">교환학생 학교생활 Tip</button>
</div>
<h1 class="commondocuments">◦ 교환학생 지원시 필요한 공통 서류</h1>
<div class="messagebox">
<h3 style="font-size: 22px;">* 중앙대학교 교환학생 서류양식 기준입니다.<br /></h3>
<h3 style="font-size: 20px;">1. Learning Agreement<br /></h3>
<p style="font-size: 18px;">- 대부분의 경우 상대교에서 제공하는 양식이 있습니다. 상대교 양식대로 작성해 제출해야 합니다.<br /></p>
<h3 style="font-size: 20px;">2. 교환학생 과목이수계획서(전공)<br /></h3>
<h3 style="font-size: 20px;">3. 교환학생 과목이수계획서(자유선택)<br /></h3>
<p style="font-size: 18px;">- syllabus 혹은 course list를 준비하여 이수할 과목들의 과목명, 학기, 학점이 적혀진 증거자료를 필수적으로 구비해야 합니다.<br />
- "수학기간" 란에는 "정확한 파견 연도 및 학기"를 적어야 합니다.<br /></p>
<h3 style="font-size: 20px;">4. 개인정보 수집ㆍ이용 동의서<br /></h3>
<h3 style="font-size: 20px;">5. 고유식별정보 수집ㆍ이용 동의서<br /></h3>
<h3 style="font-size: 20px;">6. 안전 관련 서약서<br /></h3>
</div>
<h1 class="individualdocuments">◦ 국가별 교환학생 지원시 필요한 필수 서류</h1>
<div class="searchdocuments">
<span class="input-group-text" id="inputGroupPrepend">국가별 필수 지원 서류</span>
<select class="form-control-continent" id="formControlContinent" aria-describedby="inputGroupPrepend1" required>
<option selected>대륙</option>
<option value="asia">아시아</option>
<option value="europe">유럽</option>
<option value="northamerica">북아메리카</option>
<option value="southamerica">남아메리카</option>
<option value="oceania">오세아니아</option>
<option value="africa">아프리카</option>
</select>
<select class="form-control-nation" id="formControlNation" aria-describedby="inputGroupPrepend2" required>
<option selected>국가</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button id="search_btn" type="button" title="검색" class="sch_smit"></button>
</div>
<div class="searchdocumentsresult">
<div class="messagebox2">가나다라마바사<br />
가나다라마바사<br />
가나다라마바사<br />
가나다라마바사<br />
가나다라마바사<br />
가나다라마바사<br />
가나다라마바사<br />
</div>
</div>
</body>
</html>[To do list]
✅ '국가별 교환학생 지원시 필요한 필수 서류' 부분 db 생성하기
✅ 동적 select box 코드 작성하기
✅ 동적 select box와 db 연결하기
✅ 서버 만들기
4. '파견 대학 검색' page
[완성 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FaceTheNew : 파견 대학 검색</title>
<link rel="shortcut icon"
href="https://media.vlpt.us/images/waterlily_0101/post/b0a997db-b387-4f8f-a9c5-5042800353db/world-map.png">
<meta property="og:image"
content="https://media.vlpt.us/images/waterlily_0101/post/fb89d14c-a927-46b9-94fc-bcf7b237df3e/FaceTheNew-MAIN-TITLE-%EC%9B%90%EB%B3%B8.gif">
<meta property="og:title" content="FaceTheNew : 파견 대학 검색">
<meta property="og:description" content="">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
.mytitle {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
}
.mybtn-group {
background-color: black;
width: 1400px;
height: 45px;
margin: 25px auto 0 auto;
border-top: 1px black solid;
border-bottom: 1px black solid;
}
.mybtn-secondary {
background-color: black;
color: white;
width: 200px;
height: 45px;
border: 1px black solid;;
font-size: 17px;
cursor: pointer;
transition-duration: 0.3s;
}
.mybtn-secondary:hover {color:#A3A4FF}
.mybtn-secondary:active {color:grey}
.subtitle {
background-color: white;
width: 1400px;
height: 70px;
line-height: 70px;
margin: 120px auto 60px auto;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
}
.searchuniv {
background-color: lightgrey;
width: 1100px;
height: 50px;
line-height: 50px;
border-radius: 13px;
color: white;
font-size: 17px;
margin: 0 auto 60px auto;
box-shadow: 5px 5px 5px #A3A4FF;
transition-duration: 0.3s;
}
.input-group-text {
padding:40px;
}
.form-control-continent {
background-color: lightgrey;
width: 282.3px;
height: 50px;
line-height: 50px;
border-left: 1px lightgrey solid;
border-right: 1px lightgrey solid;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
padding-left: 10px;
color: white;
font-size: 17px;
cursor: pointer;
}
.form-control-nation {
background-color: lightgrey;
width: 282.3px;
height: 50px;
line-height: 50px;
border-left: 1px lightgrey solid;
border-right: 1px lightgrey solid;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
padding-left: 10px;
color: white;
font-size: 17px;
cursor: pointer;
}
.form-control-univ {
background-color: lightgrey;
width: 282.3px;
height: 50px;
line-height: 50px;
border-left: 1px lightgrey solid;
border-right: 1px lightgrey solid;
border-top: 1px lightgrey solid;
border-bottom: 1px lightgrey solid;
padding-left: 10px;
color: white;
font-size: 17px;
cursor: pointer;
}
.sch_smit {
background-color: lightgrey;
height: 50px;
width: 50px;
line-height: 50px;
border: 1px lightgrey solid;
border-radius: 13px;
background-image: url("https://media.vlpt.us/images/waterlily_0101/post/cd260f99-d6dc-49cf-b144-bf8f3af30a49/search.png");
background-position: center;
background-size: cover;
float: right;
cursor: pointer;
}
.univimage {
background-color: white;
width: 1400px;
height: 500px;
margin: 0 auto 0 auto;
}
table {
width: 1400px;
margin: 0 auto 0 auto;
# border: 1px black solid;
# border-collapse: collapse;
}
td {
# border: 1px black solid;
padding: 0 0 20px 0;
width: 33%;
}
.someinfo {
background-color: lightgrey;
width: 1400px;
height: 50px;
line-height: 50px;
margin: 0 auto 0 auto;
text-align: center;
vertical-align: text-bottom;
}
.messagebox2 {
width: 1400px;
margin: 15px auto 300px auto;
border: 1px black solid;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#searchuniv').html('');
searchuniv();
searchunivresult();
});
function searchuniv(sParam) {
var $target = $("select[name='formControlNation']");
$target.empty();
if(sParam == "") {
$target.append("<option value=''>국가</option>");
return;
}
$.ajax({
type: "POST",
url: "/searchuniv",
async: false,
data: {P_NO: sParam},
dataType: "json",
success: function(jdata) {
if(jdata.length == 0) {
$target.append("<option value=''>국가</option>");
} else {
$(jdata).each(function(i) {
$target.append("<option value='"+ jdata[i].REG_NO +"'>"+ jdata[i].formControlNation +"</option>");
});
}
}, error: function(xhr) {
console.log(xhr.responseText);
alert(response["msg"]);
}
});
}
function searchunivresult() {
$.ajax({
type: "GET",
url: "/searchuniv",
data: {},
success: function (response) {
let searchuniv = response['all_searchuniv']
for (let i = 0; i < searchuniv.length; i++) {
let UnivName = searchuniv[i]['UnivName']
let UnivLocation = searchuniv[i]['UnivLocation']
let UnivOfficeTelNum = searchuniv[i]['UnivOfficeTelNum']
let UnivContactEmail = searchuniv[i]['UnivContactEmail']
let UnivWebsite = searchuniv[i]['UnivWebsite']
let temp_html = `<tbody id="messagebox1">
<tr>
<td><h3>◦ University Name</h3><span id="UnivName"><h4> ${UnivName}</h4></span></td>
</tr>
<tr>
<td><h3>◦ Location</h3><span id="UnivLocation"><h4> ${UnivLocation}</h4></span></td>
</tr>
<tr>
<td><h3>◦ Office Telephone Number</h3><span id="UnivOfficeTelNum"><h4> ${UnivOfficeTelNum}</h4></span></td>
<td><h3>◦ Contact Email</h3><span id="UnivContactEmail"><h4> ${UnivContactEmail}</h4></span></td>
<td><h3>◦ Website</h3><span id="UnivWebsite"><h4> ${UnivWebsite}</h4></spanwebsite></td>
</tr>
</tbody>`
$('#message-box').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<div class="mytitle">
<img src="https://media.vlpt.us/images/waterlily_0101/post/02ff83ce-0474-4e0d-b886-69cf1b445588/FaceTheNew-TITLE-%EC%9B%90%EB%B3%B8-%EC%B5%9C%EC%A2%85.gif"
style="max-width:30%; height: auto;"
onclick="location.href='index.html'">
</div>
<div class="mybtn-group">
<button href="" class="mybtn-secondary hover1" onclick="location.href='facethenewintro.html'">FaceTheNew 소개</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='requireddocuments.html'">교환학생 지원 서류</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='searchuniv.html'">파견 대학 검색</button>
<button href="" class="mybtn-secondary hover1" onclick="location.href='lifehack.html'">교환학생 학교생활 Tip</button>
</div>
<h1 class="subtitle">◦ 파견 대학 검색</h1>
<div class="searchuniv" id="searchUniv" name="searchUniv" onkeyup="printSearchUniv()">
<span class="input-group-text" id="inputGroupPrepend">파견 대학 검색</span>
<select class="form-control-continent" id="formControlContinent" name="formControlContinent" onchange="searchuniv(this.value);" aria-describedby="inputGroupPrepend1" required>
<option name="selectOption1" value="" selected="selected">대륙</option>
<option name="selectOption1" value="asia" >아시아</option>
<option name="selectOption1" value="europe">유럽</option>
<option name="selectOption1" value="northamerica">북아메리카</option>
<option name="selectOption1" value="southamerica">남아메리카</option>
<option name="selectOption1" value="oceania">오세아니아</option>
<option name="selectOption1" value="africa">아프리카</option>
</select>
<select class="form-control-nation" id="formControlNation" name="formControlNation" aria-describedby="inputGroupPrepend2" required>
<option value="option2" selected>국가</option>
</select>
<select class="form-control-univ" id="formControlUniv" name="formControlUniv" aria-describedby="inputGroupPrepend2" required>
<option value="option3" selected>대학</option>
</select>
<button id="search_btn" type="button" title="검색" class="sch_smit" onclick="postSearchUniv()"></button>
</div>
<div class="univimage" id="UnivImage">
<img src="https://t4.ftcdn.net/jpg/02/87/59/67/240_F_287596718_0Y53hkbfo5wTYUg31Ogdqs93YRA1QDpG.jpg"
alt="univimage"
style="width: 1400px; height: 500px;">
</div>
<div id="SearchUnivResult" class="searchunivresult">
<table id="message-box">
<tbody id="messagebox1">
<tr>
<td><h3>◦ University Name</h3><span id="UnivName"><h4> 대학교 이름</h4></span></td>
</tr>
<tr>
<td><h3>◦ Location</h3><span id="UnivLocation"><h4> 대학교 위치</h4></span></td>
</tr>
<tr>
<td><h3>◦ Office Telephone Number</h3><span id="UnivOfficeTelNum"><h4> 대학교 전화번호</h4></span></td>
<td><h3>◦ Contact Email</h3><span id="UnivContactEmail"><h4> 대학교 이메일</h4></span></td>
<td><h3>◦ Website</h3><span id="UnivWebsite"><h4> 대학교 웹사이트</h4></spanwebsite></td>
</tr>
</tbody>
</table>
<div class="someinfo">
<p>학교 유형: <span style="color: white;">사립/공립</span>
<span>학교 규모: <span style="color: white;">S/M/L/XL</span></span>
<span>재적학생수: <span style="color: white;">00명</span></span>
<span>취업률: <span style="color: white;">00%</span></span>
<span>Exam Type: <span style="color: white;">TOEFL, IELTS</span></span>
<span>QS World University Ranking: <span style="color: white;">00등</span></span></p>
</div>
<div class="messagebox2" id="messagebox2">
<h3>◦ 학교 소개</h3>
<p>학교 소개입니다.</p><br/>
<h3>◦ 설치 학과</h3>
<p>설치 학과는 00입니다.</p><br/>
<h3>◦ Study Duration</h3>
<p>학기 기간입니다.</p><br/>
<h3>◦ Requirement</h3>
<h5>- GPA</h5>
<p>000</p>
<h5>- Language Proficiency:</h5>
<p>000</p>
</div>
</div>
</body>
</html>[To do list]
✅ '파견 대학' 부분 db 생성하기
✅ 동적 select box 코드 작성하기
✅ 동적 select box와 db 연결하기
✅ 서버 만들기
5. 교환학생 학교생활 Tip
[To do list]
✅ HTML 만들기
