Tips CSS(1)

1. <table> 태그의 너비 관리하는 방법

table {
  width: 400px; /* 100%; */
  table-layout: fixed; /* 고정 너비 레이아웃 */
  table-layout: auto; /* 자동 너비 레이아웃 (기본값) */
}

table th, td {
  width: 100px; /* 25%; */
}

2. CSS fallback

• 특정 브라우저나 버전에서 지원하지 않는 CSS 속성이나 값을 대체할 수 있는 방법을 제공합니다.

1. 벤더 프리픽스(Vendor Prefixes):
   • 아직 표준화되지 않은 기능을 특정 브라우저에서 사용할 수 있도록 하는 방법입니다.
   • 예를 들어, webkit-, moz-, ms-, o- 등의 벤더 프리픽스를 속성 앞에 붙여 사용합니다.
   • display: -webkit-flex; display: flex;와 같이 사용합니다.
2. @supports 규칙:
   • 특정 브라우저가 CSS 기능을 지원하는지 여부를 확인하고, 그에 따라 스타일을 적용할 수 있습니다.
   • @supports (display: flex) { ... } 처럼 사용합니다.
   • 조건문 내부에서는 지원되는 속성을, 외부에서는 fallback 속성을 정의할 수 있습니다.
3. 복합 속성 값 사용:
   • 여러 값을 한 번에 지정하여 브라우저가 지원하는 값을 사용하도록 할 수 있습니다.
   • 예를 들어 background: linear-gradient(...), fallback-color;와 같이 사용합니다.
   • 브라우저가 linear-gradient를 지원하지 않으면 fallback-color 값을 사용합니다.
4. 조건부 주석:
   • 일부 구형 브라우저에서만 CSS 코드를 적용하거나 무시하도록 할 수 있습니다.
   • <!--[if lt IE 9]> <style> ... </style> <![endif]--> 형태로 사용합니다.
   • 현재는 크게 사용되지 않지만, 레거시 브라우저를 지원해야 하는 경우 유용할 수 있습니다.
5. 자바스크립트 기반 폴리필(Polyfill):
   • 브라우저에서 지원하지 않는 기능을 자바스크립트로 구현하여 제공하는 방법입니다.
   • 예를 들어, flexbox 레이아웃을 구형 브라우저에서 사용할 수 있도록 해주는 폴리필이 있습니다.
   • 자바스크립트 성능 및 의존성 문제가 있을 수 있습니다.

3. nth-child, nth-last-child

• css에서 자식 요소를 선택하는 방법입니다.

  /* 짝수 번째 자식 요소 선택 */
  li:nth-child(2n) { ... }
  
  /* 3번째부터 5번째까지의 자식 요소 선택 */
  li:nth-child(n+3):nth-child(-n+5) { ... }
  
  /* 처음 3개의 자식 요소 선택 */
  li:nth-child(-n+3) { ... }
  

4. 마지막 요소의 스타일

• 보통 :last-child 선택자를 통해서 마지막 스타일을 지정하곤 합니다.

  li {
      border-bottom: 1px solid #e5e7eb;
  }
  
  li:last-child {
      border-bottom: none;
  }
  
  

• :not 선택자를 활용하면 한 줄로 처리할 수 있습니다.

  li:not(:last-child) {
      border-bottom: 1px solid #e5e7eb;
  }
  

• + 선택자를 사용한 접근(:not 이 더 명시적임)

  li + li {
      border-top: 1px solid #e5e7eb;
  }
  

5. :is 선택자를 활용해서 코드 가독성을 향상합니다.

• :is(h1, h2, h3) { ... } 와 같이 작성하면 h1, h2, h3 요소 전체에 스타일이 적용됩니다.
• :is(a[href], button) 와 같이 작성하면 a 태그 중 href 속성이 있는 요소와 button 요소 전체에 스타일이 적용됩니다.
• div.active, section.active, article.active 를 :is(div, section, article).active 로 사용 가능합니다.
• 브라우저 호환성이 문제인 경우, :matches() 선택자를 사용할 수 있습니다.