[css] & + & 알아보기

 

const NewsItemBlock = styled.div`

    & + & {
        margin-top : 3rem;
    }
`;

& 은 부모 태그를 가리킵니다. 저 상황에서는 div 를 가리킵니다.

 

<NewsItemBlock>
      {urlToImage && (
        <div className="thumbnail">
          <a href={url} target="_blank" rel="noopener noreferrer">
            <img src={urlToImage} alt="thubnail" />
          </a>
        </div>
      )}
      <div className="contents">
        <h2>
          <a href={url} target="_blank" rel="noopener noreferrer">
            {title}
          </a>
        </h2>
        <p>{description}</p>
      </div>
    </NewsItemBlock>

& + & 하면 &의 부모의 &의 바로옆 & 를 가르킵니다.

첫번째 포스트에서 아래포스트를 가리키고

두번째 포스트에서는 세번째 포스트를 가리키고

세번째 포스트에서는 네번째 포스트를 가리킵니다.

그리고 margin-top: 3rem; 을 주면 맨위랑 맨밑에는 적용안되고 사이간격만 조정할수 있습니다.