styled-components 질문

Question

& > * {     :not(:last-child) {       margin-bottom: 16px;     }  }  이게 무슨 의미인지 알고싶습니다  *가 전체를 말하는건 알겠는데 &> 앞에 붙은 이것을 모르겠습니다

Answer

& 는 해당 태그 본인 자체를 뜻합니다. 즉 tag > * 에 해당 스타일을 적용하라는 의미에요. >는 그냥 평범한 css 선택자중 하나로 자식결합 선택자입니다.

Answer

안녕하세요, mine702님.

위에 류윤종님께서 잘 답변해주셨네요~

위 코드에서 '>'는 child selector를 의미합니다.

child selector는 어떤 부모 element의 자식 element에 스타일을 적용하고 싶을 때 아래와 같이 사용합니다.

parent element > child element {

}

위 코드에서는 아래와 같이 사용했는데,

& > * {

}

여기서 '&'는 Sass에서 제공하는 parent selector를 의미합니다(아래 링크 참조).

parent selector는 말 그대로 부모 자신을 선택하기 위한 selector입니다.

그리고 우리가 실습에 사용한 styled-components는 stylis라는 preprocessor를 사용하는데,

stylis가 스타일 중첩을 위해서 Sass(SCSS)와 유사한 형태의 문법을 지원합니다(아래 링크 참조).

그리고 이미 알고계신 것처럼 '*'는 모든 element를 선택하기 위한 universal selector입니다.

그래서 결론적으로 styled-components에서 '& > *' 라는 selector는,

해당 부모 element의 모든 자식들에게 스타일을 적용하기 위한 selector라고 보시면 됩니다.

그리고 그 안에서 다시 ':not(:last-child)'라는 selector를 이용해서 마지막 자식이 아닌 element에만 스타일을 적용하도록 한 것입니다.