react에서 css 적용하는 방법
- 직접 jsx코드에 적어주는 방법
- style.module.css 파일을 만들고, className으로 사용하는 법
- styled component
1. 설치
npm i styled-components
2. 코드 자동완성 기능
vscode-styled-components Extension 설치
3. Styled Component 기본사용예제
// 1. styled를 import 함.
import styled from "styled-components";
// 2.html코드와 css코드를 사용해, 컴포넌트로 한번에 생성함.
// 변수명은 대문자로 해야함. (컴포넌트니까!)
const Father = styled.div`
display: flex;
`;
const Box1 = styled.div`
width: 100px;
height: 100px;
background-color: teal;
`;
const Box2 = styled.div`
width: 100px;
height: 100px;
background-color: tomato;
`;
const Text = styled.span`
color: white;
font-size: 30px;
`;
// 3. 컴포넌트 구현
function App() {
return (
<Father>
<Box1>
<Text>aaaa</Text>
</Box1>
<Box2>bb</Box2>
</Father>
);
}
export default App;
→ 출력결과
4. props , 컴포넌트 확장
import styled from "styled-components";
const Father = styled.div`
display: flex;
`;
// 1-2. 그 props를 컴포넌트에서 받아 사용함.
// 파라미터를 받는 함수를 적어줌. // props = {bgcolor : "teal"} 인 것!
const Box = styled.div`
background-color: ${(props) => props.bgcolor};
width: 100px;
height: 100px;
`;
// 2-1. 컴포넌트 확장 : 기존의 컴포넌트의 모든 것 + 새로운것 더함
// 기존의 Box 컴포넌트에 새로운 css 추가함.
const Circle = styled(Box)`
border-radius: 50%;
`;
const Text = styled.span`
color: white;
font-size: 30px;
`;
function App() {
return (
<Father>
{/*1-1. props를 통해 컴포넌트에 데이터를 보냄, */}
<Box bgcolor="teal">
<Text>aaaa</Text>
</Box>
{/* 2-2. Circle은 Box의 모든 것을 받고있는데, Box에서 propd으로 bgcolor 값을 받고있음.
따라서 Circle에도 prop으로 bgcolor을 줄 수 있는 것임.
*/}
<Circle bgcolor="tomato"></Circle>
</Father>
);
}
export default App;→ 출력결과
5. As
-
as : 컴포넌트에서 html요소만 바꿔서 사용하는 법
-
코드예제
: Btn컴포넌트에서 요소만 a요소로 바꿔서 사용함.
import styled from "styled-components";
const Btn = styled.button`
color: white;
background-color: tomato;
border-radius: 15px;
padding: 10px 20px;
font-size: 20px;
`;
function App() {
return (
<>
<Btn>click</Btn>
<Btn as="a" href="http://www.navercom">
click
</Btn>
</>
);
}
export default App;→ 출력결과
6. Attrs
-
Attrs : 컴포넌트에서 요소의 속성을 객체에 담을 수 있음
-
코드예제
: 5개의 input요소에 속성을 각각 지정하지 않아도, Input컴포넌트에서 한번에 속성을 지정하여 사용할 수 있음.
import styled from "styled-components";
const Input = styled.input.attrs({ required: true, minLength: 5 })`
background-color: teal;
`;
function App() {
return (
<>
<Input />
<Input />
<Input />
<Input />
<Input />
</>
);
}
export default App;→ 출력결과
7. Animations
- Styled Component에서 animations적용하는 법
import styled from "styled-components";
import { keyframes } from "styled-components";
// 1. keyframes``를 만듦
const Ani = keyframes`
0%{
transform: rotate(0);
border-radius: 0;
}
50%{
border-radius: 100px;
}
100%{
transform: rotate(360deg);
border-radius: 0;
}
`;
const Div = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: yellowgreen;
animation: ${Ani} 1s linear infinite;
// 2.컴포넌트 만들 때, 위에서 만든 keyframes를 갖다 씀.
`;
function App() {
return (
<>
<Div></Div>
</>
);
}
export default App;8.컴포넌트에서 자식요소를 target 하는 법
방법1. 컴포넌트 안에있는 (컴포넌트가 아닌)다른 자식요소를 target하는 법
-
Div컴포넌트에서 div요소의 자식 요소인 span를 선택할 수 있음.
(span은 컴포넌트가 아님) -
따라서 모든 요소를 다 컴포넌트로 만들 필요는 없음.
import styled from "styled-components";
const Div = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: yellowgreen;
// [방법1] Div컴포넌트 안에서 자식요소인 span요소 지정하기
span {
font-size: 40px;
}
`;
function App() {
return (
<Div>
<span>❤️</span>
</Div>
);
}
export default App;방법2. 컴포넌트 안에있는 (컴포넌트인)다른 자식요소를 target하는 법
- Div컴포넌트에서 div요소의 자식 요소인 Span 컴포넌트를 선택할 수 있음.
import styled from "styled-components";
const Span = styled.span`
font-size: 40px;
`;
const Div = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: yellowgreen;
// [P2] Div컴포넌트 안에서 자식요소인 Span컴포넌트
${Span} {
font-size: 60px;
}
`;
function App() {
return (
<Div>
<Span>❤️</Span>
</Div>
);
}
export default App;9. 가상 선택자(Pseudo selector)
- &를 쓰면 자기 자신요소를 지칭하게 됨.
- span:hover{} 로 쓰지 않고, span{}안에서 &를 쓰면 span을 지칭하게 됨.
import styled from "styled-components";
const Div = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: yellowgreen;
// div 자기 자신요소를 지칭
&:active {
background-color: gray;
}
span {
font-size: 60px;
// span 자기 자신요소를 지칭
&:hover {
opacity: 0.2;
}
}
/* 이 코드와 같음
span:hover {
opacity: 0.2;
} */
`;
function App() {
return (
<Div>
<span>❤️</span>
</Div>
);
}
export default App;
making-dev