HTML/CSS - Stacking Context, Transition 속성

apppiel·2025년 2월 28일

CSS Stacking Context (스태킹 컨텍스트) 정리

👉 요소들이 쌓이는 하나의 독립적인 레이어

스태킹 컨텍스트 안에서는 자식 요소들이 특정 규칙에 따라 쌓임.

부모 요소가 새로운 스태킹 컨텍스트를 생성하면, 자식 요소들은 부모의 범위 안에서만 z-index가 적용됨.

.like {
position: relative; /* or absolute, fixed **/
z-index: 1; /* 0이 아닌 값 */
}

.lion {
opacity: 0.9; /* 투명도가 1보다 작으면 스태킹 컨텍스트 생성 */
}

CSS transition은 속성 변경 시 부드러운 애니메이션 효과를 주기 위해, 속성, 지속 시간, 지연 시간, 타이밍 함수를 설정하는 기능

transition-property
- 어떤 CSS 속성을 애니메이션할지 결정
- 예: background, border-radius
- 여러 속성을 쉼표로 구분해서 지정 가능
transition-duration
- 애니메이션이 얼마나 오래 지속될지 설정
- 단위: 초(s) 또는 밀리초(ms)
- 예: 0.5s, 2s
transition-delay
- 애니메이션 시작 전에 얼마나 지연할지 설정
- 여러 속성에 대해 각기 다른 지연을 지정할 수도 있음
- 예: 0s, 0.2s (첫 번째 속성은 바로 시작, 두 번째는 0.2초 지연)
transition-timing-function
- 애니메이션의 속도 곡선(가속/감속)을 결정
- 기본값: ease
- 기타 값: linear, ease-in, ease-out, ease-in-out
transition

위의 모든 속성을 한 줄로 단축해서 지정할 수 있음

transition: background 2s 0s ease, border-radius 2s 0s ease;

모든 속성을 적용하고 싶을 때

transition: all 2s;

프론트엔드 개발일기