overscroll-behavior:contain

: 현재 커서가 있는 스크롤에만 스크롤 집중

overflow:visible

:

overflow:hidden / auto

:

⚠️flex-grow, overflow 는 기준 너비가 있어야 적용이 된다.

⚠️overflow-x / overflow-y

text-overflow:ellipsis

: content 안의 텍스트가 많을 때 "..." 효과를 만들어 줍니다. (truncate 효과)

⚠️ CSS-Trick → truncate, line-clamp

⚠️ 함께 사용 : overflow: hidden / white-space: nowrap

text-align:left / center / right / justify

: 블록 요소나 표의 칸 상자의 text를 가로 정렬을 설정합니다.

vertical-align:left / center / right / justify

: 블록 요소나 표의 칸 상자의 text를 세로 정렬을 설정합니다. (table 에서 만 사용하는 걸 권장)

flex:inline-flex

: 플렉스 항목을 인라인으로 표시하지 않습니다. 플렉스 컨테이너 디스플레이를 인라인으로 만듭니다. 또한 플렉스 컨테이너의 길이는 플렉스 항목들의 길이 만큼만 가집니다.

flex-direction:row / column

:

flex-wrap:wrap / nowrap

:

flex-shrink:0 / 1

: flex 안의 해당 요소는 줄어듦 없음 (사용 시 다른 flex안의 요소가 줄어듦 - 늘어날 공간이 없으면)

flex-grow:0 / 1

: flex 안의 남은 너비는 지정된 니가 채워라 (0 이면 채우지 않음)

⚠️flex-grow, overflow 든 기준 너비가 있어야 적용이 된다.

white-space:nowrap

:

background-size:contain

:

appearance:none

: select box menu 화살표 제거

object-fit:cover

: 해당 이미지를 block의 크기의 중심에 맞게 채우기

⚠️ img 에 display: block, width: 100%; height: 100%

visibility:hidden / visible

시각적으로 존재하지 않는 상태 / 시각적으로 존재하는 상태

⚠️ display: none 과 visibility: hidden 차이

display: none 은 브라우저가 Rendering 할 때 DOM 트리 구성에서 제외 하지만,

visibility: hidden 은 DOM 트리 요소를 구성할 때 포함하여 Rendering 된다.

(visibility: hidden 은 보이지는 않지만 DOM 요소의 칸(공간)을 차지하고 있다.)

display:none / block / inline / inline-block

:

max-height:total content height sum

: 메뉴를 늘렸다 줄였다 하는 방법은 max-height 를 0 에서 클래스 .is-open 가 존재하면 max-height 에 매뉴안의 content의 height 를 모두 더한 값을 대입해 주는 방법으로 만든다.

(메뉴 안의 content 의 갯수가 고정이면 css의 @function 으로 높이 계산)

(메뉴 안의 content 의 갯수가 고정이 아니면 javascript 로 높이 계산)

transform:translateY(-50%) rotate(180deg)

: 기존 transform 에 속성이 존재한다면, 새로운 transform 을 선언할 때 기존 속성도 같이 작성해 주어야 한다. 기존 속성을 유지하여 적용이 가능하다. (콤마 구분 X)

⚠️ display: inline 속성에서는 적용 불가, block(inline-block) 요소만 적용 가능하다.

⚠️ transform: translate3d(x, y, z) 를 사용하면 더욱 부드러운 효과를 줄 수 있다.