📌

✨ 컬러리스트 사이트(아직 없음

tailwind와 css 사용

오늘도 이어지는 탈 pico.css의 시간..
이런 저런 css라이브러리를 사용하다보니 어느 라이브러리에서 적용되었는지
디펜던시를 관리하기 어려워 초반에 기본적인 css를 입힐 때 사용했던 pico.css를 없애고
tailwind.css와 daisy UI를 대신 적용하고 있는 중이다.

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

이전에는 with가 240으로 고정값이었는데, 반응형 디자인을 하기에는 고정된 값이 안맞기도 하고
두 개의 table이 서로 겹쳐있어 문제였다. 이 문제를 풀기위해 다음과 같이 ref를 이용해
현재 페이지의 가로 너비를 가져와서 table의 가로 너비를 정해주도록 변경했다.

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으로 간격 주기

margin이나 padding으로 간격을 주는 것보다
gap을 주는 게 더 좋다고 들어서 tailwind.css를 사용하면서 gap을 많이 적용해보았다.

이미지 둥글게 만들기

이것도 css파일로 했을 때는 border에 값을 주었는데
tailwind에서는 round-full로 주었다.

테마 선택

데이지 UI 테마 선택 문서 데이지 UI를 사용하면 여러가지 색상 테마를 선택해서 사용할 수 있는데
지금 화면은 노란색이 메인 컬러라서 bumblebee테마를 적용했다.

반응형 UI 만들기

tailwind로 반응형 디자인을 적용해보았다.

화면 크기에 따라 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>