최진우.
최진우 블로그
최진우.
전체 방문자
19,683
오늘
9
어제
5
  • Category
    • Log
      • essay
      • review
      • travel
      • english
    • Dev
      • javascript
      • react
      • go
      • css
      • linux
      • python
      • algorithm
      • git
      • cloud
      • develop
      • cinema4d
      • 3dsmax
      • tistory
    • Slack
    • Notion
    • VSCode

블로그 메뉴

  • About
  • Portfolio

인기 글

  • 스타트업 개발자 채용에 관한⋯
    2022.06.02
  • 대표의 역할 vs 개발자의 역할
    2022.06.02
  • 존 드라이든
    2022.05.30
  • 파이썬이 아닌 maxscript 소스
    2022.06.17
  • 유태경전
    2022.05.30

최근 댓글

  • 이후에 어떻게 되셨나요?
    ㅇㅇㅇㅇ

최근 글

  • language market fit 이란?
    2022.07.05
  • 복문이란 뭘까?
    2022.07.05
  • outline 은 border와 다르다
    2022.07.04
  • 잡지 메모
    2022.06.22
  • 깃허브 코파일럿 유료화됨
    2022.06.22
    깃허브 코파일럿 유료화됨
hELLO · Designed By pronist.
최진우.

최진우 블로그

[css] & + & 알아보기
Dev/css

[css] & + & 알아보기

2020. 11. 27. 18:15

 

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; 을 주면 맨위랑 맨밑에는 적용안되고 사이간격만 조정할수 있습니다.

    'Dev/css' 카테고리의 다른 글
    • 스크롤를 이용해 인터랙티브 한 페이지 만들기
    • grid 배우기
    • flex box 배우기
    • [css] flex 공부 사이트
    & + &, css
    최진우.
    최진우.
    우당탕탕 최진우의 세상만사  😎
    댓글쓰기
    다음 글
    [golang] net/http 처음 사용해보기
    이전 글
    [css] flex 공부 사이트
    • 이전
    • 1
    • ···
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • ···
    • 169
    • 다음