-
CSS 가상 class 선택자 & Transition 전환 속성 & Transform 속성Study/HTML & CSS 2019. 11. 24. 20:40반응형
[ 가상 클래스 선택자 ]
문서 상에 있는 것들을 지정하는 것이 아닌, 어떤 가상의 상태를 지정하는 것을 의미한다.
link : 방문하지 않은 링크를 선택
visited : 방문한 링크를 선택
<!-- 생략 --> <body> <a href = "http://naver.com"> 네이버 </a> </body> <!-- 생략 -->a:link { color : black; } // 링크를 방문하지 않은 태그를 검은색으로 지정 a:visited { color : red; } // 링크를 방문한 않은 태그를 빨간색으로 지정active : 마우스로 클릭한 상태
hover : 마우스를 위에 올린 상태
focus : 포커스를 가진 상태 (ex: input 박스에서 텍스트 입력 가능한 상태)
<!-- 생략 --> <h1>Hello world</h1> <div>Contents here </div> <input type="text"> <!-- 생략 -->h1:active { color: yellow; } div:hover { color: red; } input:focus { background:green;}[ Transition ]
정해진 시간 동안 element의 속성 값을 부드럽게 변화시킬 수 있다
1. 해당 요소에 추가할 css 전환 효과를 설정
2. 추가할 전환 효과가 지속될 시간을 설정
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <h1>Hello world</h1> <div id="board">Contents here </div> <p> <input type="text"> <p> <div id="box" /> </body> </html>h1:active { color: yellow; } div:hover { color: red; background: yellow;} input:focus{ background:green;} #board { width: 150px; transition: width 1s; } #board:hover { width: 600px; } #box { background-color: skyblue; height: 100px; width: 150px; margin: 10px; transition: width 3s, height 3s; } #box:hover { width : 200px; height : 300px; }transition-timing-function 속성
: 전환(transition) 효과의 시간당 속도를 설정한다
1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행된다
2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려진다
3. ease-in : 전환(transition) 효과가 천천히 시작한다
4. ease-out : 전환(transition) 효과가 천천히 끝난다
5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝난다
6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS Transition</title> </head> <body> <h1>transition-timing-function</h1> <div id="01">linear</div> <div id="02">ease</div> <div id="03">ease-in</div> <div id="04">ease-out</div> <div id="05">ease-in-out</div> </body> </html>div { background-color: pink; height: 50px; width: 100px; margin: 10px; text-align: center; line-height: 50px; transition: width 1s; } #01 { transition-timing-function: linear; } #02 { transition-timing-function: ease; } #03 { transition-timing-function: ease-in; } #04 { transition-timing-function: ease-out; } #05 { transition-timing-function: ease-in-out; } div:hover { width: 300px; }transition-delay 속성
: 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정한다.
delay 속성은 설정된 시간이 흐른 뒤에야 비로소 효과가 시작된다#box { height: 100px; width: 150px; transition: width 1s, height 2s; transition-delay: 1s; } #box:hover { width: 300px; height: 300px; }[ Transform ]
요소를 움직이거나 회전시키거나 크기를 변경하거나 기울이는 등 요소에 변형을 준다.
1. translate(x,y) : 현재 위치에서 요소를 x축과 y축의 거리만큼 이동시킨다.
transform: translate(100px, 50px);
2. translateX(n) : 현재 위치에서 요소를 x축의 거리만큼 이동시킨다.
3. translateY(n) : 현재 위치에서 요소를 y축의 거리만큼 이동시킨다.
4. rotate(각도) : 요소를 각도만큼 회전시킨다.
transform: rotate(30deg);
반응형'Study > HTML & CSS' 카테고리의 다른 글
[생활코딩] CSS Grid (0) 2019.11.26 [생활코딩] CSS Box model (0) 2019.11.26 [코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, Float (0) 2019.11.23 [코드스테이츠 TIL] CSS 선택자 : CLASS, ID (2) 2019.11.22 [생활코딩] 5. CSS 선택자 & 선택자 우선순위 (0) 2019.08.07