CSS 선택자 띄어쓰기의 차이

 

 

 

두 선택자 간에는 중요한 차이가 있습니다. 이를 쉽게 이해하고 기억하기 위해 다음과 같이 설명드리겠습니다:

1. .table plate, bento
   • 이것은 두 개의 별개 선택자입니다.
   • "테이블 클래스 안의 모든 plate" 와 "모든 bento"를 선택합니다.
   • 쉽게 기억하는 방법: "테이블 위의 접시들과 도시락 전부"
2. .table plate, .table bento
   • 이것도 두 개의 선택자지만, 둘 다 .table 클래스 내부에 있어야 합니다.
   • "테이블 클래스 안의 모든 plate"와 "테이블 클래스 안의 모든 bento"를 선택합니다.
   • 쉽게 기억하는 방법: "테이블 위의 접시들과 테이블 위의 도시락들"

핵심 차이점:

• 첫 번째는 bento가 어디에 있든 선택합니다.
• 두 번째는 bento가 반드시 .table 클래스 안에 있어야 선택됩니다.

이를 식당 상황으로 비유하면:

1. "테이블 위 접시와 주방의 도시락까지 모두 가져와!"
2. "테이블 위에 있는 접시와 도시락만 가져와!"