728x90
여기 칸칸이에 사진 띄울 예정.
우선 html 최하단에 script 태그를 열어서
console 창에 잘 실행되는 지 강의들었던 예시 갖고와서 확인.
콘솔창에 잘 갖고와지는 거 확인되면
내 데이터 갖고올 준비하기.
https://kku-git.github.io/Mcdonald_menu/product.json
<script>
$.get("https://kku-git.github.io/Mcdonald_menu/product.json").done(
function (data) {
console.log(data);
}
);
</script>
내 데이터 넣어서 잘 나오나 확인.
HTML
<!-- 정사각형 -->
<div class="square-flex">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<button id="more"></button>
CSS
/* 정사각형 */
.square {
width: 375px;
height: 375px;
border: 1px solid $main_color;
margin: 20px;
}
.square-flex {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#more {
width: 50px; /* 버튼의 너비 */
height: 50px; /* 버튼의 높이 */
background-image: url(img/plus.svg);
background-color: transparent;
border: none;
outline: none;
background-repeat: no-repeat;
background-size: contain;
display: block; // 이걸 해줘야 버튼이 중앙으로 감.
margin: auto;
margin-bottom: 13px;
}
하단에 버튼 달아줌.
버튼 누르면 넣어놨던 배열 뜨는거 확인 가능.
데이터의 시작점 - array
그 안 - object 데이터 9개
우선 대충 만든 square 을 수정해줘야할 거 같음.
이렇게 네모 칸 안에 쏙 넣게 하기 위해서 css 조정.
HTML 에다가 img 태그 추가해줌.
<div class="square-flex">
<div class="square">
<img src="img/banner1.jpg" alt="" />
</div>
<div class="square"></div>
<div class="square"></div>
</div>
<button id="more"></button>
그리고 CSS 에서 img 에 width 와 height 를 부여해서 쏙 들어가게 하기
.square {
width: 375px;
height: 375px;
border: 1px solid $main_color;
margin: 20px;
img {
width: 100%;
height: 100%;
}
}
이렇게 제목 가격 뜨게 html 하고 css 조정
<!-- 정사각형 -->
<div class="square-flex">
<div class="square">
<div class="overlay-wrap">
<div class="overlay">
<p>제목</p>
<p>가격</p>
</div>
</div>
<img src="img/banner1.jpg" />
</div>
</div>
/* 정사각형 */
.square-flex {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.square {
position: relative;
width: 375px;
height: 375px;
border: 1px solid $main_color;
margin: 20px;
img {
width: 100%;
height: 100%;
}
}
.overlay-wrap {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
.overlay {
color: white;
}
}
}
Script 로 html 생성
[JS] 자바스크립트로 html 태그 생성 (tistory.com)
이거 참고해서 script 수정해주기
html 생성하는 법 (2) 에서 append 를 사용했다.
$("#more").click(function () {
$.get("https://kku-git.github.io/Mcdonald_menu/product.json").done(
function (data) {
data.forEach((a, i) => {
var 템플릿 = `
<div class="square">
<div class="overlay-wrap">
<div class="overlay">
<p>${a.title}</p>
<p>${a.price}</p>
</div>
</div>
<img src="img/banner1.jpg" />
</div>
`;
$(".square-flex").append(템플릿);
});
}
);
});
square 태그 갖고와서
forEach( array 배열일때만 사용) 문 사용해서 데이터를 갖고와줬다.
고쳐야할 점
누르면 한꺼번에 와다다 나옴. 그리고 버튼 누르면 누를 수록 계속 나온다.
이 부분은 두 번째 글에서 다시 다루도록 할 예정
+ 사진도 수정해서 글 올릴 것
728x90
'> 포트폴리오 > 맥도날드' 카테고리의 다른 글
[CSS] 이미지 수정하기 ( object-fit: cover; ) (0) | 2024.08.26 |
---|---|
[CSS] 검색창 만들기 (4) | 2024.08.26 |
[깃] 맥도날드 데이터 깃허브에 넣기 (0) | 2024.08.24 |
[SCSS] scss 수정 및 캐러셀 수정 (0) | 2024.08.24 |
[SCSS] 맥도날드 css 에서 scss 로 수정 (0) | 2024.08.20 |