[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -2(styled-components 맛보기)

Styled-components 맛보기

이 전 게시글에서 react 세팅을 다 마쳤습니다. 이제 본격적으로 styled-components를 활용해 웹 사이트 만들기에 돌입하겠습니다.

마크업

먼저 저희가 만들고자 하는 반응형 웹 사이트는 다음과 같은 구조를 갖고 있습니다.<허접하지만.. 그냥 틀만 봐주세요... : ) >
PC 환경에서는 버튼들이 한눈에 보이고, 모바일 환경에서는 contlor박스가 숨겨져 사용자가 클릭하지 않으면 나타나지 않습니다.

저는 반응형 웹 제작시 PC환경을 먼저 세팅하고 하는 편 입니다. 뭐가 먼저가 되어야한다는 기준이 명확히 없는거 같습니다.ㅎㅎ

styled-components 맛보기!

styled-components는 Template Literal을 사용해 스타일을 지정할수 있고, 동적으로 props를 내려받아 사용도 가능합니다.
사용방법은 간단합니다. styled-components의 모듈을 import하고, 변수에 styled.태그(div,span,a...) Template Literal안에 style을 지정해 주시면 됩니다. 직관적이고 컴포넌트 내에서 사용하기 때문에 CSS를 사용할 때 처럼 이곳저곳 뒤져볼 필요가 없겠죠?

import React from 'react';
import styled from 'styled-components';

function App() {
 return(
   <TestStyled>
     styled-components 사용하기 
   </TestStyled>
 ) 
}
const TestStyled = styled.div`
  font-size:50px;
  color: white;
  background-color: black;
`
export default App

---

본격 styled-components 사용하기!

본격적으로 저희가 만들고자 하는 반응형 웹 PC버전을 만들어 보겠습니다!
(그냥 에이블리가 문득 생각나 에이블리로 하였습니다... :0)

아마 그냥 복붙 하시거나 쭉 치시다 보면 ABLY부분에서 에러가 나실텐데 그건 사진 파일을 다운 받으셔야 합니다. 컴퓨터에 있는 아무사진도 좋고요. src디렉터리에 사진파일을 넣고 수정해 주세요 : )

//Nav.js
import React from 'react';
import ABLY from './ABLY.jpg'
import styled from 'styled-components'

function Nav() {
  return (
    <Common>
      <Home href='/'>에이블리</Home>
      <LogoImg src={ABLY}/>

      <ContlorBox >
        <Contlor href='/connect'>계약</Contlor>
        <Contlor href='/login'>로그인</Contlor>
        <Contlor href='/signup'>회원가입</Contlor>
      </ContlorBox>
    </Common>
  );
}

const Common = styled.div`
    display: flex;
    justify-content: space-between;
    margin: 20px;
`

const Home = styled.a`
    display: flex;
    align-items:center;
    font-size: 30px;
    margin 10px;
    text-decoration: none;
    color: black;
    font-weight: bold;
`
const LogoImg = styled.img`
    width:100px;
`


const ContlorBox = styled.div`
    display: flex;
    align-items:center;
`

const Contlor = styled.a`
    margin: 10px;
    text-decoration: none;
    color: black;
`
export default Nav

css는 다루지 안겠습니다! CSS 관련 댓글을 남겨주시면 빠른 시일내에 답변 드리겠습니다

---

결과물?

여기까지 저희가 계획했던 그림대로 잘 나온거 같습니다. 로고의 위치나 로그인 회원가입 모두 적절한 위치에 자리하고 있는거 같습니다. 허나.....만약 모바일로 들어오게 된다면..?

저희가 우려했던 부분이 발생했습니다.... 화면이 작은 모바일로 접속하게 되면 이쁘지 않은 화면이 나타나게 됩니다.. 아니야... 이건 이쁘지 않아.... 어떻게 할수 있을까.... 다음장에서 media-query를 활용해 사용자의 디바이스에 따른 반응형 웹 사이트로 업그레이드 시켜 보겠습니다!