목적

CSS의 Flex 레이아웃을 연습 및 숙달하기 위함.

동기

CSS의 MDN 문서를 읽다보니 예전에 배웠던 프로퍼티나 개념들이 많이 달라졌다는걸 느꼈다.

심지어 BFC 라던가 Replaced Element 라던가.. 이런 것들은 책에서 보지 못했던 개념이었다.

따라서 MDN의 CSS 문서를 읽다가 레이아웃 파트까지 보게되었다.

그리드를 배우기 전에 flex 레이아웃을 이용해서 뭔가 하나를 만들어 보는게 실력향상에 도움이 될것이라 생각했다.

예전에 부트스트랩 예제 사이트를 보며 연습하기 좋다고 생각했던 것이 기억나서 클론 대상을 부트스트랩 Album 예제 사이트로 정했다.

어려운 점

확실히 MDN 공식 문서를 위에서부터 쭉 읽으니까 헷갈렸던 개념들이 확실하게 잡혀서인지 딱히 어려운점이 없었다.

예전엔 overflow 프로퍼티와 마진 충돌 등... 되면 넘기는 식으로 코딩했으나, 이제는 확실히 알고 써서 그런지 오히려 재미있었다.

다만, 엘리먼트의 클래스 이름을 짓는것이 힘들 뿐이다.

결과물

• 깃헙 저장소 : 깃헙➡️

• 라이브 데모 사이트 : 깃헙 배포➡️

• 원본 사이트 : 부트스트랩 Album➡️