CSS&JS 182

Masonry layout(핀터레스트 레이아웃)(2) - 핀터레스트처럼 items의 너비는 고정되어있고 화면 해상도에 따라 단의 갯수가 늘어나려면?

화면 크기가 짱 넓을 때 이전 포스팅 참조 https://aosceno.tistory.com/354 Masonry layout(핀터레스트 레이아웃) 참고사이트 https://opentutorials.org/module/2398/13712 핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피 소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유.. aosceno.tistory.com 엄청 간단하다. 컨테이너(부모)에서 column-width 값만 설정하면 된다 (column-count를 설정하지 않으면 되는 것이다..) 아이템(자식)의 너비는 걍 100%로 하고! ㅇㅇ https://www.w3schools.com/css/css3_multiple_co..

CSS&JS/⚡Thinkers 2019.08.13

Masonry layout(핀터레스트 레이아웃)

참고사이트 https://opentutorials.org/module/2398/13712 핀터레스트 스타일 레이아웃 만들기 (masonry) - 겁나 빠른 웹 레시피 소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. 사용기술 관련기술 예제 #columns{ column-width:350px; column-gap: 15px; } #columns figure{ disp opentutorials.org https://css-tricks.com/piecing-..

CSS&JS/⚡Thinkers 2019.08.13