CSS 공부-N차

CSS의 길은 정말 끝이 없다.
늘 새로 알게 되고 시행착오 끝에 깨닫게 된다.

svelte, tailwind, tailwindcss-typography 환경에서
알게 된 것들 or 짚고 넘어갈 것들:

---

table-layout: fixed + width: 100% 와
table-layout: fixed + min-width: 100% 의 컬럼 너비 계산

table-layout: fixed의 기본 규칙:
컬럼 내 콘텐츠 양과 무관하게 테이블의 너비값을 가지고 분배.
전제 조건은, 테이블의 “width가 확정되어 있어야”

width: 100%의 경우 너비값이 고정되어있지만
min-width: 100%은 "최소 너비" 조건일 뿐, 콘텐츠에 따라 유동적이기 때문에 테이블 너비를 확정할 수 없음.

✍ 너비가 확정되지 않은 fixed 테이블은 auto처럼 동작한다.

---

CSS 셀렉터(의사 클래스) :valid :invalid

입력 이벤트 발생 시에 유효성 검증에 대한 추가 처리가 필요하다면, Key 이벤트를 통해 클래스를 부여/제거하는 등 직접 구현하겠지만 단순 스타일을 적용하기엔 부족함이 없다.

다만, 기본적으로 아무것도 입력하지 않은 상태 또한 :valid로 간주되기 때문에, UI에 따라 입력값 여부에 따른 분기 처리가 필요하다.

🎨CASE별 보더 색상

• 입력 전(입력값 비어있음) --color-base
• 입력 후
  • ✅통과 --color-primary
  • ⛔실패 --color-error

💻구현 내용

<div
 class="border-base has-disabled:bg-surface focus-within:border-primary
  {value ? 'has-valid:border-primary has-invalid:border-status-error' : ''}
 "
>
 <input bind:value={value} {disabled} {pattern} />

반응형 및 디자인 이슈로 style을 부모 div 요소에 주어야 했고,
위와 같이 Tailwind 유틸리티 클래스를 사용하기 위해
아래와 같이 사용자 정의 has-* 수정자를 추가해주었다.

@custom-variant has-enabled (&:has(:enabled));
@custom-variant has-disabled (&:has(:disabled));
@custom-variant has-valid (&:has(:valid));
@custom-variant has-invalid (&:has(:invalid));

다만💥
한가지 애를 먹었던 부분은
Tailwind 수정자 뒤에는 유틸리티 클래스만 적용할 수 있어서
has-invalid:custom-class 처럼 별도로 정의된 사용자 클래스는 의도대로 동작하지 않았다.

---

상황: Flex 영역 내에 3가지 요소가 나란히 있다.

• input radio
• label > strong + span
• 툴팁 버튼

[고정(16px)]-[나머지]-[고정(20px)] 의 레이아웃이다.

<div class="flex">
 <input type="radio" />
 <label class="flex-auto">
  <strong class="truncate">제목</strong>
  <span class="truncate">내용</span>
 </label>
 <button>❔</button>
</div>

제목/내용의 텍스트가 길어질 경우,
내부 텍스트가 줄바꿈 없이 커지면서 버튼 요소를 영역 바깥으로 밀어냈다. 이유는:

기본적으로 flex item 은 min-width: auto 속성을 갖는다.
"내 내용이 잘리지 않을 정도로 최소 너비를 확보하려 함"

✨ 방법은? min-width: 0

<div class="flex-auto min-w-0">

flex item이 내부 텍스트 길이 때문에 덩치를 키우지 못하도록, 남은 공간 안에서만 처리하도록 한다.
👍 제목/내용의 줄바꿈 정상 작동
👍 버튼은 더 이상 밀려나지 않음!