table 태그를 가지고 게시판을 만들다가 위 아래 모서리를 약간 둥글게 만들고 싶었다.
그런데 생각처럼 딱딱 만들어지지 않고, 시행착오를 거쳤다.
어떻게 구현했는지 기록하고자 한다.

문제 상황

우선 현재 table 상태는 아래와 같다.

모서리가 전부 다 직각인 것을 볼 수 있다.

이 때의 코드는 다음과 같다.

<table className="table-fixed w-full border-separate">
  <thead>
    <tr className="bg-[rgba(0,0,0,0.1)] h-[45px] 2sm:h-[50px]">
      <th
        scope="col"
        className="relative w-[200px] hover:bg-[rgba(0,0,0,0.2)] 2sm:w-[225px] sm:w-[300px] md:w-[400px] lg:w-[500px]"
        onClick={titleSortHandler}
      >
        제목
        <div className="absolute top-1/3 right-2">
          {titleSort ? <AiFillCaretUp /> : <AiFillCaretDown />}
        </div>
      </th>

      <th
        scope="col"
        className="relative hover:bg-[rgba(0,0,0,0.2)]"
        onClick={dateSortHandler}
      >
        날짜
        <div className="absolute top-1/3 right-2">
          {dateSort ? <AiFillCaretUp /> : <AiFillCaretDown />}
        </div>
      </th>

      <th
        scope="col"
        className="hidden relative hover:bg-[rgba(0,0,0,0.2)] 2sm:table-cell"
        onClick={likeSortHandler}
      >
        좋아요
        <div className="absolute top-1/3 right-2">
          {likeSort ? <AiFillCaretUp /> : <AiFillCaretDown />}
        </div>
      </th>

      <th
        scope="col"
        className="hidden relative hover:bg-[rgba(0,0,0,0.2)] sm:table-cell"
        onClick={commentSortHandler}
      >
        댓글
        <div className="absolute top-1/3 right-2">
          {commentSort ? <AiFillCaretUp /> : <AiFillCaretDown />}
        </div>
      </th>
    </tr>
  </thead>

  <tbody>
    {lectureList.map((item) => (
      <tr
        key={item.number}
        className="h-[45px] 2sm:h-[50px] odd:bg-[rgba(255,205,210,0.5)] odd:hover:bg-[rgba(255,205,210,0.8)] even:bg-[rgba(187,222,251,0.5)] even:hover:bg-[rgba(187,222,251,0.8)]"
        onClick={() => lectureClickHandler(item.number)}
      >
        <td className="truncate pl-2">{item.title}</td>
        <td className="text-center">{item.date}</td>
        <td className="text-center hidden 2sm:table-cell">{item.like}</td>
        <td className="text-center hidden sm:table-cell">{item.comment}</td>
      </tr>
    ))}
  </tbody>
</table>

그냥 전체 구조를 보여드리려고 코드를 가져온 것이고
핵심은 table 태그에 있다.

<table className="table-fixed w-full border-separate">

왜? 왜 이게 핵심인가?
필자는 table 태그에 테두리를 그리고, 그들을 넘어서는 영역을 overflow: hidden 처리를 해서 깎아내려고 한다.

step 1. 테두리 그리기

<table className="table-fixed w-full border-separate rounded-[20px] border-8">

대략 눈으로 보기 쉽게 border-8을 사용해서 테두리를 만들었다.
또한 rounded-[20px]을 줘서 테두리의 모서리를 둥글게 처리했다.
결과는 아래와 같다.

맨 위에서 봤던 table에서 모서리가 둥근 테두리만 추가된 것이다.
눈으로는 맨 위에서 봤던 직사각형의 모서리가 깎인 것처럼 보이지만,
그냥 그 위에 테두리가 그려져서 안 보이는 것일 뿐이다.
각각 따로 놀고있다.

step 2. 테두리 넘어가는 영역 지우기

<table className="table-fixed w-full border-separate rounded-[20px] border-8 overflow-hidden">

이번에는 overflow-hidden을 추가해서 테두리를 넘어가는 것들을 가려주었다.
눈으로 보이는 형태는 step 1과 같지만,
지금은 실제로 테두리와 겹치는 것들은 안 보이게 처리되었다.

step 3. 테두리 없애기

테두리 없애기? 테두리 없애면 기껏 처리해놓은거 무용지물 아닌가요?
아니다. 일단 살펴보자.

<table className="table-fixed w-full border-separate rounded-[20px] overflow-hidden">

달라진 것은 step 2까지는 있었던 border-8이 사라졌다는 것이다.
이렇게 해도 된다. 실제 적용된 화면을 보자.

짠! 이제 모서리가 둥글게 변했다!

결론

최종적으로 테이블의 모서리를 둥글게 만드는 법은 다음과 같다.

1. rounded 클래스 사용해서 원하는만큼의 곡률 가진 테두리를 생성할 것
2. overflow-hidden 클래스를 사용해서 테두리를 넘어간 모서리를 숨길 것

의아했던 것은 border-0으로 하든 border-8로 하든 상관없이 똑같이 적용된다는 것이다.
아마 rounded의 효과인 것 같은데...
의문이 생겼기 때문에 이에 대해 간단하게 짚고 넘어가자.

rounded만으로 테두리가 적용되는 이유

간단한 실험을 통해 이유를 알아봤다.
여기서는 html, css만을 활용해서 진행해봤다.

<button>버튼</button>

button 태그는 아래와 같은 형태를 가진다.

여기에 다음과 같은 CSS를 적용해보았다.

button {
  all: unset;
  background-color: black;
  color: white;
  border-radius: 30%;
}

all: unset을 통해 테두리와 배경색을 모두 삭제하고 진행했다.
핵심은 border-radius만 사용되었다는 것이다.
어떻게 되었을까?

짠! 순수 CSS에서도 border-radius 속성만 사용하는 것으로 테두리의 곡률을 표현할 수 있다는 것을 확인했다!

이로써 Tailwind에서 rounded 클래스만으로 테두리 적용이 가능했던 이유를 알게되었다.

참고 자료

갓디노님 블로그
JH님 블로그