움직이는 웹사이트 제작 5 - 메뉴 영역과 본문 영역의 애니메이션 구현 실습해보기

애니메이션 구현 실습을 이어서 진행해보겠다.

---

 

 

 

실습 5 - 메뉴 영역 애니메이션 구현하기

 

 

 

html 파일

---

 

 

 

 

css 파일

 

코드가 정말 길다.

---

 

 

 

처음 실행 화면은 이렇게 되어 있는데 여기서 메뉴에 마우스를 올리면 폰트 색깔이 변경되도록 코드를 수정할 것이다.

---

 

 

 

코드 수정하기

 

 

마우스를 올렸을 때 메뉴의 글씨 색깔이 검은색에서 약간 붉은 계열로 변경되었다.

 

 

 

 

auto를 지우면 왼쪽으로 마진이 없도록 지정된다.

 

 

 

채점도 잘 되었다.

---

 

 

 

 

실습 6 - 본문 영역 애니메이션 구현하기

 

---

 

 

 

이번에는 마우스를 올렸을 때 배경색과 이미지의 크기가 달라지는 효과를 적용해볼 것이다. 제공된 코드는 이전과 같으니 따로 캡쳐하지는 않았다.

 

 

1. 배경색 바꾸는 코드 추가하기

 

 

 

마우스를 올리니 배경색이 옅게 바뀐다. 바뀌는 시간을 잠시 확인을 위해 1초로 길게 설정했다가 다시 지시사항처럼 0.3초로 변경했다.

 

---

 

 

2. 이미지 크기 변경하는 코드 추가하기

 

 

 

 

 

하지만 제출을 하니 뭔가 계속 틀렸다고 한다. 처음에는 콜론을 잘못 찍어서 틀려서 수정했는데 무슨 문제일까?

---

 

 

3. 코드 다시 수정하기

 

 

이번엔 제대로 100점을 맞았다.

 

---

 

 

 

학습을 마치고

실습 하나당 분량이 많았지만 이어지는 내용이라 하나의 포스트에 담아보았다. 잘 안 되는 부분이 있어서 한참 헤매기도 했지만 문제는 매우 간단했다. 콜론을 둘다 잘못 찍어서 틀렸다. 다음에는 이런 부분을 꼭 잘 확인해야겠다.

애니메이션 효과를 주는 것도 생각보다 어렵지 않았다. 그리고 HTML/CSS 공부를 안한지 3달이나 되었음에도 이해가 잘 되는 것을 보면 그동안 공부를 열심히 했다는 걸 알 수 있었다.

 

다른 어려운 개발 공부를 했더니 이제 CSS는 식은 죽 먹기처럼 정말 쉽다.