안녕하세요. 오늘 소개할 글은 CSS를 이용해서 말줄임표 뒤에
콘텐츠를 표시하는 방법에 대해 알아보겠습니다. 예를 ... [더보기]
---
오늘 소개하려는 글은 위와 같은 UI를 구현하는 방법에 대해서 설명하는 글입니다. 구현해보신 분은 아시겠지만 보기보다 난이도가 은근히 높은 작업입니다. 항상 길이가 고정된 콘텐츠가 아닌, 내용에 따라 유동적으로 변하는 경우 난이도는 더더욱 어려워집니다.
이 글에선 flexbox, css variable, shape-outside, text-overflow, -webkit-line-clamp 등 갖가지 최신 기술(?)을 동원해서 콘텐츠의 길이 변화에도 대응 가능한 UI를 구현하는 과정을 보여줍니다. 저는 하다하다 안되서 자바스크립트 라이브러리로 해결했었는데요. 이 분의 해결과정도 매우 흥미롭습니다.