[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -4 styled-components 에 media-query 끼얹기

rjsdnql123·2020년 12월 20일
1

반응형 웹

목록 보기
4/5
post-thumbnail

목표

전 게시글에서 미디어 쿼리에 대해 알아보았습니다. 이번 게시글에서는 미디어 쿼리를 이용해 이번 프로젝트에 media-query를 얹어 반응형으로 만드는 작업을 하겠습니다.

본격 미디어 쿼리(media-query)사용하기

이 프로젝트의 목표는 모바일 사이즈가 되었을 때 로고가 Nav의 왼쪽으로 이동하고 로그인과 회원가입이 Menu에 숨겨져, 클릭하지 않는이상 화면에 나타나지 않게 해야 합니다.
지금부터 media-query와 styled-components를 활용해 반응형으로 만들어 보겠 습니다!

저는 모바일 환경을 500px 미만으로 잡아주었습니다.

//media query 스타일이 500px미만일때 적용되게 됩니다.
 @media screen and (max-width: 500px) {
        flex-direction: column;
    }
const Common = styled.div`
    display: flex;
    justify-content: space-between;
    margin: 20px;
    @media screen and (max-width: 500px) {
        flex-direction: column;
    }
`
const Home = styled.a`
    display: flex;
    align-items:center;
    font-size: 30px;
    margin 10px;
    text-decoration: none;
    color: black;
    font-weight: bold;
    @media screen and (max-width: 500px) {
    display: none;
    }
`
const ContlorBox = styled.div`
    display: flex;
    align-items:center;
    @media screen and (max-width: 500px) {
        
        flex-direction: column;
        align-items:flex-end;
        display: none;
    }
`

여기까지 완성하셨다면 인터넷 브라우저 창을 줄여보시면 다음과 같이 설정한 500px 미만으로 떨어지게 되면 미디어쿼리 안에 선언한 스타일이 적용되게 됩니다.

이제 거의 다 왔습니다. react-icons를 이용해 Menu-icon을 만들고 onClick효과를 주겠습니다.

npm install react-icons --save

https://react-icons.github.io/react-icons/
위 사이트에 가면 다양한 아이콘을 이용하실 수 있습니다.
다음과 같이 메뉴 아이콘을 적절한 위치에 포지셔닝 해주시고 미디어 쿼리를 이용해 500px이상이 되면 화면에 메뉴창이 나타나지 않도록 조절해 주겠습니다.

    @media screen and (min-width: 500px) {
        display: none;    
    }
import React, { useState } from 'react';
import styled from 'styled-components'
import ABLY from './ABLY.jpg'
import { IoIosMenu } from "react-icons/io";

function Nav () {

    const [menu, setmenu] = useState(false)    

    return (
        <Common>
            <Logo href='/'>에이블리</Logo>
            <LogoImg src={ABLY}/>
            <ContlorBox >
                <Contlor href='/connect'>계약</Contlor>
                <Contlor href='/login'>로그인</Contlor>
                <Contlor href='/signup'>회원가입</Contlor>
            </ContlorBox>
            <Menubar href='#' >
             <IoIosMenu/>
            </Menubar>
        </Common>
    )
}
const Menubar = styled.a`
    display: flex;
    align-items:center;
    font-size: 30px;
    position: absolute;
    right: 32px;
    height: 97px;
    @media screen and (min-width: 500px) {
        display: none;    
    }
`

여기까지 하셨다면 다음과 같은 결과물이 나오게 됩니다.

모바일

PC

다음 게시글에는 메뉴 버튼을 눌렀을 때만 회원가입, 로그인 버튼이 나올수 있게 styled-components에 props를 전달해 props의 값에 따라 스타일이 변하게 만들어 보겠습니다.

0개의 댓글