[프로젝트 회고] 꽃 쇼핑몰 페이지
💐 꽃 쇼핑몰 페이지
📝 과제 설명
- Vanila JavaScript로만 구현한 과제.
- 영상, 애니메이션, 팝업 등 다양한 기능을 구현할 수 있었던 과제.
⚙️ 기술 스택
- HTML5, SCSS, JavaScript
- Git & GitHub
💻 기능 구현
- 배너, 팝업 창
🗂 배너
- 홈페이지 하단 배너 좌, 우측 background-image를 넣어주고 마우스 hover 시
text는 움직이지 않고 background-image만 확대되는 기능을 구현.
<section id="banner-section">
<article class="left-banner">
<span class="banner-bg"></span>
<div class="banner-text">
<p class="banner-name">꾸까 브랜드 이야기</p>
<span class="banner-desc">
꽃으로 라이프스타일을 만들어가는 <br />
kukka의 문화를 소개해요.
</span>
<p class="banner-more">Brand story</p>
</div>
</article>
<article class="right-banner">
<span class="banner-bg"></span>
<div class="banner-text">
<button class="banner-name">꾸까 오프라인 쇼룸</button>
<span class="banner-desc">
꽃을 가까이서 만져보고 향기도 맡아보고, <br />
꽃 속에서 작은 휴식을 누릴 수 있는 kukka의 오프라인 쇼룸
</span>
<button class="banner-more">꾸까 쇼룸 안내</button>
</div>
</article>
</section>
- SCSS를 통해서 아래와 같은 bgPosition의 이름으로 이미지의 형태를 잡아준 상태로 banner.scss로 import해서 사용했다.
@mixin bgPosition($position, $url) {
background-size: cover;
background-position: $position;
background-repeat: no-repeat;
background-image: url($url);
}
🔐 팝업 창
- 렌더링 시 팝업 창을 맨 앞에 띄워 닫기 혹은 오늘은 더 이상 보지 않기 체크 + 닫기
를 사용하여 쿠키 값 저장 여부에 따라 재표시 및 안보이는 기능 구현.
document.addEventListener('DOMContentLoaded', function () {
checkCookie();
}); // 화면을 불러올 때 checkCookie 함수를 실행시킨다.
- 쿠키에 값이 들어가 있으면 리렌더링 시 display를 'none' 해주며
아닐 시에는 'block'을 통해서 화면에 팝업 창을 계속 표시한다.
function checkCookie() {
if (getCookie('maindiv') == 'done') {
document.getElementById('modal').style.display = 'none';
} else {
document.getElementById('modal').style.display = 'block';
}
}
- X표시 눌렀을 때의 함수, 쿠기에 저장하고, 가져오는 함수를 통해서 기능 구현.
function closeWin() {
if (document.getElementById('popup_close_check').checked) {
setCookie('maindiv', 'done', 1);
}
document.getElementById('modal').style.display = 'none';
}
function setCookie(name, value, expiredays) {
const todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie =
name +
'=' +
escape(value) +
'; path=/; expires=' +
todayDate.toGMTString() +
';';
}
function getCookie(name) {
const nameOfCookie = name + '=';
let x = 0;
while (x <= document.cookie.length) {
const y = x + nameOfCookie.length;
let endOfCookie = '';
if (document.cookie.substring(x, y) == nameOfCookie) {
if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
endOfCookie = document.cookie.length;
return unescape(document.cookie.substring(y, endOfCookie));
}
x = document.cookie.indexOf(' ', x) + 1;
if (x == 0) break;
}
return '';
}
🌅 최종 구현
Vanila JavaScript로만 프로젝트를 구현하는 것은 이번 온보딩 과제에서 처음이자 마지막이었다.
스스로에게 지금의 공부방향에 대해서 정확하게 다시 되물어보고 생각해볼수있는 시간이었다.
프론트엔드 기술의 가장 기본이 되는 JavaScript에 대해서 안일한 생각을 하고 있었던 것 같다.
눈 앞의 React에만 집중을 했었는데, 기본기에 조금 더 집중을 해야겠다는 것을 느낄 수 있었던 프로젝트였다.🖋
Author And Source
이 문제에 관하여([프로젝트 회고] 꽃 쇼핑몰 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@changh950/프로젝트-회고-꽃-쇼핑몰-페이지
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 배너, 팝업 창
text는 움직이지 않고 background-image만 확대되는 기능을 구현.
<section id="banner-section">
<article class="left-banner">
<span class="banner-bg"></span>
<div class="banner-text">
<p class="banner-name">꾸까 브랜드 이야기</p>
<span class="banner-desc">
꽃으로 라이프스타일을 만들어가는 <br />
kukka의 문화를 소개해요.
</span>
<p class="banner-more">Brand story</p>
</div>
</article>
<article class="right-banner">
<span class="banner-bg"></span>
<div class="banner-text">
<button class="banner-name">꾸까 오프라인 쇼룸</button>
<span class="banner-desc">
꽃을 가까이서 만져보고 향기도 맡아보고, <br />
꽃 속에서 작은 휴식을 누릴 수 있는 kukka의 오프라인 쇼룸
</span>
<button class="banner-more">꾸까 쇼룸 안내</button>
</div>
</article>
</section>
@mixin bgPosition($position, $url) {
background-size: cover;
background-position: $position;
background-repeat: no-repeat;
background-image: url($url);
}
를 사용하여 쿠키 값 저장 여부에 따라 재표시 및 안보이는 기능 구현.
document.addEventListener('DOMContentLoaded', function () {
checkCookie();
}); // 화면을 불러올 때 checkCookie 함수를 실행시킨다.
아닐 시에는 'block'을 통해서 화면에 팝업 창을 계속 표시한다.
function checkCookie() {
if (getCookie('maindiv') == 'done') {
document.getElementById('modal').style.display = 'none';
} else {
document.getElementById('modal').style.display = 'block';
}
}
function closeWin() {
if (document.getElementById('popup_close_check').checked) {
setCookie('maindiv', 'done', 1);
}
document.getElementById('modal').style.display = 'none';
}
function setCookie(name, value, expiredays) {
const todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie =
name +
'=' +
escape(value) +
'; path=/; expires=' +
todayDate.toGMTString() +
';';
}
function getCookie(name) {
const nameOfCookie = name + '=';
let x = 0;
while (x <= document.cookie.length) {
const y = x + nameOfCookie.length;
let endOfCookie = '';
if (document.cookie.substring(x, y) == nameOfCookie) {
if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
endOfCookie = document.cookie.length;
return unescape(document.cookie.substring(y, endOfCookie));
}
x = document.cookie.indexOf(' ', x) + 1;
if (x == 0) break;
}
return '';
}
Vanila JavaScript로만 프로젝트를 구현하는 것은 이번 온보딩 과제에서 처음이자 마지막이었다.
스스로에게 지금의 공부방향에 대해서 정확하게 다시 되물어보고 생각해볼수있는 시간이었다.
프론트엔드 기술의 가장 기본이 되는 JavaScript에 대해서 안일한 생각을 하고 있었던 것 같다.
눈 앞의 React에만 집중을 했었는데, 기본기에 조금 더 집중을 해야겠다는 것을 느낄 수 있었던 프로젝트였다.🖋
Author And Source
이 문제에 관하여([프로젝트 회고] 꽃 쇼핑몰 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@changh950/프로젝트-회고-꽃-쇼핑몰-페이지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)