여러 CSS 선택자 사용 시 발생하는 오류
초보자들이 자주 하는 실수를 다시 상기시켜 드립니다: 선택자
.bbb.zzz와 선택자 .bbb .zzz는
서로 다른 동작을 합니다. 첫 번째는 동시에 두 클래스를
가지고 있는 요소를 찾는 반면, 두 번째는
bbb 클래스 내부에 있는
zzz 클래스를 가진 요소를 찾습니다.
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
h2.zzz {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
h2 .zzz {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
.bbb.zzz {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
.bbb .zzz {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
.bbb.zzz.xxx {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
.bbb .zzz.xxx {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
.bbb.zzz .xxx {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
.bbb .zzz .xxx {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
#elem.bbb {
color: red;
}
아래 코드에서 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 해당 선택자에 맞는 HTML 코드를 작성하세요. 다음은 선택자가 포함된 코드입니다:
#elem .bbb {
color: red;
}
