프론트엔드 개발 팁 모음 CSS(2)

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

3. nth-child, nth-last-child

1. css에서 자식 요소를 선택하는 방법입니다.
2. /* 짝수 번째 자식 요소 선택 */ li:nth-child(2n) { ... } /* 3번째부터 5번째까지의 자식 요소 선택 */ li:nth-child(n+3):nth-child(-n+5) { ... } /* 처음 3개의 자식 요소 선택 */ li:nth-child(-n+3) { ... }

4. 마지막 요소의 스타일

1. 보통 :last-child 선택자를 통해서 마지막 스타일을 지정하곤 합니다.
2. li { border-bottom: 1px solid #e5e7eb; } li:last-child { border-bottom: none; }
3. :not 선택자를 활용하면 한 줄로 처리할 수 있습니다.
4. li:not(:last-child) { border-bottom: 1px solid #e5e7eb; }
5. + 선택자를 사용한 접근(:not 이 더 명시적임)

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

 

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

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