화면크기에 따른 자식순서 바꾸기

 

 

반응형으로 화면을 만들고 있는데 화면크기가 767px이하일 때 3번째 있는 자식이 첫 번째로 와야하는 화면을 만들어야 했다.

이걸 css를 통해서 구현을 해보자.

 

React와 styled-component를 사용하였다.

 

코드

 

컴포넌트부분

const Header = () => {
  const navigate = useNavigate();
  return (
    <HeaderWrapperS>
      <HeaderS>
        <li
          className='work header'
          onClick={() => {
            navigate('/work');
          }}
        >
          work
        </li>
        <li className='vntrs header'>VNTRS</li>
        <li
          className='url header '
          id='header-center'
          onClick={() => {
            navigate('/');
          }}
        >
          WILLACREATIVE.COM
        </li>
        <li className='content header'>CONTENT</li>
        <li className='info header'>INFO</li>
      </HeaderS>
    </HeaderWrapperS>
  );
};

 

css부분 (order있는 부분만 가져왔다.)

  .work {
    order: 1;
  }
  .vntrs {
    order: 2;
  }
  .url {
    order: 3;
  }
  .content {
    order: 4;
  }
  .info {
    order: 5;
  }

  @media screen and (max-width: 767px) {
    #header-center {
      order: 0;
    }
  }

 

order를 사용해서 구현을 하였다.

order는 요소의 배치순서를 정하는 css인데 @media를 통해서 767px보다 화면이 작을 경우에 url클래스가 order가 0으로 되서 가장 첫 번째에 오도록 만들었다.

 

참고사이트

order - CSS: Cascading Style Sheets | MDN

 

[CSS] 📚 미디어 쿼리 - 반응형 레이아웃