CSS 선택자 심화
4주차에서 배운 기본 선택자(타입·클래스·ID·전체) 외에 관계 기반 선택자와 상태 선택자를 추가로 학습합니다.
선택자 8가지 정리
| 이름 | 문법 | 설명 |
|---|---|---|
| 타입 선택자 | A { } |
모든 A 요소 선택 |
| 자식 선택자 | A > B { } |
A의 직접 자식 B만 선택 |
| 자손 선택자 | A B { } |
A 안의 B 전체 (손자 포함) |
| 인접형제 선택자 | A + B { } |
A 바로 뒤 형제 B 첫 번째만 |
| 가상 클래스 | A:hover { } |
특정 상태의 A 요소 |
| 속성 선택자 | A[C] { } |
C 속성을 가진 A 요소 |
| ID 선택자 | #id명 { } |
id 속성값으로 선택 (유일) |
| 클래스 선택자 | .class명 { } |
class 속성값으로 선택 (재사용 가능) |
자식 선택자 vs 자손 선택자
가장 혼동하기 쉬운 두 선택자입니다. 아래 HTML 구조를 기준으로 차이를 확인하세요.
<div>
<p>div 의 첫 번째 자식</p> ← div의 직접 자식
<span>div 의 두 번째 자식
<p>span 의 자식 / div 의 후손</p> ← div의 자손 (손자)
</span>
</div>
| 선택자 | 코드 예시 | 선택되는 요소 |
|---|---|---|
| 자식 선택자 | div > p { color: green; } |
div의 직접 자식 p 하나만 → "div 의 첫 번째 자식" |
| 자손 선택자 | div p { background: #ff8; } |
div 안의 모든 p → 첫 번째 자식 p + span 안의 p 모두 |
핵심 암기법: 자식(
>)은 바로 아래 한 단계만, 자손(공백)은 깊이에 상관없이 전부
인접형제 선택자 (A + B)
A + B는 A 요소 바로 뒤에 오는 첫 번째 형제 B 요소만 선택합니다. 같은 부모를 가진 요소끼리만 형제 관계가 성립합니다.
h2 + p { color: red; }
/* h2 바로 다음에 오는 첫 번째 p만 빨간색 */
가상 클래스 선택자 (:hover 등)
요소의 특정 상태에만 스타일을 적용합니다.
| 가상 클래스 | 설명 |
|---|---|
:hover |
마우스 올렸을 때 |
:focus |
포커스를 받았을 때 (input 클릭 등) |
:first-child |
부모의 첫 번째 자식일 때 |
:last-child |
부모의 마지막 자식일 때 |
속성 선택자 (A[C])
특정 속성을 가진 요소를 선택합니다.
input[type] { border: 1px solid blue; }
/* type 속성을 가진 모든 input */
a[href] { color: green; }
/* href 속성을 가진 모든 a 태그 */
가상 요소 (::after / ::before)
가상 요소(Pseudo-element)는 HTML에 태그를 추가하지 않고, CSS만으로 요소의 앞·뒤에 내용을 삽입하는 기법입니다.
| 가상 요소 | 설명 |
|---|---|
::after |
요소의 뒤에 내용 삽입. content 속성 필수 |
::before |
요소의 앞에 내용 삽입. content 속성 필수 |
::after 예시 — "NEW!" 뱃지
HTML
<ul> <li class="new">자켓 - 200,000원</li> <li>흰색 T 셔츠 - 40,000원</li> <li>체크 T 셔츠 - 48,000원</li> <li class="new">스포츠 가방 - 20,000원</li> </ul>
CSS
.new::after {
content: "NEW!";
font-size: 0.75rem;
background-color: #199;
color: #fff;
padding: 5px;
margin-left: 5px;
border-radius: 3px;
}
주의:
::after / ::before는 반드시 content 속성이 있어야 표시됩니다. 빈 문자열 content: ""도 가능합니다.
Box Model 속성 심화
1주차에서 Box Model 구조를 배웠습니다. 5주차에서는 실습에서 자주 쓰이는 관련 속성들을 추가로 학습합니다.
border-radius — 테두리 모서리 둥글게
h1 {
border: 3px solid #fff;
border-radius: 20px; /* 모든 모서리 20px 둥글게 */
}
img {
border-radius: 30%; /* 비율로 지정 — 50%이면 원형 */
}
a {
border-radius: 4px; /* 기본 4px */
border-top-left-radius: 20px; /* 특정 모서리만 다르게 */
}
display 속성
| 값 | 설명 | 기본 태그 예시 |
|---|---|---|
block |
가로 전체 차지, 줄바꿈 발생. width/height 지정 가능 | <div>, <p>, <h1> |
inline |
내용 너비만큼만 차지, 줄바꿈 없음. width/height 무시 | <span>, <a>, <strong> |
inline-block |
인라인처럼 나란히, 블록처럼 width/height 지정 가능 | <img>, <button> |
none |
화면에서 완전히 숨김 (공간도 사라짐) | — |
/* a 태그를 블록으로 만들어 버튼처럼 너비를 갖게 */
a {
display: block;
background-color: #ff9a9c;
padding: 20px 0;
}
list-style — 목록 마커 제거
ul {
list-style: none; /* ●, ○ 등 기본 마커 제거 */
padding: 0;
margin: 0;
}
text-decoration — 링크 밑줄 제거
a {
text-decoration: none; /* 링크 밑줄 제거 */
/* text-decoration: underline; — 밑줄 */
/* text-decoration: line-through; — 취소선 */
}
CSS Reset & 정렬
CSS Reset
브라우저마다 기본 margin·padding 값이 달라 레이아웃이 어긋날 수 있습니다. 전체 선택자(*)로 초기화하는 것이 일반적입니다.
* {
margin: 0;
padding: 0;
}
/* 모든 요소의 바깥·안쪽 여백을 0으로 초기화 */
margin: auto — 블록 요소 가운데 정렬
블록 요소에 width를 지정하고 margin: auto를 사용하면 수평 가운데 정렬이 됩니다.
적용 전
h1 {
margin: 20px 0;
/* 왼쪽 정렬 */
}
적용 후
h1 {
width: 300px;
margin: 20px auto;
/* 수평 가운데 정렬 */
}
margin 단축 표기:
margin: 20px auto → 위·아래 20px, 좌·우 automargin: 10px 20px 30px 40px → 위·오른쪽·아래·왼쪽 (시계방향)
text-align: center — 텍스트 가운데 정렬
블록 요소 안의 인라인 콘텐츠(텍스트·이미지)를 가운데 정렬합니다. 블록 요소 자체를 이동시키지는 않습니다.
h1 {
text-align: center; /* 텍스트 가운데 정렬 */
}
p, ul {
text-align: center;
margin-bottom: 20px;
}
5주차 CSS 실습 정리 — 오렌지농장 스타일
* { margin: 0; padding: 0; }
body { background-color: #bbf1ef; }
h1 {
font-size: 18px;
border: 3px solid #ffffff;
border-radius: 20px;
padding: 6px 0;
margin: 20px auto;
width: 300px;
text-align: center;
}
img {
width: 20%; height: 20%;
border: 5px solid orange;
border-radius: 30%;
padding: 10px;
}
a {
background-color: #ff9a9c;
display: block;
padding: 20px 0;
border-radius: 4px;
color: #ffffff;
border-top-left-radius: 20px;
font-weight: bold;
text-decoration: none;
}
ul {
width: 100px;
margin: 0 auto;
list-style: none;
}
li { margin-bottom: 20px; }