dl 엘리먼트로 좌우 형태의 컬럼 테이블 만들기
- Nest
- Development
- Category
- html/css
- Hit
- 246
- Star
- 0
왼쪽에 제목, 오른쪽에는 본문 형태로 레이아웃을 grid로 간단하게 만들 수 있다.
거기다 표현이 상당히 유연해서 대단히 좋아 보인다.
source
<dl>
<dt>노벨 수상자 평균 IQ</dt>
<dd>145</dd>
<dt>노벨상 발표일</dt>
<dd>매년 10월</dd>
<dt>노벨상 시상식</dt>
<dd>매년 12월 10일</dd>
<dt>노벨상 시상 장소</dt>
<dd>스웨덴(나머지)/노르웨이(평화상)</dd>
</dl>
<style lang="scss">
dl {
display: grid;
grid-template: auto / 180px 1fr;
border: 1px solid hsl(0 0% 0% / 15%);
row-gap: 8px;
column-gap: 8px;
padding: 16px;
dt {
font-weight: 600;
}
dd {
margin-left: 0;
}
}
</style>
codepen
출처
https://gist.github.com/LeaVerou/12b1d1e078510900c7ab206da1a0ff2e