평소 흠모하던(?) 서비스인 토스랩의 협업툴 잔디를 frontEnd 입장에서 클론 프로젝트로 따라해 보려고 한다. 첫번째로 한 일은 메인 페이지의 레이아웃 구성을 분석하고 그려봤다. 구획이 여러개 나뉘어 있어 복잡한 느낌을 주는데 그려보니 단순하다. 기본 3bay 구성이다.
구획별로 보자면
1) 제일 좌측 파란색 영역은 반응형 처리가 되어 있다. 브라우저 사이즈가 작아지면 간격이 좁아진다.
2) 좌측 노란색 영역은 아코디언 메뉴로 클릭 유무에 따라 보여진다.
3) 제일 우측의 녹색 영역은 fixed 영역이다. 사이즈가 고정된채 유지된다.
4) 중앙의 빨간색 메인 영역은 브라우저 사이즈에 따라 조정된다.
레이아웃을 구성하려면 좌측은 미디어 쿼리로 사이즈에 따라 변화를 주면 되고 우측은 fixed 처리. 좌우를 채우고 남은 영역에 중앙 영역을 할당하면 될 것 같다.
수정) 제일 우측 녹색영역은 position: absolute, z-index로 center 위에 떠 있는 형태이다.
