masorny 구현하기

bootstrap을 통해 masorny를 구현할 일이 최근에 생기게 되었다.

masorny 구현 방법은 생각보다 어렵지 않았다.

아래의 링크에 bootstrap을 써서 직접 구현하고 있는데,

CSS 및 HTML 구조가 그리 복잡하지 않다.

핵심은 CSS 코드에서 column-width 속성이다.

본 속성의 단위를 현재 em으로 정해주고 있는데,

실제 홈페이지에 적용할때는 가로형 사이즈에 반응하는 vw 단위로 바꾸어주니까

반응형으로 잘 나왔다.

참고로 column-width는 적혀진 값만큼의 사이즈로 홈페이지를 컬럼으로 나누는 기능이다.

자세한 설명은 아래의 링크를 참고하면 된다.

https://www.w3schools.com/cssref/css3_pr_column-width.asp