웹 개발(2) - 기본 레이아웃 잡기

출처 : https://demo.dashboardpack.com/hospital-html/index.html

우선은 기본적으로 참고할 레이아웃이 필요하다. 본인은 위의 레이아웃을 참조하여 구조를 짜려고 한다.

 

따라서 기본적으로 틀은

왼쪽의 사이드 바, 오른쪽의 콘텐츠로 나뉘게 된다.

 

따라서 index.tsx 파일을 초기에 아래와 같이 작성하였다.

아래는 컴포넌트 별 구성이다.

sidebar.tsx

Content_box.tsx

Section.tsx

초기 레이아웃 잡기

위의 사진 처럼 레이아웃을 잡는데에는  Grid를 사용하였다.

위의 코드는 초기 코드로 수정이 차차 진행될 예정이다.