Masonry layout1 Masonry layout(react) 벽돌을 쌓는 것처럼 레이아웃하는 방식을 말하는데 핀터레스트의 레이아웃이라고 보면 된다. 아래 그림은 핀터레스트의 사진이다.(얼굴 나온 사진은 가림) 위에 처럼 화면을 꾸며야할 부분이 생겨서 flex를 이용하여 적용해 보았다. 왼쪽은 코드 오른쪽은 결과 사진이다. 큰 박스가 SkillsContainer가 적용된 박스고 작은 박스들이 SkillsStack가 적용되었다고 보면 된다. 이렇게 하면 안 좋은 점이 max-height를 정해야줘야하고 행마다 채우는 형식이 아니라 열마다 채우는 형식이여서 많이 아쉽다. 그래서 react-masonry-css를 사용하기로 했다. yarn add react-masonry-css Masonry 컴포넌트를 불러와서 아래 코드처럼 만들고 Frontend {skillItems... 2023. 1. 23. 이전 1 다음
