일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- transform
- scss
- togle
- margin
- css animation
- TRANSITION
- bootstrap
- EventListner
- vw
- 이벤트 버블링
- Position
- animate
- sass
- 레이아웃
- css selector
- val()
- setTimeout
- position : fixed
- form
- hover
- float : left
- input
- navbar
- z-index
- 밀리초
- Carousel
- JQuery
- absolute
- CSS
- display:none
- Today
- Total
Simple Is Best
17. [CSS] CSS Animation - 1 본문
이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다.
구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이션을 주는 방법이 많더라구요!
또한, 이런 애니메이션 효과는 JavaScript를 활용하여도 충분히 쉽게 부여할 수 있는 기능들 입니다.
하지만 CSS만을 활용한 동적 효과를 부여하는 공부는 CSS에 대한 깊은 이해가 바탕이 되어야 가능 한 것이기 때문에 이를 공부하면서 다시 CSS 개념을 되짚는 마음으로 본 포스팅을 작성합니다.
애니메이션의 본질적인 학습을 위해서 레이아웃 배치에 관한 내용은 생략하겠습니다.
애니메이션 제작 기본 방칙 ★★★
1. 시작 화면 제작
2. 결과 화면 제작
3. 시작화면에서 결과화면에서 넘어가는 방아쇠 (hover) 제작
4. transition (서서히) 으로 효과 주기
오늘의 Target
사용 되는 개념 1. hover : 사용자가 이미지에 마우스를 올렸을 때, 적용되는 Pseudo-class 2. opacity : 투명도 (0 : 안보임 <-> 1 : 잘보임) 3. position : absolute -> 요소를 붕 띄워서 이미지 위에 겹쳐 보이게 끔 해주는 역할 4. transition : all 1s; (1초에 걸쳐서 서서히 변화) |
다음과 같은 웹사이트 내의 여행 패키지 상품들이 나열되었다고 가정할 때, 사용자는 이미지 위에 마우스를 올릴 것 입니다. 이때, 사용자가 이미지에 마우스를 올렸을 때 가격이 나오는 애니메이션을 학습하겠습니다.
HTML
맨 왼쪽 이미지에 대한 HTML 코드 입니다.
<div class="content-box">
<div style='position: relative'>
<div class='wrap-img'>
<p>30,000원</p>
</div>
<img src='../이미지파일/백두산product1.JPG'>
</div>
</div>
위의 HTML은 다음과 같은 구조를 가지고 있습니다. wrap-img라고 클래스 명을 짓긴 했지만, 사실 감싸고 있는 것이 아닌, content-box내에 병렬적으로 겹쳐서 존재하고 있음을 알 수 있습니다.
어? 겹쳐서 어떻게 존재하게끔 하지...?
답은 바로 position의 absolute 를 사용하면 됩니다. position의 absolute는 부모요소에 착 달라붙어서 겹치게 존재하는데요. 이를 위해서 상위 div 태그의 style 태그에 position : relative를 준 것입니다.
CSS
.wrap-content {
width : 100%;
max-width: 1200px;
padding: 20px;
margin: auto;
padding: 50px;
background-color: #eee;
}
.content-box {
float : left;
width : 33.3%;
padding: 50px;
}
.content-box img{
width : 100%;
}
/* 결과화면을 제작한 후 투명도를 조정(안보이게)
즉, 시작 화면 */
.wrap-img {
width : 100%;
height : 100%;
position: absolute; /* 붕 띄우는 요소 */
background-color: rgba(0,0,0,0.5);
opacity: 0;
transition: all 0.5s; /*0.5 초에 걸쳐서 서서히 변화 */
}
/* 박스 내의 가격 폰트 */
.wrap-img p{
text-align: center;
color : white;
padding-top: 45%;
font-size : 20px;
}
/* hover : 방아쇠 역할(시작화면->결과화면) 으로 넘어가는 역할 */
.wrap-img:hover{
/* 즉, 결과 화면*/
opacity: 1;
}
포스팅 처음에 나열했던 원칙에 의거하면,
1. 시작 화면 제작 & 4. transition (서서히) 으로 효과 주기
.wrap-img {
width : 100%;
height : 100%;
position: absolute;
background-color: rgba(0,0,0,0.5);
opacity: 0;
transition: all 0.5s;
}
▶ transition
transition : all [서서히 몇 초?]
이것만 제대로 기억하면 꽤 괜찮은 애니메이션을 제작할 수 있습니다.
2. 결과 화면 제작 & 3. 시작화면에서 결과화면에서 넘어가는 방아쇠 (hover) 제작
.wrap-img:hover{
opacity: 1; /*결과화면 : 투명도 1, 모두 보이게*/
}
애니메이션 효과라고 특별한 기술이 있는 것이 아닙니다.
기존에 알고있던 개념들을 확실하게 사용함과 동시에 transition : all [서서히 변경할 시간]s
을 사용하면 됩니다.
그럼 다음 포스팅에서 봐요!
'HTML & CSS' 카테고리의 다른 글
19. [CSS] linear-gradient (0) | 2021.07.12 |
---|---|
18. [CSS] CSS Animation - 2 (0) | 2021.07.10 |
16. [CSS] 아이콘 넣기 (0) | 2021.07.09 |
15. 반응형 레이아웃 개론 (0) | 2021.07.08 |
반응형 웹 개발을 위한 meta태그 추가 (0) | 2021.07.08 |