1. Styled Components💅
01. Styled-Components란?
React 컴포넌트에 CSS를 적용하는 방법은 많다. 그중에서 CSS 스타일링을 가장 효과적으로 하기 위해 만들어진 것이 바로 Styled-Components이다. Styled-Components는 props나 속성을 사용하여 스타일을 간편하게 관리할 수 있고, 별도의 CSS 파일이 필요하지 않아 유지보수가 용이하다.
02. Styled-Components 사용방법
- 설치
//npm
npm i styled-components
//yarn
yarn add styled-components- 사용
컴포넌트명(변수명)은 PascalCase로 작성한다.
//import
import styled from "styled-components";
const 변수명 = styled.html요소`
display:flex;
`
//적용 : 컴포넌트처럼 사용한다.
return (
<변수명 />
)03. props와 상속/확장
props를 사용하여 스타일 변경
컴포넌트에props값으로 css 속성을 설정한 후, Styled-Components에서${}를 사용하여 props 값을 넘겨주면 해당 css를 다양하게 적용할 수 있다.
//컴포넌트에 props 설정
const App = () => (
<Wrapper>
<Box bgColor="red" />
<Box bgColor="green" />
</Wrapper>
);
//Styled-Components에 ${}를 사용하여 props를 적용
const Box = styled.div`
width: 100px;
height: 100px;
background-color: ${(props) => props.bgColor};
`;- style 상속/확장
특정 컴포넌트의 스타일을 확장하여 새로운 컴포넌트를 만드는 것이 가능하다.styled(상속할 대상) `css`을 사용하여 스타일을 추가/수정할 수 있다.
//상속할 대상 : Box
const Box = styled.div`
width: 100px;
height: 100px;
background-color: ${(props) => props.bgColor};
`;
//상속 받을 대상 : Circle
//추가 및 수정이 가능하다.
const Circle = styled(Box)`
border-radius: 50%;
`;04. as와 attrs
as
Styled-Components의 html 요소를 바꾸고 싶을 때 사용한다.
//해당(아래) 컴포넌트를 다른 태그에도 똑같이 적용시키고 싶다면...
const Button = styled.button`
width: 100px;
height: 20px;
background-color: yellow;
`;
//보통 Button 컴포넌트
<Button> Normal Button </Button>
//<a태그>로 바꾼 Button 컴포넌트
<Button as="a" href="#"> Button to A tag </Button>attrs
컴포넌트에 일괄적으로 html 속성(attribute)을 넣고 싶을 때 사용한다.styled.html태그.attrs({})로 속성을 넣으며, 여러개의 속성을 한번에 넣을 경우,로 구분한다.
const Input = styled.input.attrs({ required:true, type:'text' })`
background-color: orange;
margin-right: 5px;
`;05. 애니메이션
애니메이션을 적용하려면 먼저 keyframes를 사용해 정의한 후, 이를 animation 속성에 적용해야 한다. 순서가 바뀐다면 에러 메세지가 출력된다.
keyframesimport
import {keyframes} from "styled-components";- 애니메이션 css 작성
const animation = keyframes`
//일반 css처럼 작성
0% {
background-color:red;
}
50%{
background-color:blue;
}
100%{
background-color:blue;
}
`;- Styled-Components에 적용
const Box = styled.div`
width: 100px;
height: 100px;
background-color: red;
animation: ${animation} 5s linear infinite;
`;06. 가상선택자
- 따로 작성
//예시 : Box 컴포넌트 안에 span태그를 두고, span태그에 hover를 주고 싶다면...
const App = () => {
return (
<Wrapper>
<Box bgColor={"#cf6a87"}>
<span>😊</span>
</Box>
</Wrapper>
);
};
//따로 작성하는 경우
const Box = styled.div`
생략...
span {
background-color: black;
}
span:hover {
background-color: white;
}
`;- Nesting 기법 :
&를 사용한 중첩
위 방법보다 이 방법이 더 가독성이 좋다.
//&을 사용하여 중첩하는 경우
const Box = styled.div`
생략...
span {
background-color: black;
&:hover {
background-color: white;
}
}
`;2. 전역 스타일링
01. CSS reset이란?
브라우저마다 서로 다른 CSS의 기본 default 서식( User-Agent StyleSheet )을 가지고 있다. 하지만, 우리는 작업한 결과물이 브라우저와 상관없이 같은 모양을 보여주기 위해 크로스 브라우징( Cross Browsing )이란 작업을 해주어야한다. 즉, 저마다 다른 브라우저의 기본 스타일을 리셋하여 하나로 통일하는 선행작업이 필요한데, 이를 CSS reset이라고 한다.
*크로스 브라우징 Cross Browsing이란? : 최대한 많은 종류의 웹 브라우저에서 정상적으로 작동하는 웹페이지를 만드는 방법론
02. 전역 스타일링이란?
모든 html 요소가 공통적인 스타일을 가지는 것을 뜻한다. 즉, 전역스타일을 사용하지 않는다면 각 페이지 마다 일일히 스타일링을 적용해야 된다.
03. CSS파일로 reset하기
에릭마이어의 CSS Reset에서 reset을 위한 CSS 속성을 확인할 수 있다.
아래는 내가 자주 사용하는 reset 속성을 정리한 것이다.
/* 전체 레이아웃 기본 스타일 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 리스트 스타일 제거 */
ul, li {
list-style: none;
}
/* 링크 밑줄 제거 및 기본 색상 상속 */
a {
text-decoration: none;
color: inherit;
}
/* 미디어 컨텐츠 크기 조절 */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
04. 전역 Styled-Component
위에서 진행한 CSS reset을 Styled-Component 라이브러리로 적용시키는 것이 전역 Styled-Component(GlobalStyles)이다.
전역 Styled-Component를 사용하기 위해선 위에서 알려준 "Styled-Components 설치"를 진행해야 한다. 그리고 createGlobalStyle로 생성하여 사용한다.
- 적용
//import
import { createGlobalStyle } from 'styled-components';
const GlobalStyles = createGlobalStyle`
*{
margin:0;
padding:0;
box-sizing:border-box;
color:inherit;
}
`
//적용 : 적용하려고 하는 컴포넌트 위에 작성한다.
return (
<GlobalStyles />
<div> example </div>
)Styled-Component 공식 문서
Styled-Component 참고 사이트 1
Styled-Component 참고 사이트 2
Styled-Component 참고 사이트 3
CSS reset 참고 사이트
전역 Styled-Component 참고 사이트 1
