dl, dt 마지막 요소 선택 방법?

dl (description list) 내의 dt와 dd에 border-bottom 스타일을 적용하고 싶을 때가 있습니다. 하지만, 마지막 dt와 dd에 접근하여 스타일을 주는 방법입니다.

1.  html 구조

간단하게 HTML 태그를 만들어봅시다. dl은 HTML에서 설명 목록을 만들 때 사용하는 요소로, dt는 항목의 제목을, dd는 그에 대한 설명을 나타냅니다. 다음과 같은 구조로 구성됩니다.

<dl>
  <dt>Title 1</dt>
  <dd>Description 1</dd>
  <dt>Title 2</dt>
  <dd>Description 2</dd>
</dl>

2. border-bottom 스타일 적용 방법

먼저, dt와 dd에 border-bottom을 적용하는 방법을 살펴보겠습니다.

/* 모든 dt와 dd에 border-bottom 적용 */
dl dt, dl dd {
    border-bottom: 1px solid #000;
    padding: 5px 0;
}

위의 CSS를 적용하면 dl 안의 모든 dt와 dd에 하단 경계선이 나타납니다. 이제 마지막 요소에 있는 Title 2, Desc 2에 있는 border-bottom을 제거하는 것으로 예를 들겠습니다.

3. 마지막 요소에 border-bottom 제거하기

마지막 요소에 접근하여 border가 없도록 하도록 합니다. 이를 위해서는 :last-of-type 선택자를 사용하여 마지막 dt와 dd의 border-bottom을 제거할 수 있습니다.

/* 마지막 dt와 dd에만 border-bottom 제거 */
dl dt:last-of-type, 
dl dd:last-of-type {
    border-bottom: 0;
}

 

이렇게 하면 dl 내에서 마지막 dt와 dd에 대해 border-bottom이 자동으로 제거됩니다.

4. 전체 코드

다음은 위의 내용을 합친 전체 코드입니다.

<dl>
  <dt>Title 1</dt>
  <dd>Description 1</dd>
  <dt>Title 2</dt>
  <dd>Description 2</dd>
</dl>

/* 모든 dt와 dd에 border-bottom 적용 */
dl dt, dl dd {
    border-bottom: 1px solid #000;
    padding: 5px 0;
}

/* 마지막 dt와 dd에 border-bottom 제거 */
dl dt:last-of-type, dl dd:last-of-type {
    border-bottom: 0;
}

이렇게 하면 모든 dt와 dd에 border-bottom이 적용되지만, 마지막 요소에는 적용되지 않습니다. last-child를 사용할 수 있지만, 이럴 때는 dt와 dd 중에서 dd만 적용되게 되므로 적절하지 않습니다. 그래서 last-of-type을 사용해서 접근하는 방법도 있습니다. 동적으로 계속해서 늘어나는 것에서 사용하기 좋습니다.

5. 정리 및 팁

• :last-of-type 선택자를 활용하면 CSS만으로도 동적인 스타일 적용이 가능합니다.
• border-bottom은 간단하지만 콘텐츠의 구분을 명확히 할 때 유용하게 사용할 수 있습니다.
• 마지막 요소에 대한 스타일 제거는 깔끔한 레이아웃을 만들 때 중요합니다.