자바스크립트 강의
스크롤 위치에 따라 변하는 애니메이션 강의부터 보면 된다.
jQuery / ajax 데이터 받아와서 화면에 표시하기
데이터 형태
- js의 object형태와 비슷
{"brand" : "Hyundai", "model" : "Kona", "price" : 30000, "img" : "https://codingapple1.github.io/kona.jpg"}전체 코드
//bootstrap card참고
<div class="card">
<img src="..." class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>//버튼 클릭시, 데이터 받아오고, 화면에 표시
$(".show-product-btn").on("click", function () {
$.ajax({
url: "https://codingapple1.github.io/data.json",
type: "GET",
}).done(function (e) {
$(".card-title").html(e.model);
$(".card-text").html(e.price);
$(".card-img-top").attr("src", e.img);
});
});데이터 받아오기
$.ajax({
url: "https://codingapple1.github.io/data.json",
type: "GET",
})데이터를 화면에 보이게 하기
- 데이터가 자바스크립트의
객체형태로 저장되어있다.- 데이터를
e.model객체 형태로 써야 한다.
- 데이터를
.done(function (e) {
$(".card-title").html(e.model);
$(".card-text").html(e.price);
$(".card-img-top").attr("src", e.img);
});UI / 프론트엔드 해야하는 일
UI만들기
- 만들고, 숨겨서 나타나게 한다.
- 동적 html 생성
상품명, 가격, 이미지등 정보
ajax이용하여 데이터를 요청하여 받아온다- 받아온 데이터를 화면에 보이게 한다.
css / position: sticky;
설명 : 스크롤을 내릴때, 아래로 내려가던 이미지가 일정 위치에서 멈춘다.
css코드
- 이미지가 top: 150px;인 지점에서 이미지가 멈춘다.
- 부모 div가 다 올라가서 화면에서 사라지면, 자식인 이미지도 같이 올라간다.
.image {
position: sticky;
top: 150px;
}html코드
<body style="background-color: grey; height: 3000px">
<div class="grey"> //부모div
<div class="image"> //이미지 담는 div
<img src="img/cat.jpg" width="100%" /> //이미지
</div>
</div>
</body>UI / 애플 UI 만들기 / 스크롤 내릴 때, 왼쪽 글은 올라가고, 이미지는 멈춰있는 UI만들기
html 코드
- body
- 부모 div
- 이미지
- text
- 부모 div
<body style="background-color: grey; height: 3000px">
<div class="grey">
<div class="image">
<img src="img/cat.jpg" width="100%" />
</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam id ad
voluptatum ratione quis doloremque? Rem, provident, modi minima odit
repudiandae explicabo magni consequuntur cum odio cupiditate labore
dolorem iste!
</div>
<div class="text" style="margin-top: 300px">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam id ad
voluptatum ratione quis doloremque? Rem, provident, modi minima odit
repudiandae explicabo magni consequuntur cum odio cupiditate labore
dolorem iste!
</div>
</div>
</body>css
float: right;- 이미지 박스에 설정하여, 이미지를 오른쪽에 배치
float: left;- text 박스에 설정하여, text를 왼쪽에 배치
position: sticky;top: 150px;- 이미지가 top: 150px;에서 멈추고, 부모 div가 거의 다 올라가면, 자식인 이미지도 같이 올라간다.
.grey {
background-color: lightgrey;
margin-top: 500px;
height: 2000px;
}
.image {
float: right;
width: 400px;
position: sticky;
top: 150px;
}
.text {
float: left;
width: 300px;
}
dev