패캠 예제-★다방 랜딩페이지(HTML,CSS,JS)

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. head tag를 작성하며 알게 된 오픈그래프, Google Font, Google Material Icon에 대해 적어보자

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 본격적으로 시작하기 전에 웹페이지가 어떻게 구성되어 있는지 알아보았다

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지의 CSS 부분(main.css)의 코드를 review해보자

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 서치영역을 만들었다. 아이콘을 삽입하고 JS 코드를 작성해서 서치영역이 동작하도록 하였다

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지 헤더영역의 드롭다운 메뉴(메인메뉴)에 대한 코드(HTML, CSS)를 review해보자

별다방 랜딩페이지를 만들면서 배우게된 BEM에 대해 적어보자

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 옆의 배너(배지)를 만들었다. 스크롤을 내리면 배너가 사라지는 효과를 줬다

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지 SECTION1의 코드(HTML, CSS, JS)를 review해보자

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지 SECTION1에서 공지사항과 관련된 코드(HTML, CSS, JS)를 review해보자

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 슬라이드를 만들 수 있는 Swiper에 대해 배웠다! 수직 슬라이드도 만들었다

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 슬라이드 요소를 가운데에 배치하고 활성화된 요소만 불투명하게 보이도록 하는 방법에 대해 배웠다!

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 이미지를 가로로 슬라이딩하는 방법과 슬라이딩 페이지 관련 요소를 삽입하는 방법을 배웠다

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 슬라이드 영역의 토글버튼을 만드는 방법을 배웠다!

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 리워즈를 넣으면서 배운 "버튼그룹", "버튼"과 관련된 부분을 알아보자

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. YOUTUBE 영상을 배경으로 넣는 방법을 배웠다

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. YOUTUBE 영상 위에 요소 3개를 위아래로 반복적으로 떠다니는 애니메이션 적용방법을 배웠다

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 섹션 3개를 작성하면서 배운 내용들을 적어본다.

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. rotateY 변환함수를 이용하여 3D 애니메이션을 구현해보았다.

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. Swiper 라이브러리를 이용해서 만든 다중요소 슬라이드에 대해 적어본다.

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 웹페이지의 하단 요소인 Footer를 작성하며 배운 내용들을 적어본다.

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 버튼을 누르면 페이지 상단으로 이동하는 "ScrollTo"에 대해서 적어본다

패스트캠퍼스 온라인 강의를 통해 만든 ★다방 웹사이트에 대한 회고를 적어보자