개인 프로젝트로 instagram 클론 UI 제작을 해보았다 이번 프로젝트의 핵심은 css flex의 활용이었던 것 같다 flex 사용 경험이 없었기에 익숙해지는데 초점을 두고 학습과 병행하며 진행했다 완성본 시연 영상 완성본 어려웠던 점 & 소스코드 flex 레이아웃의 flex-direction, justify-content, align-items 속성을 실제 코드에서 사용하는 과정 중 메인축, 수직축의 구분이 쉽지 않아 여러가지 속성들을 직접 바꿔가며 메인/수직축을 파악하는데 시간이 오래 소요됐다 Github 저장소 후기 (느낀점) flex 레이아웃을 활용하면 배치에 있어 얻을 수 있는 이점이 상당히 많다는 사실을 깨달았다 좀 더 익숙해져서 자유롭게 사용 할 수 있도록 좀 더 연습해보고 공부해야겠다는..
Frontend/HTML·CSS
# Flex 레이아웃을 만들기 위한 기본 구조 [html] helloflex abc helloflex [css] .container { display: flex; /* display: inline-flex; */ } # flex-direction : 아이템들이 배치되는 축의 방향을 결정하는 속성 .container { flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ } row (기본값) 아이템을 행(가로) 방향으로 배치 row-reverse 아이템을 역순으로 가로 배치 column 아이템을 열(세로) 방향으로 배치됩니다. column..
