[팀플 - Travel Jeju] 4th course - Travel Course UI

[ 오늘 할 일 ]

• 여행경로 찾기 기능을 구현하기 위해서 UI부터 구성 
• 기능 추가할 것 정리 
• 팀원 전체 회의 

[ 전체적인 흐름 ]

• 화면단에서 세개의 bar (navbar / left-sidebar / right-sidebar)를 나눈다
• 메인에 지도를 넣고 나머지 3개의 bar UI 구성 

---

첫 번째 과정으로는 큰 틀을 3개의 bar와 메인(지도 삽입 부분)으로 구성하였다 

 

아직 데이터를 가져오는 코드들은 구상하지 못하였고,

css만 이용해서 아래 이미지와 같이 UI를 구성하였다 

 

왼쪽, 오른쪽 사이드바에만 스크롤을 넣어야 하는데 

(카드가 많아졌을 때 지도는 스크롤되면 안 되기 때문에 해당 부분에서만 스크롤이 되어야 한다 )

 

overflow-y 속성에 scroll 값을 주고,

높이를 결정하면 해당 부분에만 스크롤이 생성된다 

그리고 날씨 같은 경우에는, 현재는 의미 없는 이미지로 대체하였는데 

후에는   같은 코드들을 다 제거하고 테이블 형식으로 구성할 예정이며

날씨는 크롤링해와서 주기적으로 값을 바꿔줄 예정이다 

오늘은 전체적으로 UI 디자인 부분만 신경써서 만들어서 코드 설명할 것은 거의 없는 것 같다