대한민국 구석구석 리뉴얼 팀 프로젝트
1.대한민국 구석구석 리뉴얼
1. 팀 프로젝트 소개 대한민국 구석구석이라는 웹 사이트의 리뉴얼을 진행했다. 현재 이 웹 사이트는 리뉴얼 돼있는 상태이고, 이전 버전의 웹 사이트를 우리 조는 리뉴얼 하기로 결정했다. 아래 사진은 이 웹 사이트가 리뉴얼되기 전 우리 조가 리뉴얼하기로 결정했던 웹
2.전환 애니메이션 없는 간단한 슬라이더 구현하기
해당 기능이 있는 페이지 : 메인 페이지(https://musical-sable-320463.netlify.app/
3.로딩 화면 구현하기
확인할 수 있는 페이지 : 추천 코스 페이지기존에는 svg로 만드려고 했지만 회전하는 애니메이션이 예상과는 다르게 동작하여 div 태그로 구현했다.레이아웃을 담당하는 CSS, 요소를 담당하는 CSS, Modifier를 담당하는 CSS로 나눠서 작성하였다.로딩화면을 뷰포
4.Tour API를 연동하여 추천 코스 필터/검색하기
해당 기능이 있는 페이지 : 추천 코스 1. Tour API란? 한국관광공사에서 정부에서 수집한 여행 관련 정보를 제공하는 API이다. 관광지, 문화시설, 축제공연행사, 여행 코스 등 다양한 정보를 제공한다. 1-1. Tour API 사용 방법 출처 Tour A
5.페이지네이션
해당 기능이 있는 페이지 : 추천 코스 1. HTML 코드 버튼 요소의 Container를 담당하는 영역에 coursepagewrap 클래스를 적용하고, 버튼의 Element에 해당하는 영역에 coursepageContentbox 클래스를 부여한다. 2. 자바스크립트 코드 기본적인 개념은 다음과 같다. 현재 페이지, 한 페이지 당 총 컨텐츠의 개수...
6.Masonary 라이브러리
해당 기능이 있는 페이지 : 프로계획러 사용자가 직접 만든 풀코스 여행 1. Masonary 라이브러리란? 출처 : Masonary 공식 웹사이트 자바스크립트 grid 라이브러리로, 각 컨텐츠의 높이 값마다 벽돌을 쌓듯이 자동으로 수직 배치해준다. 이를 이용하면 다음과 같이 요소들을 배치할 수 있다. 1-1. Maso
7.백엔드 API 없이 필터 기능 구현하기
기능을 볼 수 있는 페이지 : 프로계획러 사용자가 직접 만든 풀코스 여행 1. 비동기식으로 데이터를 불러오기 위해 사용한 것 비동기 방식으로 데이터를 불러오기 위해 깃헙에 있는 저장공간을 사용했다. 깃헙에 모든 데이터를 담은 json 파일을 저장하고, 필터 기능이
8.지도 API 사용하기
사용한 기능이 있는 페이지 : 추천 코스 상세 페이지 1. 지도 API 세팅하기 출처 : 카카오 맵 API 공식 문서 사실 뭐 작성할 것도 없이 카카오 맵 API 공식 문서에 적혀진 내용 그대로하면 된다. 꼭 카카오 개발자 웹 사이트에 Web 부분에 자기가 배포