HTML5 + CSS3 (12) CSS3 선택자, (13) 애니메이션

12. CSS3 선택자

* 연결 선택자: 선택자와 선택자를 연결해 적용 대상을 한정하는 선택자

- 하위 선택자: 부모 요소에 포함된 모든 하위 요소에 스타일이 적용

(예시) section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 지정

section p { color: blue; }

 

- 자식 선택자: 자식 요소에 스타일을 적용하는 선택자, '>'부등호를 표시해 부모와 자식 요소를 구분

(예시) section 요소 안에 포함된 p 요소 중 자식 p 요소에만 파란색으로 지정

section > p { color: blue; }

 

- 인접 형태 선택자: 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용

(예시) h1 요소 다음에 오는 p 요소들 중 첫 번째 p 요소에만 밑줄 적용

h1 + p { text-decoration: underline; }

* 속성 선택자

- [속성] 선택자: 지정한 속성을 가진 요소를 찾아 스타일 적용

(예시)

a[href] { background: yellow; }

- [속성 = 값] 선택자: 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

(예시)

a[target="_black"] { padding-right: 30px; }

- [속성~=값] 선택자: 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

 

- [속성 |= 값] 선택자: 특정 값이 포함된 속성을 가진 요소를 찾아 스타일 적용, 하이픈(-)으로 연결해 한 단어 값을 이루는 요소에도 적용

 

- [속성^=값] 선택자: 특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용

 

- [속성 $=값] 선택자: 특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용

 

- [속성 *= 값] 선택자: 값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용

* 가상 클래스와 가상 요소

- 사용자 동작에 반응하는 가상 클래스

표기	설명
:link	방문하지 않은 링크에 스타일 적용
:visited	방문한 링크에 스타일 적용
:active	웹 요소를 활성화했을 때의 스타일 적용
:hover	웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
:focus	웹 요소에 초점이 맞추어졌을 때의 스타일 적용

- UI 요소 상태에 따른 가상 클래스

표기	설명
:enabled, :disabled	요소를 사용할 수 있을 때와 없을 때의 스타일 지정
:checked	라디오 박스나 체크 박스에서 항목을 선택했을 때의 스타일 지정

- 구조 가상 클래스

표기	설명
:nth-child(n)	앞에서부터 n번째 자식 요소에 스타일 적용
:nth-last-child(n)	뒤에서부터 n번째 자식 요소에 스타일 적용
:nth-of-type(n)	앞에서부터 n번째 요소에 스타일 적용
:nth-last-of-type(n)	뒤에서부터 n번째 요소에 스타일 적용
:first-child	첫번째 자식 요소에 스타일 적용
:last-child	마지막 자식 요소에 스타일 적용
:first-of-type(n)	형제 요소들 중 첫 번째 요소에 스타일 적용
:last-of-type(n)	형제 요소들 중 마지막 요소에 스타일 적용

- 가상 요소

• ::first-line: 특정 요소의 첫번째 줄 스타일 적용
• ::first-letter: 특정 요소의 첫번째 글자에 스타일 적용
• ::before: 특정 요소의 앞에 지정한 내용을 추가
• ::after: 특정 요소의 뒤에 지정한 내용을 추가

---

13. 애니메이션

* 변형

- translate 함수: 지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킴

transform:translate(tx,ty)
transform:translate3d(tx,ty,tz)
transform:translateX(tx)
transform:translateY(ty)
transform:translateZ(tz)

(예시)

<style>
	.movex:hover { transform: translateX(50px); }
	.movey:hover { transform: translateY(20px); }
	.movexy:hover { transform: translate(10px, 50px); }
</style>

 

- scale 함수: 지정한 크기만큼 요소를 확대/축소

transform:scale(sx, sy)
transform:scale3d(sx, sy, sz)
transform:scaleX(sx)
transform:scaleY(sy)
transform:scaleZ(sz)

(예시)

<style>
	.scalex:hover { transform: scaleX(1.2); }
	.scaley:hover { transform: scaleY(1.5); }
	.scale:hover { transform: scale(0.7); }
</style>

 

- rotate 함수: 각도만큼 웹 요소를 시계 방향이나 시계 반대 방향으로 회전

transform:rotate(각도)

 

- skew 함수: 요소를 지정한 각도만큼 비틀어 왜곡

transform:skew(ax, ay)
transform:skewX(ax)
transform:skewY(ay)

 

- transform-origin 속성: 특정 지점을 변형의 기준으로 설정

transform-origin: <x축> <y축> <z축> | initial | inherit ;

 

- perspective 속성: 원근감, 속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어짐

perspective: <크기> | none;

 

* 트랜지션: 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것

- transition-property: 트랜지션 대상 설정

transition-property: all | none | <속성이름>

- transition-duration: 트랜지션 진행 시간 설정(시간 단위: 초, 밀리초)

- transition-timing-function: 트랜지션 속도 곡선 설정

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

속성 값	설명
linear	시작부터 종료할 때까지 같은 속도로 트랜지션을 진행
ease	처음에는 천천히, 점점 빨라지다가 마지막엔 천천히(기본값)
ease-in	시작을 느리게
ease-out	종료를 느리게
ease-in-out	느리게 시작, 느리게 종료
cubic-bazier(n, n, n, n)	베지에 함수를 직접 정의

- transition-delay: 트랜지션 지연 시간 설정