오늘은 Tailwind CSS의 Border에 관련된 클래스들에 대해서 알아보도록 하자 :)

1. Border-Width

① 클래스명

• border : border 굵기 1px

• border-0 : border 없음

• border-2 : border 굵기 2px

• border-x : border 왼쪽, 오른쪽만 굵기 1px

• border-y : border 위쪽, 아래쪽만 굵기 1px

• border-l : border 중 왼쪽(Left)만 굵기 1px

• border-r : border 중 오른쪽(Right)만 굵기 1px

• border-t : border 중 위쪽(Top)만 굵기 1px

• border-b : border 중 아래쪽(Bottom)만 굵기 1px

전반적인 border-width의 클래스명은 아래와 같이 정리해 볼 수 있다!

• border-{방향}-{굵기}
  - 방향 : 생략가능
  - 굵기 : 생략가능 (0, 2, 4, 8의 굵기 가능)

찾다보니 한 부모 요소 내에 있는 자식 요소들 사이에만 border 를 추가해주는 흥미로운 클래스가 있었다!

• divide-x : 가로로 정렬된 자식 요소들 사이의 border 굵기 1px

• divide-y : 세로로 정렬된 자식 요소들 사이의 border 굵기 1px

주의할 점은 divide-* 클래스는 부모 요소에 적용해야 한다는 것!!

② 예

• 코드

• 결과

divide-*도 한번 적용해보자 😀

• 코드

• 결과

오호! 너무 편리한 것 같다 👍
더 알고 싶다면 Border Width 공식문서를 참고 하면 될 것 같다!!

2. Border-Color

Border Color 공식문서를 보면 알겠지만 색깔별로 굉장히 세세하게 클래스명이 설정되어 있다.
이를 일일이 다 소개할 순 없으니 기본적인 몇 가지만 소개해 볼까 한다 :)

① 클래스명

• border-black : border가 black으로 설정

• border-white : border가 white으로 설정

• border-x-black : border 중 왼쪽, 오른쪽만 black으로 설정

• border-y-black : border 중 위쪽, 아래쪽만 black으로 설정

• border-l-black : border 중 왼쪽(Left)만 black으로 설정

• border-r-black : border 중 오른쪽(Right)만 black으로 설정

• border-t-black : border 중 위쪽(Top)만 black으로 설정

• border-b-black : border 중 아래쪽(Bottom)만 black으로 설정

black, white 이외의 컬러는 아래와 같이 정리할 수 있다!

• border-{방향}-{컬러}-{투명도}
  - 방향 : 생략가능
  - 투명도 : Border Color 공식문서 참고

실제로 코드에 적용한 예를 보자!

② 예

• 코드

• 결과

3. Border-Style

border-style은 아래의 6가지가 있다

① 클래스명

• border-solid : border 실선

• border-dashed : border 점선

• border-dotted : border 도트

• border-double : border 이중 실선

• border-hidden : border 숨김

• border-none : border 없음

간단하니 dashed, dotted, double만 실습해보자!

② 예

• 코드

• 결과

글로만 봤을 때는 dashed와 dotted의 차이점이 체감되지 않았는데 결과물을 보니 확연한 차이가 난다!

4. Border-Radius

border-radius는 실제로 프로젝트를 진행할 때 굉장히 많이 쓰이는 스타일이었다.
border-radius도 어렵지 않다!

① 클래스명

• rounded : border-radius 4px

• rounded-none : border-radius 0px

• rounded-full : border-radius 9999px

• rounded-l : 왼쪽 border의 border-radius 적용

• rounded-r : 오른쪽 border의 border-radius 적용

• rounded-t : 위쪽 border의 border-radius 적용

• rounded-b : 아래쪽 border의 border-radius 적용

위처럼 방향을 l, r, t, b로만 설정하면 두 꼭짓점이 둥글어지는데
한 꼭짓점만 둥글게 하고 싶을 때는 어떻게 하면 좋을까?!

아래에 소개해 보겠다 😀

• rounded-tl : 위쪽, 왼쪽 border가 만나는 꼭짓점만 border-radius 적용

• rounded-tr : 위쪽, 오른쪽 border가 만나는 꼭짓점만 border-radius 적용

• rounded-bl : 아래쪽, 왼쪽 border가 만나는 꼭짓점만 border-radius 적용

• rounded-br : 아래쪽, 오른쪽 border가 만나는 꼭짓점만 border-radius 적용

전반적인 border-radius의 클래스를 정리하면 다음과 같다

• rounded-{방향}-{radius 정도}
  - 방향 : 생략가능
  - radius 정도 : 생략가능 (none, sm, md, lg, xl, 2xl, 3xl, full 가능)

이제 실제로 적용해보자!

② 예

• 코드

• 결과

🧐 그렇다면 지금까지 알아본 Border에 관련된 클래스들을 Hover, Focus 같은 States에 적용 할 수 있을까?!

5. Hover, Focus에 적용하기

① 문법

// 기본 문법
{states}:{적용할 클래스명}

// 예
hover:border-dashed

그럼 hover 됐을 때 border가 점선으로 바뀌는 코드를 짜 보자!

② 예

• 코드

• 결과

예상대로 결과가 잘 나오는 걸 볼 수 있다!
states에 스타일을 적용하는 것도 아주 쉽게 코딩이 가능하다 👍

6. 느낀점

Tailwind CSS를 제대로 실습해 본 건 오늘이 처음이었다.

여태껏 앞의 두 Tailwind CSS 포스팅을 하면서도 계속 느꼈던 점인
' Bootstrap 보다 훨씬 예쁜 디자인을 할 수 있겠다! ' 를
확신할 수 있는 시간이었다.

각 컬러별로 투명도가 하나하나 설정되어 있는 걸 보고 입을 다물 수 없었다..

또, Tailwind CSS 공식문서가 왜 친절하다고 했는지 그 이유도 알게 되었다.
각 컬러와 투명도의 조합의 개수가 어마어마한데 그 하나하나의 조합당 결과물를 일일이 다 표시해주고 있었다.

이번 시간으로 Tailwind CSS가 너무 극호감이 되었다 👍