종횡비 & 줄 제한

aspect-ratio와 line-clamp 단축 클래스입니다.

Aspect Ratio

ar{W}-{H}

클래스	CSS
`ar16-9`	aspect-ratio: 16 / 9
`ar4-3`	aspect-ratio: 4 / 3
`ar1`	aspect-ratio: 1
`ar21-9`	aspect-ratio: 21 / 9

<!-- 16:9 비디오 -->
<div class="ar16-9 w100p oh br8px">
  <iframe src="..." class="w100p h100p"></iframe>
</div>

<!-- 정사각형 아바타 -->
<img class="ar1 w6rem br50p ofc" src="avatar.jpg" />

Line Clamp

텍스트를 지정한 줄 수로 제한하고 말줄임표를 표시합니다.

lc{줄수}-{줄높이}

클래스	설명
`lc2-1-5rem`	2줄 제한, line-height: 1.5rem
`lc3-1-5rem`	3줄 제한, line-height: 1.5rem
`lc2-20px`	2줄 제한, line-height: 20px

line-clamp은 -webkit-line-clamp, overflow: hidden, text-overflow: ellipsis를 자동으로 포함합니다.

<!-- 3줄 말줄임 -->
<p class="lc3-1-5rem">
  긴 텍스트가 여기에 들어갑니다. 3줄을 넘으면
  자동으로 말줄임표가 표시됩니다...
</p>