실시간 환율을 페이지가 떳을 때 자동으로 바뀌는 동작을 해보았다.
ajax와 jquery를 활용하여 작성하였다.
지난번 단일품 판매 페이지와 동일하지만 중간에 환율이 실시간으로 들어가는 것을 볼 수 있다.
스파트라에서 제공하는 해답과는 다른 방식으로 풀어버렸다 (제공한 방식히 훨씬 더 나아보이긴 한다)
그래서 이렇게 기록해본다.
스파르타에서 진행한 방식은
.text를 활용해서 텍스트를 변경하는 방식이었고
p태그 안에서 span태그를 활용하였다.
나는 temp_html을 만들어서 .append를 활용해 P테그 자체를 넣어주었다.
아마도 가장 최근에 했던 방식을 그대로 유지하다보니 이런 방식으로 접근을 하게 된 것 같다.
다음번엔 나도 .text를 활용 할 수 있으면 좋겠다~
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Stylish', sans-serif;
}
.wrap {
width: 900px;
margin: auto;
}
.comment {
color: blue;
font-weight: bold;
}
.posting-box {
width: 500px;
margin: 30px auto;
padding: 30px;
border: 3px solid;
border-radius: 5px;
display: none;
}
.card-columns {
width: 900px;
margin: auto;
}
</style>
<script>
function openclose() {
let status = $('#post-box').css('display')
if (status == 'block') {
$('#post-box').hide()
$('#btn-posting-box').text('포스팅박스 열기')
} else {
$('#post-box').show()
$('#btn-posting-box').text('포스팅박스 닫기')
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
<p class="lead">
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="posting-box" id="post-box">
<div class="form-group">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">기사저장</button>
</div>
</div>
<div class="card-columns" id="cards-box">
<div class="card">
<img class="card-img-top"
src="https://post-phinf.pstatic.net/MjAxNzA0MjVfMjM3/MDAxNDkzMDg5MzE2NTUx.C7U72dMPF0FVHNBkegsCEusX2JgyB3xzYoIm5Ub2nPUg.AXnGdKQ4bjIADxSXh4hZCnjlmefNtkGKRLNuol2VZawg.JPEG/%EB%A1%9C%EB%A7%88.JPG?type=w1200"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/"> 여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://post-phinf.pstatic.net/MjAxNzA0MjVfMjM3/MDAxNDkzMDg5MzE2NTUx.C7U72dMPF0FVHNBkegsCEusX2JgyB3xzYoIm5Ub2nPUg.AXnGdKQ4bjIADxSXh4hZCnjlmefNtkGKRLNuol2VZawg.JPEG/%EB%A1%9C%EB%A7%88.JPG?type=w1200"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/"> 여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://post-phinf.pstatic.net/MjAxNzA0MjVfMjM3/MDAxNDkzMDg5MzE2NTUx.C7U72dMPF0FVHNBkegsCEusX2JgyB3xzYoIm5Ub2nPUg.AXnGdKQ4bjIADxSXh4hZCnjlmefNtkGKRLNuol2VZawg.JPEG/%EB%A1%9C%EB%A7%88.JPG?type=w1200"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/"> 여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://post-phinf.pstatic.net/MjAxNzA0MjVfMjM3/MDAxNDkzMDg5MzE2NTUx.C7U72dMPF0FVHNBkegsCEusX2JgyB3xzYoIm5Ub2nPUg.AXnGdKQ4bjIADxSXh4hZCnjlmefNtkGKRLNuol2VZawg.JPEG/%EB%A1%9C%EB%A7%88.JPG?type=w1200"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/"> 여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://post-phinf.pstatic.net/MjAxNzA0MjVfMjM3/MDAxNDkzMDg5MzE2NTUx.C7U72dMPF0FVHNBkegsCEusX2JgyB3xzYoIm5Ub2nPUg.AXnGdKQ4bjIADxSXh4hZCnjlmefNtkGKRLNuol2VZawg.JPEG/%EB%A1%9C%EB%A7%88.JPG?type=w1200"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/"> 여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://post-phinf.pstatic.net/MjAxNzA0MjVfMjM3/MDAxNDkzMDg5MzE2NTUx.C7U72dMPF0FVHNBkegsCEusX2JgyB3xzYoIm5Ub2nPUg.AXnGdKQ4bjIADxSXh4hZCnjlmefNtkGKRLNuol2VZawg.JPEG/%EB%A1%9C%EB%A7%88.JPG?type=w1200"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/"> 여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>'개발일지' 카테고리의 다른 글
| 나홀로 쇼핑몰(스파르타) (0) | 2022.05.14 |
|---|---|
| 지니뮤직 크롤링 (0) | 2022.05.11 |
| 단일품 판매 웹페이지(스파르타) (0) | 2022.05.05 |
| GUI 텍스트 위젯 (0) | 2022.04.28 |
| GUI 엔트리 위젯 (0) | 2022.04.28 |