이 내용은 부모님과 조카가 자동차에 대해 A부터 Z까지 살펴보려고 방에 들어가는 모습에서 영감을 받았습니다.

접근성

많은 사람들이 잊어버리는 것이 있지만, 저는 대응만큼 중요하다고 생각합니다.

B 블록

쓰기 방향에 수직입니다.

C 계산

CSS에서 계산을 수행합니다. 매우 편리합니다.

D 디스플레이

블록, 인라인, 인라인 블록, 플렉스, 인라인-플렉스, 그리드, 인라인 그리드, 없음 등

E : 비어 있음

자식 없이 요소를 스타일링하는 데 유용한 의사 클래스입니다. 공백이 없는 한.

F 플렉스박스

처음 CSS를 시작했을 때 Inspector를 보고 이것저것 가지고 놀면서 배웠습니다. 그런 다음 플로트를 사용하여 레이아웃을 만든 사람을 복사했습니다. 그리고 물건을 배치하는 것이 너무 어려웠습니다. Flexbox에 대해 배운 것이 큰 변화를 가져왔습니다.

G 그리드

Flexbox가 더 복잡하고 더 강력한 형제처럼 느껴지네요.

H 높이

수평으로 차지하는 공간입니다.

나는 인라인

글쓰기 방향입니다. margin-inline: auto.

J 정당화

Flexbox Zombies에서는 정당화 레이저를 사용하여 발사 방향에 있는 좀비를 타겟팅합니다.

K @키프레임

애니메이션 단계.

L 선 높이

텍스트가 너무 크거나 작으면 전혀 읽을 수 없게 보일 수 있습니다.

M마진

요소를 더 크게 만들지 않는 요소 주위의 공간입니다.

없음

무언가 표시를 중지하거나 테두리를 제거하는 데 유용합니다.

아 객체핏

오래전부터 있었던 것 같지만, 비교적 최근에 발견한 사실입니다. 여기에는 object-fit이 새롭고 아직 모든 브라우저에서 작동하지 않는 문제에 대처하기 위해 누군가가 작성한 일부 JavaScript가 포함되어 있습니다.

P 패딩

요소를 더 크게 만드는 요소 주위의 간격입니다. 음수 패딩은 음수 여백과 다릅니다.

Q 쿼리

미디어 쿼리와 컨테이너 쿼리는 반응형 디자인과 접근성에 사용됩니다.

R 반응성

사이트가 모든 화면에 맞는지 확인하는 것이 중요합니다. 매우 기본적인 것처럼 보이지만 일부 크기에 제대로 맞지 않는 사이트가 많이 있습니다.

S 특이성

제3자의 스타일을 재정의하려고 할 때 이것이 고통스럽습니다. 최근에 :where를 사용하는 일부 CMS 플러그인을 본 적이 있는데, 이는 많은 도움이 됩니다.

T텍스트

때때로 글꼴 스타일에 사용됩니다. 그리고 때로는 글꼴을 사용하기도 합니다. 단, 텍스트 색상을 변경하려는 경우는 둘 다 아닙니다.

U 단위

가장 많이 사용되는 것은 %, px, em 및 rem입니다. 또한 그리드의 fr과 전환 및 애니메이션의 s 및 ms도 있습니다.

V 가시성

흥미롭네요. 보이는 것의 반대는 숨겨져 있습니다. 논리적으로 생각하는 것과는 다릅니다.

W폭

수평으로 차지하는 공간입니다.

X 오버플로-x

x에 대한 약간의 치트이지만 x로 시작하는 것은 없습니다. 이는 수평 오버플로를 제어합니다. x는 Tailwind에도 사용됩니다. 예를 들어 mx는 가로 여백입니다.

Y 오버플로-y

x와 마찬가지로 수직 오버플로를 제어합니다. 그리고 y는 일반적으로 Tailwind에서 수직을 나타냅니다.

Z z-인덱스

사용할 수 있는 최고/최저 Z-지수는 (-)2,147,483,647입니다. 아니면 무한대가 당신에게 똑같은 것을 줄 것입니다. 하지만 9를 입력한 다음 왜 작동하지 않는지 궁금해하는 것이 훨씬 간단한 방법입니다.