Skip to content

Latest commit

 

History

History
58 lines (36 loc) · 1.7 KB

1011.md

File metadata and controls

58 lines (36 loc) · 1.7 KB

2022. 10. 11

tailwind와 css

width를 ref를 이용해서 가져오기

  1. width가 240으로 고정 값이었는데...
  2. 그러면 팔레트 박스 크기에 따라서... 자동으로 가져올 수 없나?
  3. table의 현재 width를 어떻게 가져오지?
  4. table을 useRef를 써서 가져오고
  5. tableRef.current?.clientWidth를 써서 width 프로퍼티를 꺼내면 되겠구나~

ref는 dom element를 가져오는 거~

useRef 리액트 beta 문서

const tableRef = useRef<HTMLTableElement>(null);

console.log(tableRef.current) // table 요소가 들어있음

const width = tableRef.current?.clientWidth ?? 480; // table 요소의 가로 길이(픽셀로)

<table ref={tableRef} className="selectedContainer w-full">

gap으로 간격 주기

이미지 둥글게 만들기

테마 선택

데이지 UI 테마 선택 문서

반응형 UI 만들기

화면 크기에 따라 width 비율이 달라지게

w-1/3 === width: 33.3333%;

w-1/2 lg:w-1/3 === 화면이 작을 때에는 width: 50% 커지면 width: 33.3333%;

w-full sm:w-1/3 lg:w-1/2 === 정말 작으면 width: 100% 화면이 좀 작을 때에는 width: 50%; 커지면 width: 33.333%;

화면 크기에 따라 가로 세로

flex-row === flex-direction: row 가로로 배치

flex-col sm:flex-row 화면이 sm보다 작으면 세로로 배치, 화면이 sm(핸드폰)보다 크면 가로로 배치

// 결과
<div className="w-full flex flex-col sm:flex-row pt-16 pb-16 gap-2">
  <div className="h-full w-full sm:w-1/2 lg:w-1/3">
    <img > {/* 프로필 사진*/}
  </div>
</div>