많은 시간을 절약해 줄 SS 트릭

CSS로 작업하는 것은 백엔드 개발자에게 항상 악몽입니다. 여기서는 프런트엔드 개발자에 맞서 음모를 꾸미고 프런트엔드 개발자조차 놓칠 수 있는 몇 가지 CSS 트릭을 배워 보겠습니다.

1. Flexbox의 센터링 트릭

유명한 센터링 div 문제부터 시작해 보겠습니다. 여기서는 flexbox를 사용하겠습니다. 절대 위치를 설정하거나 여백을 사용하여 작업할 필요가 없습니다. 다음을 수행하세요.

  .flex-center-demo {
    display: flex;
    justify-content: center;
    align-items: center;
  }

2. 빠른 그리드 자동 배치

탐색 모음이나 대시보드를 디자인하는 경우 이 정보가 필요합니다. 항목 컬렉션이 있고 함께 배치해야 하는 경우 이 항목을 사용하세요.

.auto-grid-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

최소 너비 120px의 상자로 행을 자동으로 채웁니다.

3. 인접 형제 선택자

이 기능은 인접한 요소, 즉 제목 아래에 작성자 이름과 같이 제목 뒤에 요소가 있는 경우에 유용합니다.

h2 + p {
    font-style: italic;
    color: blue;
  }

이미지는 다음과 같습니다.

4. 의사 클래스 not()을 활용하세요

일부 요소와 원 요소를 디자인할 때 예를 들어 다르게 디자인해야 하는 경우 이 기능을 사용하세요. 다음은 상자 모음의 예입니다. 특수 클래스에 속하는 세 번째 항목을 제외하고 CSS를 적용합니다.

.box:not(.special) {
    background-color: #3498db;
    color: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
  }

5. 전문가처럼 CSS 애니메이션 만들기

처음에 CSS 애니메이션을 올바르게 만드는 것은 약간 문제가 있습니다. 이러한 키 프레임을 사용하면 복잡한 애니메이션을 조정하거나 재사용하기 쉬운 단일 규칙으로 단순화할 수 있습니다.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-demo {
  animation: fadeIn 3s forwards;
  background-color: #e67e22;
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}

보너스 팁!

다음은 제가 항상 사용하는 추가 CSS 디버깅 트릭입니다. CSS를 망쳤다고 생각하고 무엇이 잘못되었는지 전혀 모른다면, 가지고 있는 모든 요소 주위에 이 상자를 배치해 보십시오. 이는 CSS 디버깅에 매우 유용했습니다.

/* Debug: Outline every element with a red border */
* {
  outline: 1px solid red !important;
}

이 기사가 도움이 되었기를 바랍니다. 제 이름은 Sreedeep이고 LiveAPI라는 도구를 개발 중입니다. AI를 통해 사람들이 API 문서를 효율적으로 생성할 수 있도록 돕는 것입니다.

위 내용은 많은 시간을 절약해 줄 SS 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!