개인 프로젝트를 진행하며 CSS요소를 styled-components를 적용하였다.
현재 프로젝트 초기 진행 중이므로 조건부 스타일링을 사용하지 않지만 확장해 나가며 사용할 예정!!
import { BodyBox, BodyForm, BodyInputName, BodyLabel, BodyRegister, BodyRegisterButton, BodyTextArea } from 'Styles'
import React from 'react'
function Form() {
return (
<>
<BodyForm>
<BodyBox>
<BodyLabel>닉네임:</BodyLabel>
<BodyInputName placeholder='최대 20글자까지 작성할 수 있습니다.'></BodyInputName>
</BodyBox>
<BodyBox>
<BodyLabel>내용:</BodyLabel>
<BodyTextArea placeholder='최대 100글자까지만 작성할 수 있습니다.'></BodyTextArea>
</BodyBox>
<BodyBox>
<BodyLabel>멤버 선택</BodyLabel>
<select>
<option value={"카리나"}>카리나</option>
<option value={"윈터"}>윈터</option>
<option value={"닝닝"}>닝닝</option>
<option value={"지젤"}>지젤</option>
</select>
</BodyBox>
<BodyRegister>
<BodyRegisterButton>펜레터 등록</BodyRegisterButton>
</BodyRegister>
</BodyForm>
</>
)
}
export default Form
Stlyed-components란
- CSS-in-JS 방식을 사용하여 자바스크립트 코드로 CSS를 사용하는 것이다.
- 조건부 스타일링(if, switch, 삼항연산자 등)을 적용할 수 있다.