TIL 26. 2024-02-01

이준구·2024년 2월 1일
0

TIL 순서

목록 보기
26/119
post-thumbnail

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

profile
개발 중~~~ 내 자신도 발전 중😂🤣

0개의 댓글

관련 채용 정보