[HTML/CSS] instagram UI 클론 프로젝트

개인 프로젝트로 instagram 클론 UI 제작을 해보았다

 

이번 프로젝트의 핵심은 css flex의 활용이었던 것 같다

 

flex 사용 경험이 없었기에 익숙해지는데 초점을 두고 학습과 병행하며 진행했다

 

 

완성본 시연 영상

 

완성본

 

 

 

어려웠던 점 & 소스코드

 

flex 레이아웃의 flex-direction, justify-content, align-items 속성을 실제 코드에서 사용하는 과정 중 메인축, 수직축의 구분이 쉽지 않아 여러가지 속성들을 직접 바꿔가며 메인/수직축을 파악하는데 시간이 오래 소요됐다

 

Github 저장소

 

 

후기 (느낀점)

 

flex 레이아웃을 활용하면 배치에 있어 얻을 수 있는 이점이 상당히 많다는 사실을 깨달았다

 

좀 더 익숙해져서 자유롭게 사용 할 수 있도록 좀 더 연습해보고 공부해야겠다는 생각을 했다

 

flex 공부 중 css grid도 알게 되었는데 어느정도 flex의 감을 익히고 난후 grid 학습도 바로 해야겠다

 

front 공부를 조금 더 하고 난 후 이번에 만든 프로젝트에 실제 instagram과 유사하게 기능을 추가할 예정이다