반응형
리스트 항목 간에 특정한 여백을 설정하려면, 두 가지 방법이 있습니다. 하나는 CSS :not() 선택자를 사용하는 방법이고, 다른 하나는 nth-child를 사용하는 방법입니다. 아래에서 두 가지 방법을 소개하겠습니다.
방법 1: :not() 선택자를 사용하는 방법
이 방법은 모든 li 요소에 기본 여백을 설정한 다음, 첫 번째 항목에는 여백을 제거하는 방법입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Item Spacing</title>
<style>
ul {
list-style-type: none; /* 기본 불릿 제거 */
padding: 0; /* 기본 패딩 제거 */
margin: 0; /* 기본 마진 제거 */
}
li {
display: inline-block; /* 항목들을 가로로 나열 */
}
li:not(:last-child) {
margin-right: 5px; /* 마지막 항목을 제외한 모든 항목에 오른쪽 여백 설정 */
}
</style>
</head>
<body>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ul>
</body>
</html>
방법 2: nth-child를 사용하는 방법
이 방법은 nth-child를 사용하여 모든 항목의 오른쪽에 여백을 주되, 마지막 항목에만 여백을 주지 않는 방법입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Item Spacing</title>
<style>
ul {
list-style-type: none; /* 기본 불릿 제거 */
padding: 0; /* 기본 패딩 제거 */
margin: 0; /* 기본 마진 제거 */
}
li {
display: inline-block; /* 항목들을 가로로 나열 */
}
li:not(:last-child) {
margin-right: 5px; /* 마지막 항목을 제외한 모든 항목에 오른쪽 여백 설정 */
}
</style>
</head>
<body>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ul>
</body>
</html>설명
- li:not(:last-child): :not() 선택자를 사용하여 마지막 li 요소를 제외한 모든 li 요소에 여백을 추가합니다. 이는 모든 항목 간의 여백을 적용하면서도 마지막 항목에는 여백이 적용되지 않도록 합니다.
- li:nth-child(n):not(:last-child): 이 방법도 같은 원리로, 특정 항목에만 여백을 적용할 수 있습니다.
이 두 가지 방법 중 하나를 선택하여 원하는 여백을 설정할 수 있습니다. 각 방법은 상황에 맞게 사용하면 좋습니다.
반응형
'SMART GPT' 카테고리의 다른 글
| 텍스트 파일을 읽고, 각 줄의 끝에서 6글자를 삭제한 후, 결과를 새로운 파일에 저장합니다. (0) | 2024.08.23 |
|---|---|
| cURL을 사용하여 리다이렉트를 따라가 최종 URL 가져오기 (0) | 2024.08.23 |
| display: flex를 사용하여 요소를 가로세로 가운데 정렬하는 방법 (0) | 2024.08.07 |
| grid-template-columns CSS (0) | 2024.08.07 |
| PHP 5.x 버전에서 실행 가능한 10진수와 16진수 간의 변환을 수행하는 코드를 포함한 전체 웹 페이지 소스코드 (0) | 2024.08.06 |
| getElementsByClassName 사용하기 (0) | 2024.08.06 |
| 텍스트에 직접 그라데이션 색상을 적용하려면? (0) | 2024.07.27 |
| 일반적으로 사용되는 해상도별 미디어 쿼리 예시 (0) | 2024.05.19 |
댓글