동적으로 기존 속성 값을 변경은 어떻게 할까?
전환
--
전환은
한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것이다.
예시 코드
<style>
.red-box{
width:100px;
height:100px;
background-color:red;
}
.red-box:hover{
background-color:blue;
}
</style>
<!-- 생략 -->
<body>
<div class="red-box"></div>
</body>
위 방법처럼 :hover를 통해 빨간색 박스에 마우스를 올리면 파란색 박스로 변하는 것을 전환이라고 하는데
이러한 전환 효과를 직접 속성으로 지정할 수 있게 "전환 효과 속성"이 존재한다.
--
transition-property 속성
--
전환 효과를 적용할 대상 속성을 지정하는 속성이다.
기본 형식
transition-property: 속성값;
속성 값에는 전환 효과의 대상이 되는 속성명 or 정해진 키워드를 사용한다.
- 속성명
- none : 전환 효과 속성을 지정 X (기본 값)
- all : 모든 속성을 전환 효과 대상으로 지정
예시 코드
/* background-color 속성에 전환 효과 적용 */
transition-property: background-color;
/* 여러 속성에 전환 효과 적용 */
transition-property: background-color, color, width;
/* 개별 속성이 아닌 모든 속성에 전환 효과 적용 */
transition-property: all;--
transition-duration 속성
--
전환 효과의 지속 시간을 설정하는 속성으로 초 단위 값을 사용한다.
어떤 요소에 전환 효과를 지정하기 위해서는 반드시
transition-property와 transition-duration 속성을 함께 사용해야 한다.
기본 형식
transition-duration: 시간;
예시 코드
transition-property: background-color, color, width;
transition-duration: 1s, 500ms, 2s;- background-color 속성은 1초 동안 전환 지속
- color 속성은 0.5초 동안 전환 지속
- width 속성은 2초 동안 전환 지속
--
transition-delay 속성
--
전환 효과의 발생을 지연시키기 위한 속성이다.
(n초 뒤에 전환 효과 동작)
기본 형식
transition-delay: 시간;
예시 코드
transition-property: background-color;
transition-duration: 1s;
transition-delay: 1s;--
transition-timing-function 속성
--
전환 효과의 진행 속도를 지정하는 속성으로
속성 값으로는 정해진 키워드 or cubic-bezier() 함수를 사용한다.
기본 형식
transition-timing-function: 속성값;
예시 코드
.container .bar{
width:10px;
transition-property:width;
transition-duration:5s;
}
.container:hover .bar{
width:110px;
}
.bar:nth-child(1){
transition-timing-function:linear;
}bar 클래스를 가진 태그의 너비가 처음에 10px에서 5초 뒤에 110px이 된다.
이론상 1초에 20px씩 증가하는데 해당 증가하는 값의 속도를 transition-timing-function 속성으로 제어한다.
--
transition 속성 한 번에 정의하기
--
거의 모든 전환 효과 속성을 transition 속성을 통해 한 번에 작성 가능하다.
기본 형식
transition: property, duration, timing-function, delay;
예시 코드
transition-property:width;
transition-duration:1s;
transition-timing-function:ease-in;
transition-delay:1s;transition:width, 1s, ease-in, 1s;--
'Language > CSS' 카테고리의 다른 글
| [속성] 요소 자체(크기, 위치, 회전 등)를 변형하는 효과 속성 (0) | 2025.03.14 |
|---|---|
| [속성] 애니메이션 속성을 통해 전환 효과 제어 (0) | 2025.03.14 |
| [속성] 위치 관련 속성으로 요소 배치하기 (0) | 2025.03.06 |
| [속성] 요소의 배경 관련된 속성 (0) | 2025.03.06 |
| [속성] 박스 모델을 구성하는 속성 (margin, padding 등) (0) | 2025.03.05 |
