3.17 ~ 3.19, 4.0~4.4
3. LEARNING CSS
3.17 States
가상선택자
▶️ 선택한 요소의 상황에 따른 스타일 적용 _ 태그뒤에 :로 적용
:active: 마우스 클릭되었을때
:hover: 마우스 커서가 올려져 있을때
:focus: 키보드로 선택되었을때
:visited: 방문기록이 있는 사이트의 링크
:focus-within: focus 상태인 자식을 가진 부모요소 (부모요소에 적용)
💡 다른요소와 연계해서 사용 할 수도 있다.
▶️ 예 ) form:hover input:focus {}
: form이 hover 되어있고 input이 focused일 때 두번째 태그인 input에 스타일 적용. (두 조건이 모두 만족되어야 스타일 적용됨.)
3.18 States
가상선택자 복습
태그[속성="값"]{}속성="값"인 태그 선택
태그[속성~="값"]{}"값"을 포함하는 태그선택
태그[속성$="값"]{}끝에 "값"이 오는 태그 선택
태그[속성^="값"]{}앞에 "값"이 오는 태그 선택
태그::placeholderplacehoder에 스타일 주기
태그::selection드래그 했을때
태그::first-letter앞 글자에
태그::first-line첫 줄
3.19 Colors and Variables
반복되는 스타일을 변수로 지정해서 사용하기
▶️ 반복되는 스타일이 사용 될 때, 변수로 저장해서 쓰면 일일이 지정하고 수정 할 필요없음
:root{}에 속성을 변수로 저장!
< 작성법 >
- 색상:
--main-color:- border :
--default-border:
< 사용법 >태그 {color:var(--main-color);}태그 {border:var(--default-border);}
4. ADVANCED CSS
4.0 Transitions
상태의 변화를 애니메이션으로 만드는 방법
transition:+변화될 속성+변화에 걸리는시간
ex) transition:background-color 10s >> 배경색이 10초동안 바뀜.
- state가 없는 요소에 입력해야하며 state가 있는 요소에 변화후의 속성을 추가해주어야함.
ex)
a{transition:background-color 10s} ;
a:hover {transition : background-color:tomato}
- 속성자리에
all을 사용하여 변화하는 모든것에 transition을 한번에 줄 수 있다.
ex)a{transition:all 10s} ;
- 여러 스타일에 에니메이션을 주고 싶다면, 사이에
,로 연결
ex)
transition : color 1s,border-radius 2s ;
4.1 Transitions part Two
ease-in function
▶️ 브라우저에게 애니메이션이 어떻게 변할지 말해주는것.
transition: 속성 지속시간 easefunction
디폴트로 저장되어 있는 효과
linear 일정한 속도
ease-in 속도가 느림에서 빠름
ease-out 속도가 빠름에서 느림
ease-in-out 속도가 느림에서 보통에서 느림
적용결과 확인 및 커스터마이징 가능한 사이트
https://matthewlein.com/tools/ceaser
4.2 Transformations
요소의 회전/크기등의 변형을 줄 수있다
tranform: 효과
- margin 과 padding이 적용되지 않는다.
- transition과 결합하여 더 역동적인 에니메이션을 만들 수 있다.
- box요소를 변형시키지 않아 효과를 적용하더라도 다른 요소의 위치에 영향을 주지 않는다.
transform mdn검색
4.3 Animations part One
지속되는 애니메이션 적용하기
▶️ transition 없이 원하는 만큼 애니메이션을 만들고 자동으로 재생시킬 수 있다.
어느지점에서 어느지점까지 움직이는 애니메이션
1. 애니메이션 설정
@keyframes 애니메이션이름 {
from{효과}
to{효과}
}
2. 애니메이션을 줄 요소에 적용
image{
animation: 애니메이션이름 재생시간 효과
}
💡 맨뒤에infinite를 붙여주면 설정한 애니메이션이 무한반복
4.4 Animations part Two
단계별 애니메이션 지정하기
%로 단계별 애니메이션을 지정할 수 있다.
ex)
0% {transform: rotateY(0);}
50% {transform: rotateY(180deg) translateY(100px);}
100% {transform: rotateY(0) translateY(0);}
👉 마지막 스텝인 100%에 애니메이션을 원래자리로 돌아오게하면 더 부드러워 진다.
👉 속성에 transform을 사용하는 것을 권장
👉 구글에서 애니메이션효과를 찾아서 사용할수도 있음
