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

gun·2020년 12월 20일

MediaQuery styled components 미디어쿼리 반응형 반응형 웹

반응형 웹

목록 보기

4/5

목표

전 게시글에서 미디어 쿼리에 대해 알아보았습니다. 이번 게시글에서는 미디어 쿼리를 이용해 이번 프로젝트에 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의 값에 따라 스타일이 변하게 만들어 보겠습니다.

gun

이전 포스트

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -3 media-query 맛보기

다음 포스트

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -4 styled-components 로 props전달하기

20개의 댓글

shivaniroy

2023년 4월 7일

1개의 답글

Alexa Hills

2023년 4월 8일

Our escorts are famous for their great looks and lovely personality. We have a strong team of models that make sure to satisfy all your needs, emotions and desires. Our main motto has been to provide you the best escorts services anywhere in the world at lowest prices and with no compromise on quality. https://www.yaina.in

답글 달기

shama izas

2023년 9월 20일

asddasdwsa

답글 달기

Kabir Singh

2023년 10월 7일

The real happiness and sexual relations can easily get through these celebrity female https://www.girlsdelhi.in/ . All the additional details, as well as booking info, are available on the gallery of our website and you can pick up the best one as per your taste. All these services are available 24/7 and you can book it anytime via phone number and email address.

답글 달기

Suman Sharma

2023년 10월 7일

We are one of the reliable escort agencies in India that provide escort services in India to the customers in the best ways. We understand that you need someone who can listen to you and share some quality time with you. https://www.sanakhan.in/goa-call-girls.html Your privacy and hesitation are understandable in booking the model, but you can trust us as we have lots of customers who reach us again and again. So, reach us any time to enjoy quality time with our India escorts service.

답글 달기

Sabana Mahajan

2023년 10월 18일

It doesn't matter if it's your first time or not, he will do everything to satisfy your cravings. Which will fulfill all your thoughts and give you what you are looking for. It's like the value of money you spend to meet your needs. Grab your phone and get in here as soon as possible. Once you are with these call girls, there is no going back. The effect they will create in your body will satisfy you. So don't settle for anything less than the best for today. Contact now one of the best guides around.
https://www.aerocityescorts.services/

답글 달기

Suman Sharma

2023년 10월 21일

These Sanganer escorts make men talent heaven as well as deliver entertainment like they have got never had before So https://www.shwetamalik.in/sanganer-call-girls.html in case you are inclined to apply it slow with our hot escorts to information newfound romance, will make fine that each one your deliver as well as fantasies are glad.

답글 달기

ramya sharma

2023년 11월 24일

One of the immediate benefits of massage is a feeling of deep relaxation and calm. This occurs because massage prompts the release of endorphins visit https://www.ramyabodyspa.com/

답글 달기

iz spa

2023년 11월 25일

relaxing response received from body to body spa near me has a further benefit in helping to reduce stress and anxiety via the sympathetic nervous system https://www.izspa.in/

답글 달기

sutra bahabi

2023년 11월 29일

It's great for increasing flexibility and energy flow. visit https://www.sutramassage.com/

답글 달기

Ishani singh

2023년 12월 8일

to make your mind happy, massage parlour in chennai have come up with a selection of hot massage girl therapists who will solve all your problems like black spots on your body and headache and many more
https://www.flipbodyspa.com/

답글 달기

hugmespa

2023년 12월 15일

our hot massage girl therapists are very skilled in removing all the pains of your body using their hands, finger, knee and some parts of body, come to body massage in chennai and enjoy all the services from them
https://www.hugmespa.com/

답글 달기

brightspa

2023년 12월 16일

Let our expert therapists melt away your stress and tension, leaving you feeling completely relaxed and renewed. Immerse yourself in the tranquil atmosphere and enjoy a pampering session at female to male massage in hyderabad
https://www.brightespa.com/

답글 달기

spasweery ban

2023년 12월 18일

Massage practice helps you to live healthy and rejuvenate daily and the mane is so bright and shiny come and see us erotic massage in hyderabad we make it easy and affordable for everyone
https://www.spasweety.com/

답글 달기

sheelasharma

2023년 12월 28일

Massage is a safe and effective form of massage therapy that can provide many benefits for men. https://www.spaleela.com/

답글 달기

Good Will Spa

2024년 1월 17일

Massage is a holistic practice that combines physical postures, breathing exercises, meditation, and relaxation techniques to promote overall health and well-being. visit https://bodymassageinchennai.in

답글 달기

Good Will Spa

2024년 1월 17일

Let's embark on a journey into the world of rejuvenation and discover the unparalleled benefits of this female to male spa near me experience.
https://bodymassageinchennai.in/
https://femaletomalemassage.in/
https://massageinchennai.in/
https://acaraayur.com/

2개의 답글