CSS3 사용자 인터페이스
1. Resizing
- 사용자가 엘리먼트 크기를 변경 할 수 있다
1) 구현
- overflow 속성을 지정해야만 resizing 속성이 동작한다
(overflow: element 요소의 내용이 가득 차있을 때 어떻게 보여줄지 지정하는 속성)
- 빨간 부분을 드레그엔 드롭하면 크기 조정 가능
| [CSS] 고정 <header>, <footer> 만들기 (0) | 2016.12.11 |
|---|---|
| [CSS] Inline vs Block vs Inline-block 속성 (0) | 2016.12.11 |
| [CSS3] CSS3 애니메이션 속도 제어 (0) | 2016.12.11 |
| [CSS3] CSS3를 이용한 애니메이션 효과 (0) | 2016.12.11 |
| [CSS3] 접두어(-webkit, -moz-, -ms-) (0) | 2016.12.11 |
리딩리드
CSS3 애니메이션 속도 제어
1. 정의
- transition : css속성을 변경할 때 애니메이션 속도를 지정한다.
- transition을 사용하지 않을 경우 순간적으로 변화가 일어나지만, 속도를 지정하면 부드러운 화면 변화가 생긴다
2. 구현
- #box:hover 속성은 마우스가 박스위에 올라 갔을 때 이벤트를 말한다
- transition을 2s으로 조정하여 2초의 시간 동안 변화가 일어남
| [CSS] Inline vs Block vs Inline-block 속성 (0) | 2016.12.11 |
|---|---|
| [CSS3] CSS3 사용자 인터페이스 (0) | 2016.12.11 |
| [CSS3] CSS3를 이용한 애니메이션 효과 (0) | 2016.12.11 |
| [CSS3] 접두어(-webkit, -moz-, -ms-) (0) | 2016.12.11 |
| [CSS] 스타일 시트 적용방법 (0) | 2016.12.03 |
리딩리드
CSS3를 이용한 애니메이션 효과
1. 정의
- animation : 애니메이션의 속성 또는 상태를 정의
- @keyframes : 애니메이션의 움직임을 만드는 중간 상태정의
2. 속성
1) animation 하위 속성
하위 속성 |
설명 |
animation-delay |
엘리먼트가 로드되고 난 후, 언제 애니메이션이 시작될 것인지 지정 |
animation-direction |
애니메이션이 종료되고 다시 처음부터 시작할 것인지, 역방향으로 진행할 것인지 지정 |
animation-duration |
한 사이클의 애니메이션이 얼마에 걸쳐 일어날 것인지를 지정 |
animation-iteration-count |
애니메이션이 몇 번 반복될 것인지 지정, infinite로 지정하면 무한 반복 |
animation-name |
이 애니메이션의 중간 상태를 지정, 중간 상태는 @keyframes 규칙을 이용하여 기술 |
animation-play-state |
애니메이션을 멈추거나 다시 시작 |
animation-timing-function |
중간 상태들의 전환을 어떤 시간 간격으로 진행할 것인지 지정 |
animation-fill-mode |
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될 것인지를 지정 |
2) @keyframes
- 2개 이상의 중간 상태를 정의, 각각의 중간 상태는 특정 시점에 엘리먼트가 어떻게 보일 것인지 나타낸다
- percentage : 중간 상태가 전체 애니메이션에서 언제 등장할 것인지 지정, 0%(from)는 시작점, 100%(to) 끝나는 점
3. 간단한 예제
- 크롬과 Explore에서 동작 하도록 지정한다
- 왼쪽에서 오른쪽으로 텍스트 박스가 이동한다
| [CSS3] CSS3 사용자 인터페이스 (0) | 2016.12.11 |
|---|---|
| [CSS3] CSS3 애니메이션 속도 제어 (0) | 2016.12.11 |
| [CSS3] 접두어(-webkit, -moz-, -ms-) (0) | 2016.12.11 |
| [CSS] 스타일 시트 적용방법 (0) | 2016.12.03 |
| [HTML5] <a> 태그를 이용하여 원하는 위치로 이동 (0) | 2016.11.28 |
리딩리드
접두어(-webkit, -moz-, -ms-)
1. 정의
- CSS3는 미완성 기술이므로 웹 브라우저에서 지원하는 CSS3 엔진에 따라 접두어를 사용해야 한다
2. 접두어 종류
접두어 |
웹 브라우저 |
-webkit |
Chrome, Opera, Safari |
-moz- |
Firefox |
-ms- |
Internet Explor |
3. 예제
1) Chrome
2) Explore
- Explore 에서 실행시 column-count:3 을 추가하면 된다
| [CSS3] CSS3 애니메이션 속도 제어 (0) | 2016.12.11 |
|---|---|
| [CSS3] CSS3를 이용한 애니메이션 효과 (0) | 2016.12.11 |
| [CSS] 스타일 시트 적용방법 (0) | 2016.12.03 |
| [HTML5] <a> 태그를 이용하여 원하는 위치로 이동 (0) | 2016.11.28 |
| [HTML5] 테이블<table> 태그 컨트롤 하기 (0) | 2016.11.28 |
리딩리드
