TIL 26. 2024-02-01

개인 프로젝트를 진행하며 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, 삼항연산자 등)을 적용할 수 있다.