좋아요!

CSS에서 @media 쿼리로 반응형 디자인을 구현한다.

@media (max-width: 768px) { }로 화면 크기에 따른 스타일을 적용합니다.

CSS에서 Flexbox의 기본 방향은 column이다.

Flexbox의 기본 flex-direction은 row(수평)입니다.

CSS에서 em 단위는 항상 16px이다.

em은 부모 요소의 font-size를 기준으로 합니다. 16px은 브라우저 기본값일 뿐입니다.

CSS에서 transition으로 속성 변경에 애니메이션을 적용할 수 있다.

transition: all 0.3s ease;로 속성 변경 시 부드러운 애니메이션을 적용합니다.

HTML에서 <div>는 인라인(inline) 요소이다.

<div>는 블록(block) 요소입니다. 인라인 요소의 예는 <span>, <a>, <strong> 등입니다.

CSS에서 contain: layout paint로 렌더링 성능을 최적화할 수 있다.

CSS Containment는 요소의 렌더링 범위를 제한하여 브라우저 최적화를 돕습니다.

HTML에서 <table> 태그로 표를 만들 수 있다.

<table>, <tr>, <td>, <th>로 표 구조를 만듭니다.

CSS에서 :hover는 가상 클래스(pseudo-class)이다.

:hover, :focus, :first-child 등은 가상 클래스입니다. ::before, ::after는 가상 요소(pseudo-element)입니다.

CSS에서 will-change 속성은 브라우저에 최적화 힌트를 제공한다.

will-change: transform은 브라우저에 해당 프로퍼티가 변경될 것임을 미리 알려 GPU 가속을 준비합니다.

CSS에서 specificity(특이성)는 id > class > element 순서이다.

특이성: inline(1000) > #id(100) > .class(10) > element(1). 같은 특이성이면 나중에 선언된 것이 우선합니다.