| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- computer
- Algorithm
- html
- MIPS
- Class
- web
- system
- javascript
- instruction
- mysql
- Linux
- DB
- github
- data structure
- architecture
- Pipelining
- function
- php
- DATAPATH
- react
- MacOS
- XML
- while
- control
- python
- Java
- DS
- CSS
- DoM
- for
- Today
- Total
목록hover (2)
YYYEJI
[XML] CSS에서 animation 속성
Animation 이란 ? ? ? 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 예제를 살펴보기 전 @keyframe 을 살펴봅시다. 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 합니다. 키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시합니다. 이제 예제를 살펴봅시다. WebDesign{ animation: left-right 2s infinite alternate; } @keyframes left-right{ from{ transform: translate(0, 0) } to{ transform: translate(300px, 0); color: lightgray; bac..
[XML] CSS에서 hover 속성
hover 란 ? ? ? HTML 또는 XML에서 요소에 마우스를 올렸을 때 반응하는 css의 요소입니다. 예제를 살펴봅시다. name{ display: block; color:chartreuse; margin-left: 50pt; margin-top: 50pt; } name:hover{ color: orange; } name{ display: block; color:chartreuse; margin-left: 50pt; margin-top: 50pt; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; transition: width 2s, height 2s, transform 2s; } name:hover{ width: 200px; heig..