[MySchedule project] 17. styled components 사용하기 / Footer

이번 시간에는 styled components를 사용해서 Footer 영역을 간단하게 작성하겠다.
styled components는 "Css in Js"에 속한다.
그렇다면 css in js란 무엇인가?
스타일 코드를 작성할때 css파일에 작성을 하는것이 아닌 button과 같은 컴포넌트에 삽입하는 것으로, javaScript 또는 TypeScript 환경에서 스타일을 작성할 수 있다.
jsx또한 javaScript안에 html이 있는 문법처럼 Css in Js 또한 javaScript안에 css가 있다고 생각하면 쉽게 이해할 수 있다.

 

- styled components 설치와 import는 작성된 부분이 있어서 아래부분을 참고하면 된다.

 

https://devth.tistory.com/103

[Css-in-Js] styled-components를 이용한 toast 간단하게 꾸미기

 

[ src / layout / Footer / index.tsx ]

- p태그와 div 태그에 스타일이 적용된 컴포넌트를 생성했는데, 이걸 쓰는 이유는 스타일 코드의 중복성을 감소 시키기 위해서였다.

- 한번 스타일이 적용된 컴포넌트로 만들어놓으면 컴포넌트로 감싸기만 하면되서 훨씬 코드의 가독성을 높일 수 있다.

- 컴포넌트의 이름은 어떤스타일에 관련된 부분 또는 어떤 부분에서 주로 쓰이는 컴포넌트인지 예측 가능하게 작성하는 것이 좋다.
- 스타일이 적용된 컴포넌트 안에 또다른 스타일 요소를 줄 수 있다.

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

export const FooterP = styled.p`
  font-size: 14px;
  margin: 4px;
  color: #e2dada;
`;
export const FooterDiv = styled.div`
  pading: 10px;
  margin-top: 30px;
`;
const Footer = () => {
  return (
    <section className="my-20">
      <div className="flex justify-center gap-1 bg-gray-800 my-4">
        <FooterDiv className="w-3/12 h-56">
          <p className="text-lg text-white py-1">CONTACT</p>
          <FooterP>WRITER : Taeho Kim</FooterP>
          <FooterP>EMAIL : gmail.com</FooterP>
        </FooterDiv>

        <FooterDiv className="w-3/12">
          <p className="text-lg text-white py-1">INFO</p>
          <FooterP>COMPANY: VALUES </FooterP>
          <FooterP>주소 : 서울시 관악구 남현3길</FooterP>
        </FooterDiv>

        <FooterDiv className="w-3/12">
          <iframe
            className="w-full"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3166.378452457538!2d126.97978429999999!3d37.475394699999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca048dc566833%3A0xa6a4ff760d33e5df!2z7ISc7Jq47Yq567OE7IucIOq0gOyVheq1rCDrgqjtmIQz6ri4IDYx!5e0!3m2!1sko!2skr!4v1708327774415!5m2!1sko!2skr"
          ></iframe>
        </FooterDiv>
      </div>
    </section>
  );
};

export default Footer;

 

[ 결과화면 ]