CRUISEWEB

이 레시피 짱 맛있어욤~

multi-column layout 1. columns column-width와 column-count의 단축 속성이다. 다른 단축속성들과 마찬가지로, 생략된 값은 초기값으로 설정된다. 2. column-width length 혹은 auto로 정의할 수 있다. 실제 너비는 가능한 공간에 맞추기 위하여 넓어지거나, 좁아질 것이다. 3. column-count 정의한 수만큼 요소의 컨텐츠 안의 컬럼의 갯수를 지정한다. 해당 값이 없거나, column-width가 auto가 아닌 경우, 컬럼의 갯수는 허용 가능한 최대 수가 된다. 4. column-gap column들의 사이 값으로 브라우저의 기본 간격 값이 사용된다. 멀티 컬럼 레이아웃에서 해당 값은 1em으로 정의된다. %값은 부모 요소의 너비를 기준으로..

리스트 정렬 (masonry) 1. CSS만 사용한 방법 See the Pen masonry by leeYura (@2yulrang) on CodePen. column- 프로퍼티를 이용한 masonry IE10 이상! 2. JS를 사용한 방법 See the Pen list by leeYura (@2yulrang) on CodePen. 파라미터로는 열의 갯수, 각 리스트의 너비, gutter 값을 입력해주면 된다. masonry 플러그인도 있다고 하니까 쓰실분들은 찾아보시는 것도 좋을 듯! 18.10.03 15:30 18.10.13 15:10 ​