📝 nth-child: 순서에 따라 스타일을 지배하는 법
웹 페이지를 만들다 보면 "세 번째 박스만 색을 바꾸고 싶다"거나 "짝수 번째 줄만 배경색을 다르게 하고 싶다"는 고민을 하게 됩니다. 이때 사용하는 구원투수가 바로 :nth-child(n) 가상 선택자입니다.
1. 핵심 개념: nth-child란?
부모 요소 안에 있는 자식 요소들 중에서 몇 번째인지를 기준으로 스타일을 적용합니다.
- 구문:
부모 > 자식:nth-child(번호/수식) - 특징: 숫자를 직접 쓸 수도 있고, 수식(n)을 사용해 패턴을 만들 수도 있습니다.
벨로그에 "CSS nth-child 수식으로 만드는 무지개 레이아웃"이라는 주제로 포스팅하실 수 있게 정리해 드립니다.
이번 예제는 7n + b라는 수식을 활용해 반복되는 규칙(패턴)을 만드는 아주 훌륭한 사례입니다. 달력이나 복잡한 그리드 시스템을 이해하는 핵심이 될 거예요! 🍯
2. 실습 예제: 7색 무지개 그리드
📝 HTML 구조
부모인 section 안에 14개의 빈 div 상자를 만들었습니다. (7개씩 2줄이 생기겠죠?)
<section>
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
</section>🎨 CSS 스타일링
수식을 이용해 7개를 한 주기로 색상이 반복되도록 설정했습니다.
section {
text-align: center;
}
section > div {
width: 13%; /* 약 7개가 한 줄에 들어가는 크기 */
height: 100px;
background-color: red; /* 기본색: 빨강 (7n+1 역할) */
display: inline-block;
}
/* 💡 7개마다 반복되는 수식 패턴 */
section > div:nth-child(7n + 2) { background-color: orange; } /* 2, 9, 16... */
section > div:nth-child(7n + 3) { background-color: yellow; } /* 3, 10, 17... */
section > div:nth-child(7n + 4) { background-color: green; } /* 4, 11, 18... */
section > div:nth-child(7n + 5) { background-color: blue; } /* 5, 12, 19... */
section > div:nth-child(7n + 6) { background-color: navy; } /* 6, 13, 20... */
section > div:nth-child(7n + 7) { background-color: purple; } /* 7, 14, 21... */🤔 핵심 학습 포인트: 수식 an + b 이해하기
수식에서 n은 0부터 시작하는 정수(0, 1, 2, 3...)입니다. 이를 대입해 보면 왜 특정 번호가 선택되는지 알 수 있습니다.
예: 7n + 2일 때
- n = 0: (7 * 0) + 2 = 2번째
- n = 1: (7 * 1) + 2 = 9번째
- n = 2: (7 * 2) + 2 = 16번째
- 결과: 2번부터 시작해서 7개마다(주기) 선택됩니다!
3. 🍯 꿀팁: 자주 쓰는 nth-child 수식 모음
단순히 숫자만 넣는 게 아니라, n을 활용하면 마법 같은 일이 일어납니다. (n은 0, 1, 2, 3... 순으로 대입됩니다.)
:nth-child(odd): 모든 홀수 번째 요소 선택:nth-child(even): 모든 짝수 번째 요소 선택:nth-child(2n): 2의 배수(짝수)와 동일:nth-child(3n): 3, 6, 9... 번째 요소 선택:first-child: 부모의 첫 번째 자식 선택:last-child: 부모의 마지막 자식 선택
4. ⚠️ 주의할 점 (실무 포인트)
:nth-child는 "타입"이 아니라 "순서"를 먼저 봅니다.
예를 들어 div:nth-child(2)라고 썼을 때, 부모의 두 번째 자식이 p 태그라면 스타일이 적용되지 않습니다. (두 번째 자식이면서 동시에 div여야 하기 때문입니다.)
📝 border-radius: 각진 박스를 부드럽게 만들기
웹 페이지에서 버튼이나 이미지의 모서리를 둥글게 깎고 싶을 때 사용하는 속성이 바로 border-radius입니다. 실습 예제를 통해 사용법과 주의점을 알아봅시다
1. 실습 예제
웹 디자인에서 각진 요소를 부드럽게 만드는 border-radius. 같은 숫자 50을 사용하더라도 단위에 따라 결과가 어떻게 달라지는지 확인해 보겠습니다.
📝 HTML 구조
스타일을 다르게 적용하기 위해 div와 section 태그를 나누어 사용했습니다.
<div></div>
<section></section>🎨 CSS 스타일링
공통 속성은 묶고, 차이가 나는 border-radius만 따로 분리했습니다.
/* 모든 div와 section에 공통 적용 */
div, section {
width: 15%; /* 부모 너비 기준 15% */
height: 100px;
background-color: red;
display: inline-block;
margin: 10px;
}
/* 1. % 단위를 사용해 원형 만들기 */
div {
/* 너비와 높이의 50%만큼 깎아 완벽한 원이 됨 */
border-radius: 50%;
}
/* 2. px 단위를 사용해 모서리만 깎기 */
section {
/* 요소 크기와 상관없이 고정 수치 50px만큼 둥글게 처리 */
border-radius: 50px;
}2.🤔 학습 포인트: 왜 결과가 다를까?
50%(상대적 단위): 요소의 전체 크기를 기준으로 계산합니다. 정사각형 박스의 절반 지점들을 연결하기 때문에 완벽한 원이 그려집니다.50px(절대적 단위): 박스의 실제 크기와 상관없이 모서리 끝에서 50px 지점만 둥글게 깎습니다. 박스가 크다면 모서리만 살짝 둥근 사각형이 되고, 높이가 딱 100px라면 양옆이 반원 형태인 캡슐 모양이 됩니다.
✅ 마무리
:nth-child(n)은 특정 순서의 요소를 선택할 때 사용한다.an+b수식을 활용하면 아무리 복잡한 규칙도 다 잡아낼 수 있다!border-radius는 모서리를 둥글게 처리하는 속성이다.px단위는 고정된 둥글기를,%단위는 요소 크기에 비례한 둥글기를 만든다.
