테일윈드에는 border와 outline 그리고 ring까지, 테두리를 줄 수 있는 스타일 기능이 많다.
생각없이 이것 저것 사용하다가 정확한 차이가 뭐지? 싶었고
앞으로의 코드 일관성과 혼동을 줄이기 위해 정확하게 정리해보았다.
border vs outline
border와 outline은 테일윈드의 고유 기능이 아니기 때문에 기본적인 CSS에서 차이가 있다.
그 차이를 알아보기 위해,
100x100px의 기본 box, border를 적용한 box, outline을 적용한 box를 만들었다.
<div className="w-[100px] h-[100px]">none</div>
<div className="w-[100px] h-[100px] border-[10px] border-sky-400">border</div> //border-[10px]
<div className="w-[100px] h-[100px] outline outline-[10px] outline-sky-400">outline</div> //outline-[10px]
한 눈에 봐도 차이가 있었다. 왜 이런 차이가 생겼을까?
border
border는 CSS의 box model에 직접 적용된다.
즉, border는 요소의 일부가 된다.
스타일창의 box model을 확인하면 content의 크기가 각 border 테두리만큼 빠져 80x80px을 차지하는 것을 확인할 수 있다.
outline
outline은 box model의 일부가 아니며, 요소의 크기에 영향을 주지 않는다.
즉, outline은 요소 바깥에 그려지는 선이다.
스타일창의 box model을 확인하면 content의 크기가 그대로 100x100px을 차지하는 것을 확인할 수 있다.
border은 요소에 포함되고, outline은 요소에 포함되지 않는 바깥에 그려지는 선이기 때문에,
이러한 특징을 활용하면 border위에 outline을 그려 이중선을 그릴 수 있다.
<div className="w-[100px] h-[100px] border-[10px] border-sky-400 outline outline-[10px] outline-amber-200"></div>
또한 border는 outline과 달리
border-top, border-left 등 각각 테두리를 따로 지정할 수 있고, solid, dotted 등 선의 스타일을 지정할 수도 있다.
ring vs outline
그렇다면 다시 테일윈드 얘기로 돌아와서, outline과 ring의 차이는 뭘까?
테일윈드 사이트에서 확인해보면,
ring은 box-shadow를 활용한 style이다.
이렇게 보면 감이 안오기에 같은 방법으로 box를 각각 만들어 ring과 outline의 차이를 알아보았다.
<div className="w-[100px] h-[100px]">none</div>
<div className="w-[100px] h-[100px] ring-[5px] ring-sky-400">ring</div> //ring-[5px]
<div className="w-[100px] h-[100px] outline outline-[5px] outline-sky- 400">outline</div> //outline-[5px]
이리저리 수치를 바꿔보며 확인해봐도 ring과 outline의 표면적인 차이는 없었다.
ring도 outline과 동일하게 요소에 포함되지 않고, 사이즈나 포지션에 영향을 주지 않는다.
그렇다면 테일윈드에서 ring을 따로 만든 이유가 뭘까?
아무리 찾아봐도 명확한 답이 나오지 않길래 chat gpt한테까지 물어봤다 ^^..
답은 시맨틱!
시맨틱한 코드는 그 자체로 의미를 가지며, 그 의미가 코드의 기능을 설명한다.
이는 코드를 작성하고 읽는 사람들이 코드를 이해하기 쉽고, 코드의 목적과 의도를 명확히 전달할 수 있다.
예를 들어, div 대신에 header, footer, section과 같은 의미 있는 HTML 태그를 사용하는 것처럼 시맨틱한 의도였다.
outline은 주로 요소의 전체 윤곽을 강조하는 데 사용되고, ring은 포커스 상태를 나타내는 데 사용된다.
<button class="focus:ring-2 focus:ring-blue-500">Click me</button>신경써야지 신경써야지 하면서도
기능 구현에 급급해서 소홀하고 있던 시맨틱한 코드에 대해 다시 한번 생각하게 된 시간이였다...
