[Styled-Components] 이미지 불러오기

이미지 파일 불러오기

1. src 폴더내 assets 폴더 생성
2. 원하는 이미지 assets 폴더 내에 위치
3. 파일 불러오기
   import LogoImg from "../assets/이미지이름.파일형식";
4. img src로 연결시키기
   <img src={LogoImg} alt="logo-img"/>

background-image 적용하기

import backgroundImg from "../assets/파일이름.파일형식";


const Container = styled.div`
	background-image: url(${backgroundImg});
	background-repeat: no-repeat;
	background-size: cover;
`

img 적용하기

import smileImg from "../assets/smile.png";

const UserMainImg = styled.img.attrs({
  src: `${smileImg}`,
})`
	생략...
`;

Link styled-components 적용

const NavLink = styled(Link)`
	생략...
	`

Navbar styled-components 예제

import LogoImg from "../assets/logo.svg";
import styled from "styled-components";

const NavContainer = styled.div`
	display: flex;
  	flex-direction: column;
	생략...
	
	& bottun {
	생략...
	
	&:hover {
	  }
	}
	
	@media (min-width: 700px) {
	}
`

const LeftContainer = styled.div`
	flex: 40%;
	생략...
`

const RightContainer = styled.div`
	flex: 60%;
	justify-content: flex-end;
	padding-right: 3em;
	생략...
`

const NavLink = styled(Link)`
	생략...

  &:hover {
	생략...
  }
`

function Navbar({ isLogin }) {
  
	return (
      <NavContainer>
      
      	<LeftContainer>
      		<Link to="/">
      			<img src={LogoImg} alt="logo-img"/>
      		</Link>
      	</LeftContainer>

		<RightContainer>
      		{isLogin ? (
             <NavLink to="/about"> ABOUT</NavLink>
             <NavLink to="/myPage"> MY PAGE</NavLink>
             ) 
             : (
				<NavLink to="/about"> ABOUT</NavLink>
             	<NavLink to="/myPage"> MY PAGE</NavLink>
             )}
      	</RightContainer>
		
      </NavContainer>
    )
}