CSS 선택자 공부 사이트 < CSS Diner >

https://opentutorials.org/course/2418/13354

선택자 공부 팁 - 생활코딩

 

스터디를 위한 공부 중 생활코딩에서 CSS 강의를 보던 중 재밌어 보이는 정보를 얻었다.

 

https://flukeout.github.io/

CSS Diner

요지는 간단하다. CSS 선택자를 기초부터 차근차근 익힐 수 있게 게임 형태로 도와주는 사이트이다.

 

id, class, >, +, ~, n의배수, nth-child 등 단순히 설명만 듣고 직접 실습하지 않으면 어려울 선택자 내용들을 밥상 위 그릇과 그 안에 담긴 음식물들로 표현해서 Node-Tree 형태의 요소 나열을 재밌게 표현한데다가 예제들 역시 학습에 도움이 될 수 있는 요지들만 완벽하게 체크가 되어있었다.

 

개 중 내가 몰랐던 내용들만 아래에 추려서 정리한다.

 

12. Adjacent Sibling Selector (인접 형제 선택자)

 

저 위 사진에서 꿀렁꿀렁 거리는 빨간 친구들(=apple)만 선택해보자.

<div class="table">
  <bento>
    <apple class="small" />
  </bento>
  <plate />
  <apple class="small" />
  <plate />
  <apple />
  <apple class="small" />
  <apple class="small" />
</div>

위의 화면의 HTML 다음과 같다.

테이블 안에는 사과를 담은 도시락, 빈 접시, 작은 사과, 빈 접시, 큰 사과, 작은 사과, 작은 사과 순으로 담겨 있다.

저 중 빈 접시 뒤에 위치한 사과들만 선택해보는 예제이다.

 

이 때 사용하는 인접 선택자가 A + B 이므로, 우리는 아래와 같이 선택자를 작성할 수 있다.

plate + apple { 
  /* Styles would ho here. */
}

위 선택자는 plate 다음에 apple이 오는 모든 요소들을 선택한다. 그렇기에 <plate /><apple /> 형태로 나열되는 요소들을 택한다.

 

 

 

13. General Sibling Selector(일반 형제 선택자)

이번에는 도시락 옆에 꿀렁꿀렁 거리는 녹색친구들(=오이)만 선택해보자.

<div class="table">
  <pickle />
  <bento>
    <orange class="small" />
  </bento>
  <pickle class="small" />
  <pickle />
  <plate>
    <pickle />
  </plate>
  <plate>
    <pickle class="small" />
  </plate>
</div>

 

위의 사과 선택에서는 인접한 한 개의 요소만 가져오는 A + B 선택자를 사용하였다.

이번에 사용할 일반 형제 선택자 같은 경우에는 + 선택자처럼 인접한 요소들을 선택하지만, 1개가 아닌 다수의 요소를 선택할 때 사용된다.

bento ~ pickle {
  /* Styles would ho here. */
}

A ~ B 선택자는 1개의 요소만 선택하는 +와 달리 선택한 모든 요소(=요소명 같다는 조건을 만족하는 경우)를 포함한다.

위의 내용은 bento와 동일 선상에서 다음에 선언 된 모든 pickle 요소들을 선택한다.

 

위 처럼 직접 타이핑을 하면서 CSS 선택자를 공부할 수 있는 유용한 사이트가 있으니, 앞으로 CSS 공부를 단순히 어렵다라고 생각하지 말고, 좀 더 열심히 해야겠다.