[웹서비스 개발팀] React, TailwindCSS

테일윈드CSS
flex, daisyuiCSS
React Hook

리액트

https://tailwindcss.com/

검정색rgb(0,0,0) #000000 hsl(0, 100%, 0) rgba(0,0,0,0.4) //a투명도 bg-black/70 text-white
흰색rgb(255,255,255) #ffffff
빨간색rgb(255,0,0) #ff0000 hsl(0, 100%, 50%)
글자크기 text-xs/sm/base/lg/xl/2xl...5xl
글자굵기 font-thin/light/normal/medium/bold/black
글꼴 italic/non-italic
텍스트 정렬 text-left/right/justify/..

박스모델
높이 h-숫자
너비 w-숫자
content
padding p-숫자 p(xytlrb)-10,px,py,pt,pl,pr
border border-숫자 border-t-숫자
border-solid, border-dash, border-dotted
margin m-숫자 ml, mr, mt, mb
rounded-2xl, rounded-b-2xl
visible, invisible
position:absolute; =>absolute,relative
z-index:0; (낮은게 위로 올라감) => z-0, z-auto

import {Title} from "../components";
import * as D from "../data";

const sentence = D.randomSentence(10);
export default function PaddingTest() {
  return (
    <section className='mt-4'>
      <Title>PaddingTest</Title>
      <div className='p-8 '>
        <div className="mr-5 ml-5 p-3 border-5 border-red-700 text-white bg-pink-600">
          <p>{sentence}</p>
        </div>
        <div className="p-10 mt-2 border-lime-700 border-5 text-white bg-yellow-500">
          <p>{sentence}</p>
        </div>
      </div>
    </section>
  );
}

import {Title, Div,Avatar } from "../components";
import *as D from "../data";

export default function AvatarTest() {
  const avatars = D.range(0,10).map((index) => (
    <Avatar className="inline-block -ml-6 border-4 border-white" key={index} src={D.randomAvatar()}></Avatar>));
  return (
    <section className='mt-4'>
      <Title>AvatarTest</Title>
      <div className='px-12 py-4 m-8 bg-blue-300'>{avatars}</div>
    </section>
  );
}

import {Title, Div, Icon, Overlay} from "../components";

export default function OverlayTest() {
  return (
    <section className='mt-4'>
      <Title>OverlayTest</Title>
      <Overlay opacityClass='bg-black/70'>
        <Div className = "relative flex items-center justify-center p-8 bg-white h-1/2">
          <Div className = "absolute" right="1rem" top= "1rem">
            <Icon name = "close" className="text-gray-500"></Icon>
          </Div>
          <p className="text-5xl">modal dialog box</p>
        </Div>
      </Overlay>
    </section>
  )
}