아이콘만 있는 버튼에 이 텍스트 ​가 있는 이유는 무엇일까요?
btn only icon 스타일링에 영향을 주는데, 어떤 목적으로 사용되는지 궁금합니다 
pmusaraj이 이 PR에서 왜 그렇게 했는지에 대한 설명을 볼 수 있습니다:
이는 애플리케이션 전반에서 텍스트 입력 필드, 드롭다운, 버튼에 대해 일관된 크기를 적용합니다. 이러한 요소들은 종종 폼에서 함께 사용되며, 계산된 높이가 서로 다르면 많은 레이아웃 문제가 발생하기 때문에 중요합니다.
관련 코드:
ZeroWidthSpace를 사용하지 않고도 동일한 효과를 더 견고하게 달성할 수 있는 방법이 있을 것 같습니다.
말씀이 맞을 수도 있겠네요! 이건 2021년에 제출된 PR입니다. 2024년 이후에는 일관성을 보장하는 더 현대적인 방법이 있을 수 있습니다.
예, 이 부분은 이전에 논의해 본 적이 있고(다시 논의할 가능성도 높지만), 불행히도 모든 버튼에 min-height를 추가하는 것처럼 단순한 변경도 기존 테마에 더 큰 영향을 미칠 수 있습니다.
왜 최소 높이를 설정해야 하나요? 버튼에 드롭다운/입력 필드의 크기와 일치하는 기본 패딩/폰트(라인 높이 포함)를 적용할 수는 없나요?
점차 더 표준화된 상태로 나아가고 있으며, 그렇게 되면 이것이 가능해질 수 있다고 생각합니다. 하지만 줄 간격(line height)은 폰트에 따라 달라질 수 있습니다… 따라서 기본적으로 적용하는 어떤 설정이든, 테마가 다른 폰트로 변경되는 순간 일관되지 않은 높이를 초래할 수 있습니다.
제로-폭 공백(zero width space)은 줄 간격과 폰트가 변경되어도 텍스트가 없는 버튼이 텍스트가 있는 버튼과 유사한 동작을 보이도록 보장합니다(즉, 제로-폭 문자의 줄 간격이 텍스트가 있는 버튼과 마찬가지로 버튼의 높이에 영향을 미칩니다).
요소에 일관된 폰트를 사용한다면 동일한 줄 간격을 적용하여 다양한 폰트 줄 간격 문제를 방지할 수 있지 않을까요?
아니요. 텍스트가 없는 버튼은 line-height의 영향을 받지 않지만, 텍스트가 있는 버튼은 영향을 받으므로, 텍스트가 있는 버튼과 없는 버튼 사이에 일관성이 없기 때문입니다.
아이콘의 높이를 폰트의 줄 간격(line height)에 종속하지 않을 수 있을까요? 폰트 정보/토큰을 받아서 줄 간격을 아이콘 높이에 적용하는 @function을 상상해 봅니다.
그렇습니다. CSS의 lh 단위는 최신 브라우저에서 잘 지원되므로, 현재 줄 높이를 요소에 적용하는 것은 이제 꽤 간단합니다.
하지만 기존 테마를 깨뜨리지 않고 변경 사항을 적용하는 것의 복잡성에 대해서는 제가 알지 못합니다.