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

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

---

 

 

 

 

 

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

 

 

 

html 파일

---

 

 

 

 

css 파일

 

코드가 정말 길다.

---

 

 

 

 

 

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

---

 

 

 

코드 수정하기

 

 

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

 

 

 

 

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

 

 

 

채점도 잘 되었다.

---

 

 

 

 

 

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

 

---

 

 

 

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

 

 

 

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

 

 

 

 

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

 

---

 

 

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

 

 

 

 

 

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

---

 

 

 

3. 코드 다시 수정하기

 

 

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

---

 

 

 

 

 

학습을 마치고

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

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

 

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