웹 개발 - 프로젝트 2 - 2. streak lover 프론트

계속해서 프론트 디자인을 해봅시다.

 

streak

우선 nav bar부터 만들어 봅시다. 클릭했을 때 어떤 페이지로 이동할지 만들어 둔 것입니다.

 

하지만 지금은 페이지가 하나밖에 없으므로 그냥 형식만 만들어 줍니다. 그럼 아래와 같이 보입니다.

 

이제 스트릭의 틀을 만들어 줍니다. 아래는 깃허브에서 보여주는 streak입니다. 이 모양을 이용해 만들어 줄 것입니다.

 

하지만 지금 만들진 말고 틀만 잡아줍시다.

 

여기까지 하면 아래와 같이 나옵니다.

title로 제목을 전달해 줄 수 있습니다. 인자를 받을 수 있으니 인자를 넘겨줄 수도 있어야 겠지요. 다음과 같이 넘겨줄 수 있습니다.

 

구조

전체적인 구조는 아래와 같습니다. component에는 여러 곳에서 사용하는 요소들을, page에는 페이지 단위의 작업을 넣어두었습니다. 아직은 페이지가 하나밖에 없습니다.