다른 개발자들에게 더러워 보이게 만드는 4가지 CSS 트릭

CSS의 더러운 트릭은 매우 유용합니다. 16:9 비율을 만들기 위해 padding–bottom: 56.25%를 사용하지 않는 YouTube 플레이어는 어디에 있습니까? 나는 당신을 위해 내가 가장 좋아하는 더러운 트릭의 목록을 모았습니다!

1. 최소 마진

이것은 나에게 많은 더러운 모습을 보이지만 그것이 잘못된 것을 의미하지는 않습니다.
(상당히 큰) 간격이 있는 행에 너비가 다른 항목을 추가하는 경우 해당 항목이 더 이상 같은 행에 맞지 않을 때를 결정하기가 매우 어려울 수 있으며, 한쪽에만 여백을 사용하는 것도 엉망이 될 수 있습니다. 중앙에 있는 항목을 사용하거나 항목이 너무 빨리 파손되도록 합니다.

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2rem;
}

.column {
  margin: 10px 2rem 0; // ensures a 4rem gap between items
}

2. 클릭 가능한 영역 확장

앵커 태그( ::before )의 <a>와 같은 의사 요소는 부모의 클릭 가능성을 상속하므로 링크의 클릭 가능한 영역을 확장하는 데 사용할 수 있습니다.

클릭 가능한 영역에 대한 참조로 사용하려는 요소에 position: relative를 추가해야 합니다.

다음 예에서는 position: relative 전체에 .list-item, position: absolute , top , left & right 를 bottom 0 로 설정하여 의사 요소에 width: 100%; height: 100%;를 사용했습니다.


일부 개발자는 전체 목록 항목 주위에 앵커 링크를 추가합니다. 이것은 스크린 리더를 사용하는 사람들에게 정말 성가신 일입니다. 모든 텍스트에 대한 표준 링크 동작을 덮어쓰려면 text-transform 및 color 속성을 설정해야 하기 때문에 스타일 지정도 귀찮습니다.

이 트릭은 버튼에서도 작동합니다🤓

3. 쓰기 모드

Writing mode은 쓰기 방향을 설정하는 css 속성입니다. 이것은 물론 왼쪽에서 오른쪽과 다른 쓰기 방향을 가진 언어를 위한 것이며 90도 회전된 텍스트의 스타일을 지정하는 데에도 매우 유용합니다.transform를 사용하여 텍스트를 90도 회전하면 padding-left가 요소 상단에 표시되지만(아마도 예상할 수 있음) 컨테이너도 이상한 너비를 갖습니다. 텍스트를 클릭하면 아래 코드펜을 참조하세요. writing-mode: vertical-lr; 로는 이것을 얻을 수 없습니다. 변환 대신 쓰기 모드를 사용할 때의 가장 큰 단점은 두 쓰기 모드 사이의 회전을 애니메이션할 수 없다는 것입니다.

4. 바닥 패딩

어떤 이유로 padding-bottom에 백분율을 사용할 때 요소의 height가 아니라 width 를 기반으로 합니다. 이것은 사용 가능한 너비의 100%를 차지하기를 원할 수 있지만 해당 공간이 얼마나 넓은지 항상 정확히 확신할 수는 없기 때문에 YouTube 삽입 스타일을 지정하는 데 매우 유용합니다. height: 56.25% (16/9)를 사용하면 작동하지 않지만 padding-bottom: 56.25%를 추가하면 작동합니다!