728x90
반응형
Tab UI를 위한 기초 HTML과 CSS 공사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h2 {
text-align: center;
}
h2, h4 {
margin: 0px;
}
.tab {
width: 600px;
margin : 0px auto;
}
.tabmenu {
background-color: antiquewhite;
}
.tabmenu > div {
/* 간단한 것들은 float 대신 inline-block으로 충분 */
display: inline-block;
/* float: left; */
width: 145px;
margin: 0px;
text-align: center;
line-height: 50px;
cursor: pointer ;
}
.content {
padding: 5%;
background-color: bisque;
}
</style>
</head>
<body>
<h2> Tab UI Test</h2>
<div class="tab">
<div class="tabmenu">
<!-- nav, ul과 li 태그로도 가능 -->
<div>crong</div>
<div>pororo</div>
<div>koko</div>
<div>doto</div>
</div>
<section class="content">
<h4>hello jk</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus
magni eos expedita iure ducimus, neque sint?
</p>
</section>
</div>
</body>
</html>
자바스크립트로 탭 동작하기
추가하면 클릭한 탭이 무엇인지 출력됨
<script>
var tabmenu = document.querySelector(".tabmenu");
tabmenu.addEventListener("click", function(addEventListener){
console.log(evt.target);
//evt.target.innerText를 하면 태그 없이 탭 이름만 나옴
})
</script>
AJAX로 클릭한 순간 서버에서 데이터 가져오기
데이터
json.txt
[
{
"name" : "crong",
"favorites" : ["golf", "facebook"]
},
{
"name" : "pororo",
"favorites" : ["soccer", "apple"]
},
{
"name" : "koko",
"favorites" : ["game", "orange"]
},
{
"name" : "doto",
"favorites" : ["book", "youtube"]
}
]
서버
파이썬으로 로컬 서버 돌리는 법
https://developer.mozilla.org/ko/docs/Learn/Common_questions/set_up_a_local_testing_server
cmd에서
해당 파일들이 존재하는 폴더로 이동
파이썬 버전에 따라 아래 명령어 입력
# 위에서 반환된 파이썬 버전이 3.X인 경우
python -m http.server
# 위에서 반환된 파이썬 버전이 2.X인 경우
python -m SimpleHTTPServer
주소창에 localhost:8000을 치면 html 파일이 로드되어 나옴
Ajax
서버에서 데이터 가져와서 출력하기
function sendAjax(url, clickedName) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(){
// json.txt 파일
console.log(oReq.responseText);
});
// GET을 요청했을 때 일어날 일은, reqListener에 적어둠
oReq.open("GET", url);
oReq.send();
}
var tabmenu = document.querySelector(".tabmenu");
tabmenu.addEventListener("click", function(evt){
//console.log(evt.target);
sendAjax("./json.txt", evt.target.innerText);
});
HTML Template
아래 코드 추가하기
<script id="tabcontent" type="my-template">
<h4>hello {name}</h4>
<p>{favorites}</p>
</script>
받아온 데이터의 구조 살펴보기
function makeTemplate(data) {
var html = document.getElementById("tabcontent").innerHTML;
console.log(html, data);
}
function sendAjax(url, clickedName) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(){
// json.txt 파일
var data = JSON.parse(oReq.responseText);
makeTemplate(data);
});
// GET을 요청했을 때 일어날 일은, reqListener에 적어둠
oReq.open("GET", url);
oReq.send();
}
받아온 데이터를 HTML에 replace 하기
현재 누른 탭이 무엇인지 알기 위해
클릭한 시점에 실행되는 함수로부터 clickedName 받아오기
function makeTemplate(data, clickedName) {
var html = document.getElementById("tabcontent").innerHTML;
//console.log(html, data);
var resultHTML = "";
for (var i=0; i<data.length; i++){
if (data[i].name == clickedName) {
resultHTML = html.replace("{name}", data[i].name)
.replace("{favorites}", data[i].favorites.join(" "));
break;
}
}
document.querySelector(".content").innerHTML = resultHTML;
}
//~~~
tabmenu.addEventListener("click", function(evt){
//console.log(evt.target);
sendAjax("./json.txt", evt.target.innerText);
}); |
 |
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h2 {
text-align: center;
}
h2, h4 {
margin: 0px;
}
.tab {
width: 600px;
margin : 0px auto;
}
.tabmenu {
background-color: antiquewhite;
}
.tabmenu > div {
/* 간단한 것들은 float 대신 inline-block으로 충분 */
display: inline-block;
/* float: left; */
width: 145px;
margin: 0px;
text-align: center;
line-height: 50px;
cursor: pointer ;
}
.content {
padding: 5%;
background-color: bisque;
}
</style>
</head>
<body>
<h2> Tab UI Test</h2>
<div class="tab">
<div class="tabmenu">
<!-- nav, ul과 li 태그로도 가능 -->
<div>crong</div>
<div>pororo</div>
<div>koko</div>
<div>doto</div>
</div>
<section class="content">
<!-- 어떤 형식인지 정적으로 코딩해놓고 하면 수월함 -->
<!-- <h4>hello crong</h4> -->
<!-- <p>golf, facebook</p> -->
</section>
</div>
<script>
function makeTemplate(data, clickedName) {
var html = document.getElementById("tabcontent").innerHTML;
//console.log(html, data);
var resultHTML = "";
for (var i=0; i<data.length; i++){
if (data[i].name == clickedName) {
resultHTML = html.replace("{name}", data[i].name)
.replace("{favorites}", data[i].favorites.join(" "));
break;
}
}
document.querySelector(".content").innerHTML = resultHTML;
}
function sendAjax(url, clickedName) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(){
// json.txt 파일
var data = JSON.parse(oReq.responseText);
makeTemplate(data, clickedName);
});
// GET을 요청했을 때 일어날 일은, reqListener에 적어둠
oReq.open("GET", url);
oReq.send();
}
var tabmenu = document.querySelector(".tabmenu");
tabmenu.addEventListener("click", function(evt){
//console.log(evt.target);
sendAjax("./json.txt", evt.target.innerText);
});
</script>
<script id="tabcontent" type="my-template">
<h4>hello {name}</h4>
<p>{favorites}</p>
</script>
</body>
</html>728x90
반응형
'Web > Frontend' 카테고리의 다른 글
| [JS] 배열 메소드 (0) | 2021.07.01 |
|---|---|
| HTML Templating (0) | 2021.06.11 |
| [CSS] float (0) | 2021.05.27 |
| Event Delegtion - 등록, 버블링, 멈추기 (0) | 2021.05.25 |
| 디렉토리 구성 방식 - JS&CSS (0) | 2021.05.24 |