반응형
✔️ 인접형제 선택자란?
인접형제 선택자란 CSS 선택자(Selector) 중에서 같은 부모 아래에 있는 태그 두개가 인접해서 나타날 때 두번째 태그를 선택하기 위한 CSS 선택자이다.
즉, E + F 라고 하면 E 다음에 바로 나오는 F 요소를 의미한다
더 자세한 CSS 선택자(Selector)에 대한 글은 아래에!
CSS: 선택자(Selector) 이해
웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우
www.nextree.co.kr
✔️ SCSS에서 &
SCSS에서 &은 무조건 위의 부모 요소를 의미한다
✔️ & + &
.a-file {
overflow: hidden;
position: relative;
display: inline-block;
font-size: 24px;
& + & {
margin-left: 8px;
}
}같은 요소를 여러번 반복해서 나열할 때 서로간의 margin을 주기 위해서 &+&을 사용할 수 있다.
아래 코드에서 두번째 <div className="a-file"/> 만 margin-left가 적용된다
<div>
<div className="a-file"/>
<div className="a-file"/>
</div>반응형
'프론트엔드 웹 > SCSS' 카테고리의 다른 글
| 순서대로 등장하는 animation 만드는 CSS (0) | 2023.06.30 |
|---|---|
| 아래에서 천천히 올라오는 Transition CSS (0) | 2023.05.16 |
| [CSS] 텍스트 말줄임표 (...) 자동으로 사용하기 (1) | 2022.10.05 |
| SCSS 꿀팁 &::after / 마지막에 꾸밈요소 추가하기 (0) | 2022.01.25 |