[Project] 패스트 캠퍼스 수업 : : 스타벅스 예제 회고록

 

🌈 HTML, CSS, JS로 만드는 간단한 클론코딩 예제

 

HTML,CSS에 대한 기초 수업을 들으며 그동안 공부했던 웹기초를 다시 복습했다.
기존에 ssafy 수업에서는 빠르게 넘어간 부분이기도 하고,
웹의 기초인데 공부가 부족했다는 느낌이 들어서 꼼꼼히 다시 복습했다.

 

HTML과 CSS,JS를 연결하고 색상,위치조정등을 Bootstrap이나 Vuetify를 사용하지 않고,
조금 원시적인지만 하나씩 채워나가다 보니 기존에 사용했던 패키지들이 어떻게 작동하고 있었는지
왜 그러한 코드들이 필요했는지에 대한 이해가 되기도 하였다.

 

 

 

---

☕️ 다양한 반응형 효과들이 들어간 스타벅스 홈페이지

 

 

스타벅스 메인 홈페이지

 

처음 완성된 예시 화면을 보았을 때는 bootstrap의 nav, parallax 등과 같은 컴포넌트들이
생각이 나서 과연 저런 패키지들을 사용하지 않고 CSS, JS만으로 가능할까? 라는 생각이 들었다.

하지만 정말 생각보다 내부가 어려울 것 같았던 기능들이 몇가지 기본원리에 의해 구현되는 것에
정말 그동안 웹의 기초가 부족했다는 것을 느낄 수 있었다.

 

 

스타벅스 메인 홈페이지

 

https://fervent-kare-aede77.netlify.app/

스타벅스 커피 코리아

 

 

 

 

 

 

---

🍒 CSS 다시 돌아보기

 

CSS 중에서 무릎을 탁 치게 만들었던 주요 내용들이 몇가지 있었다.

 

가상클래스, 가상요소 활용

• :hover, :active, :focus
• :first-child, :last-child, :nth-child(n), :not(XYZ)
• ::before, ::after

 

 

요소 쌓임 순서, z-index 활용

 

Notion

 

 

transition, transform 활용

• Easing 함수 치트 시트
  https://easings.net/ko

Easing Functions Cheat Sheet

• CSS 트랜지션 사용하기
  https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN

• tweenmax easing
  https://greensock.com/docs/v2/Easing

Docs

 

 

 

Notion

Notion

 

 

 

 

---

🍋 JS 다시 돌아보기

 

JavaScript에서는 DOM API, 메소드 체이닝등의 내용들에 더해서 gsap 활용이 매우 흥미로웠다.

 

gsap

https://cdnjs.com/libraries/gsap

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

https://greensock.com/docs/v3/GSAP

Docs

 

 

 

 

 

---

📚 예제 관련 여러가지 라이브러리 및 관련지식들

 

오픈 그래프 (The Open Graph protocol)

• 카톡이나 메신저로 url을 보낼 때 메타데이터를 기반으로 생성되는
• 오픈그래프를 직접 만들어보는 것이 재미있었던 기억이 난다.
• 이와 같은 작업으로 얻을 수 있는 효과는 => 'SEO(검색엔진 최적화)'

https://ogp.me/

Open Graph protocol

 

 

트워터 카드 (Twitter Card)

https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

Getting started with Cards

 

 

 

 

 

Google Font, Material Icons 활용

https://fonts.google.com/

Google Fonts

https://material.io/design/iconography/system-icons.html#design-principles

Material Design

https://material.io/develop/web/getting-started

Material Design

 

• Header에 태그 삽입

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 

 

BEM(Block Element Modifier)

• HTML 클래스 속성의 작명법
• 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시
• 요소—상태 : Hyphen(Dash) 기호로 요소의 상태를 표시
• 직관적으로 알 수 있고, 명확히 그 부분을 찾아낼 때 용이.

 

 

Lodash

• cdn

https://cdnjs.com/libraries/lodash.js

lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

• 공식문서

https://lodash.com/

Lodash

 

 

Swiper JS

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

 

 

Youtube iframe API

• Youtube 영상은 크롬 브라우저 문제로 아직 화면에 띄우지는 못했다..(숙제추가)
• 공식문서

https://developers.google.com/youtube/iframe_api_reference?hl=ko 

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API

 

• 지원되는 매개변수

https://developers.google.com/youtube/player_parameters.html?playerVersion=HTML5&hl=ko#Parameters 

YouTube 내장 플레이어 및 플레이어 매개변수  |  YouTube IFrame Player API

 

 

랜덤한 숫자를 생성하는 함수

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  // `.toFixed()`를 통해 반환된 문자 데이터를,
  // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}

 

 

ScrollMagic

https://cdnjs.com/libraries/ScrollMagic

ScrollMagic - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

 

HTML 특수기호

https://dev.w3.org/html5/html-author/charref

Character Entity Reference Chart

 

 

 

---

✍🏻 마무리

 

단순 HTML, CSS, JS로 간단한 웹사이트를 만들어 보면서 여러가지 웹의 기초를 복습하고 나니,
웹 프로그래밍의 기초를 다진 느낌이 들었고, 왜 다양한 패키지나 프레임워크들이 생겨났는 지 알 것 같았다.

특히 CSS를 작성할 때 반복되는 코드들을 작성하면서 Sass나 Bootstrap의 필요성을 느꼈다.

 

 

불편1. 사용할 버튼(btn)을 하나씩 만들어 사용

 

불편2. 태그 내 요소에 접근하기 위해 반복작성되는 부모태그들

 

 

• 현재는 Vue.js를 활용한 웹사이트 학습을 하고 있는데,
• 최대한 빠르게 react까지 공부해서 이번달 안에 회고록을 남겨보고 싶다!

 

Web 지식

차곡차곡

쌓는 중 :)

 

 

 

 

 

---

😺 완성된 스타벅스 예제 github 주소

 

https://github.com/toproot/my-Starbucks

toproot/my-Starbucks

 

• 배포 URL (netlify)

https://fervent-kare-aede77.netlify.app/

스타벅스 커피 코리아

 

 

 

 

---

Netlify 배포 방법이 궁금하다면?

 

https://toproot.tistory.com/26?category=462528 

Netlify - Github를 이용한 웹 프로젝트 배포 방법