11.16.2024(토) 제가 뭘 또 찾아봤냐면요. Today I Learned

1. [ tailwind.css ] ring, border, outline,  그리고 width 관계 

ring이라는 못 봤던 테일윈드 문법을 봐서 외곽선 관련 테일윈드 문법들을 찾고 개념들을 정리했습니다. ring은 테일윈드가  box-shadow문법을 이것저것 속성값을 넣어서 외곽선 스타일을 구현한 거라네요. css 문법에는 ring이라는 속성이 따로 없습니다. 찾다 보니  오버플로우 사이트에 이와 관련된 질문(outline과 ring의 차이가 뭔가요)의 답변 중 흥미로운 부분이 있었습니다. "과거에 box-shadow으로 외곽선을 만드는 것을 선호했다. 그 이유는  outline(윤곽선)은 요소의 테두리 외부에 있는 선이고 공간을 차지하지 않고 테두리 반경을 따르지 않기 때문이다. 하지만 지금은 따르고 있다."라고 하더라고요.??! 지금은 따르고 있다고? 해서 mdn을 찾아봤는 데 mdn에는 그런 말 없더라고요.  짜게 식었습니다. 아 그리고 border는  box-sizing을 주지 않는 한 width값 과 합산해 content 너비로 포함된다는 점 주의해야겠습니다.  box-sizing: border-box; 전역 코드의 익숙함에 젖어  border 1~2 cm 로 퍼블리싱 틀어지는 눈물을 흐리지 않으려면요. 아 그리고 height 값을 안 주거나, height값을 줬는데 해당 영역에서 border를 적용했을 때 content 가 넘치면 border 가 적용이 안 되는 이슈가 있는 거 같더라고요? (정확한 건 아님) 그래서 이 점도 유의해야겠습니다. 

 

- focus-within:ring-2 focus-with:ring-red-400

- focus-within:border-2 focus-with:border-red-400

- foucus-within:outline-2 focus-within:outline focus-with:outline-red-400

 

 

 

2. [ tailwild ] 기본 spacing 스타일

요소에 높이 값을 적용할 때,  h-18 , h-19 로 적용할 때는 높이값이 변하지 않다가 h-20시 높이값이 h-20으로 제대로 커지는 것이 의아했어요. 그래서 찾아보니 tailwind에는 기본 spacing 스타일이 있었다는 걸 까먹고 있었네요.  기본적으로 포함되지 않는 값인  h-18 , h-19  는 자동으로 무시되며 원할 때는 사용자 정의 클래스로 추가해야 한다는 걸 명심해야겠습니다.  또 테일윈드 공식문서를 다시 한번 읽어 보는 시간을 가졌습니다. 

• h-16: 4rem (64px)
• h-20: 5rem (80px)
• h-24: 6rem (96px)