[클론프로젝트] 스타벅스코리아 4일차
API 끌어다 쓴 링크
오늘은 Footer와 홈페이지의 맨 위로 이동하는 버튼을 추가하고 어제 배운 CSS의 Rotate를 활용하여 아주 소소한 나만의 기능을 만들어보았다.
특히, 홈페이지의 맨 위로 이동하는 버튼을 작동시키기 위해서는 ScrollToPlugin이 필요하며, html에 넣을 코드가 있는 링크는 위의 링크에다가 올려두었다.
항상 주의할 점은 위의 import하는 코드는 항상 main.js를 불러오기 전에, 즉 HTML파일에서 main.js코드가 있는 지점보다 위에 두어야 한다는 것이다.
겪어본 오류들
이번에는 크게 오류를 겪지는 않았던 것 같다.
아래와 같이 반복되는 실수들
- div 등 선택자와 클래스의 배치
- CSS에서 선택자 앞에는 . 붙이면 안됨.
ex)
.footer .btn {
바르지 못한 예시
}
footer .btn {
올바른 예시
}
충분히 반복적으로 하는 실수가 나왔었다.
물론 겪어보거나 배운 내용에서 나온 실수이기 때문에 빠르게 원인을 찾아서 해결할 수 있었다.
이것도 계속 코딩하다보면 고쳐질 오류라고 믿는다.
소소한 나만의 기능 만들어보기 (프로모션 토글 버튼).
이 프로젝트는 사실 남이 만든 코드를 그대로 따라 작성해보는 클론 프로젝트였다.
하지만 이대로 끝내면 섭하다. 응용을 한번 해봐야지
프로모션 토글이 열려있는 상태에서 커서를 올리지 않으면 위와 같은 상태이고,
프로모션 토글이 열려있는 상태에서 커서를 올리면 위와 같이 변한다.
반대로 프로모션 토글이 닫혀있는 상태에서 커서를 올리지 않으면 위와 같이 나타나고.
반대로 프로모션 토글이 닫혀있는 상태에서 커서를 올리면 위와 같이 변한다.
구현 코드
# HTML 코드
<section class="notice">
<div class="notice-line">
<div class="bg-left"></div>
<div class="bg-right"></div>
<div class="inner">
<div class="inner__right">
<h2>스타벅스 프로모션</h2>
<div class="toggle-promotion" onclick="promotion_change()">
<div class="material-icons">download</div>
</div>
</div>
</div>
</div>
</section>
# CSS 코드
.notice-line .inner__right .toggle-promotion {
transform: rotateX(0deg);
}
.notice-line .inner__right .toggle-promotion:hover {
transform: rotateX(180deg);
}
.notice-line .inner__right .toggle-promotion.hide {
transform: rotateX(0deg);
}
.notice-line .inner__right .toggle-promotion.hide:hover {
transform: rotateX(180deg);
}
# JS 코드
let is_promotion_hidden = false;
let promotion_change = function () {
let toggle_button_up_down = document.querySelector('.toggle-promotion .material-icons') // 상태별 버튼의 방향을 바꾸기 위함.
is_promotion_hidden = !is_promotion_hidden;
// 값이 반대가 되게 해라, 즉 지금 상태에선 False에서 True로 바꾸어라.
if (is_promotion_hidden) {
// true : 숨김 처리
promotion_toggle_button.classList.add('.hide');
toggle_button_up_down.innerHTML='upload';
} else {
// false : 숨김 해제
promotion_toggle_button.classList.remove('.hide');
toggle_button_up_down.innerHTML='download';
}
};
소스 코드는 위와 같다.
CSS코드가 없으면 딱딱하게 회전효과 없이 바뀌고, CSS를 통해서 부드럽게 회전하는 애니메이션효과를 넣어줄 수 있다. transform이다.
우선 페이지 자체를 만드는 작업은 모두 끝이 났다.
하지만 개발은 만든다고 끝나는 것이 아니라, 유지보수까지 해야한다. 만약에 변경하거나 유지보수 할 일이 생겼다면 일지에 계속 기록될 것이다.
강의를 진행해주시고 필요자료를 제공해주신 박영웅님께 감사드립니다.
