CSS (2) 썸네일형 리스트형 [CSS]masonry 레이아웃 구현하는 3가지 방법(핀터레스트 레이아웃) Masonry는 사전적으로 벽돌쌓기를 의미합니다. masonry layout은 마치 벽돌을 쌓는것처럼 서로 다른 길이를 가진 이미지들을 빈틈없이 차곡차곡 쌓아놓은 듯한 레이아웃을 의미합니다. 다만 masonry layout은 일반적으로 상단에서 하단으로 쌓아 나가는게 일반적입니다. 대표적인 예시로는 핀터레스트나 네이버 이미지 검색이 있습니다. 이번 글에서는 이러한 masonry layout을 구현하는 네가지 방법에 대해 알아보겠습니다. 1. css로 구현하기 이 방법은 가장 간단하면서도 쉽게 적용 할 수 있는 방법입니다. See the Pen Untitled by 이승철 (@ibnviuin-the-builder) on CodePen. 이 방법은 가장 masonry layout을 흉내내는 가장 간단한 방법.. css 문자열 개행(\n) 및 공백(\t) 처리와 ellipsis(...) 오늘은 실무에서 정말 많이 사용되는 문자열 개행 및 공백 처리에 대해서 알아보겠습니다. 문자열을 공백이나 개행 있는 그대로 입력하는 경우도 있고 외부 컨텐츠를 가져오는 경우 공백이나 개행이 \n이나 \t 등으로 들어가 있는 경우가 있습니다. 이렇게 입력받은 문자열을 어떻게 client에 출력할지 결정할 수 있게 해주는게 css의 'white-space' 속성 입니다. 먼저 설명을 진행 한 후 가장 하단에 실행 예시를 보여드리겠습니다. 바쁘신 분은 마지막을 바로 보셔도 됩니다. 1. whtie-space의 속성 종류 nowrap : 문자열에 있는 개행을 처리하지 않고 연속되는 공백은 한번만 처리 합니다. 또한 영역을 초과할 경우에도 텍스트가 영역을 넘어서 한줄로 출력됩니다. nomal : nomal은 no.. 이전 1 다음
