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
은 간단하지만 콘텐츠의 구분을 명확히 할 때 유용하게 사용할 수 있습니다.- 마지막 요소에 대한 스타일 제거는 깔끔한 레이아웃을 만들 때 중요합니다.
'CSS' 카테고리의 다른 글
input checkbox를 클래스와 함께 선택하는 방법 (0) | 2024.09.09 |
---|---|
[CSS] 그리드 Grid를 익혀보자 (일단 기초편 #1) (0) | 2022.11.07 |
[CSS] 배경이미지를 넣어보자! background 추가 속성들! (0) | 2021.12.28 |
[CSS] box-sizing, 테두리까지 포함 시키는 방법! (0) | 2021.12.27 |
[CSS] box-shadow, 그림자를 넣어보자! (0) | 2021.12.26 |
댓글