게시판 만들기 Review Html

<div> 태그로 묶기 <div>

export default function BoardsNewPage() {



  return (
    <div>Wrapper
      <div>Title</div>

      <div>WrapperWritePassword

        <div>WraprWriter
          <div>Label</div>
          <div>Writer</div>
        </div>

        <div>WrapPassword
          <div>Label</div>
          <div>Password</div>
        </div>
      </div>

      <div>WrapperSubject
        <div>Label</div>
        <div>Subject</div>
      </div>

      <div>WrapperContents
        <div>Label</div>
        <div>Contents</div>
      </div>

      <div>WrapperAddress
        <div>Label</div>
        <div>WrapZipcode
          <div>Zipcode</div>
          <div>SearchButton</div>
        </div>
        <div>Address</div>
        <div>Address</div>
      </div>

      <div>WrapperYoutube
        <div>Label</div>
        <div>YoutubeLink</div>
      </div>

      <div>WrapperPicture
        <div>Label</div>
        <div>WrapUpload
          <div>UploadButton</div>
          <div>UploadButton</div>
          <div>UploadButton</div>
        </div>
      </div>

      <div>WrapperSetting
        <div>Label</div>
        <div>WrapperRadio
          <div>WrapRadio
            <div>RadioButton</div>
            <div>RadioLabel</div>
          </div>
          <div>WrapRadio
            <div>RadioButton</div>
            <div>RadioLabel</div>
          </div>
        </div>
      </div>

      <div>WrapperSubmit
        <div>SubmitButton</div>
      </div>

    </div>



  )
}

 CSS-IN-JS

import * as S from '../../styles/emotionReview'

export default function BoardsNewPage() {




  return (
    <S.Wrapper>
      <S.Title>게시물 등록</S.Title>

      <S.WrapperWritePassword>

        <S.WraprWriter>
          <S.Label>작성자</S.Label>
          <S.Writer type="text" placeholder="이름을 적어주세요" />
        </S.WraprWriter>

        <S.WrapPassword>
          <S.Label>비밀번호</S.Label>
          <S.Password type="password" placeholder='비밀번호를 입력해주세요.' />
        </S.WrapPassword>
      </S.WrapperWritePassword>

      <S.WrapperSubject>
        <S.Label>제목</S.Label>
        <S.Subject type="text" placeholder='제목을 작성해주세요.'/>
      </S.WrapperSubject>

      <S.WrapperContents>
        <S.Label>내용</S.Label>
        <S.Contents type="text" placeholder='내용을 작성해주세요.' />
      </S.WrapperContents>

      <S.WrapperAddress>
        <S.Label>주소</S.Label>
        <S.WrapZipcode>
          <S.Zipcode type="text" placeholder='07250' readonly />
          <S.SearchButton>우편번호 검색</S.SearchButton>
        </S.WrapZipcode>
        <S.Address type="text" readonly />
        <S.Address type="text" />
      </S.WrapperAddress>

      <S.WrapperYoutube>
        <S.Label>유튜브</S.Label>
        <S.YoutubeLink type="text" placeholder='링크를 복사해주세요.' />
      </S.WrapperYoutube>

      <S.WrapperPicture>
        <S.Label>사진 첨부</S.Label>
        <S.WrapUpload>
          <S.UploadButton>+</S.UploadButton>
          <S.UploadButton>+</S.UploadButton>
          <S.UploadButton>+</S.UploadButton>
        </S.WrapUpload>
      </S.WrapperPicture>

      <S.WrapperSetting>
        <S.Label></S.Label>
        <S.WrapperRadio>
          <S.WrapRadio>
            <S.RadioButton type="radio" name='radioButton'></S.RadioButton>
            <S.RadioLabel>유튜브</S.RadioLabel>
          </S.WrapRadio>
          <S.WrapRadio>
            <S.RadioButton type='radio' name='radioButton'></S.RadioButton>
            <S.RadioLabel>사진</S.RadioLabel>
          </S.WrapRadio>
        </S.WrapperRadio>
      </S.WrapperSetting>

      <S.WrapperSubmit>
        <S.SubmitButton>등록하기</S.SubmitButton>
      </S.WrapperSubmit>

    </S.Wrapper>



  )
}