1 키즈가오 애니메이션 파일 연동하기
키즈가오는 애니메이션 효과가 여러 개라 코드가 상당히 깁니다. 그래서 애니메이션 효과를 animation.css 파일로 생성하여 따로 관리합니다. style.css 파일을 생성한 것과 같은 방식으로 css 폴더 안에 animation.css 파일을 만들고 <link> 태그를 사용하여 HTML 문서 안에 animation.css 파일을 연동시킵니다.
예제 소스 Exercise/16장/KidsGao/index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="우리쌀 점토로 만든 키즈가오 웹 사이트 소개"> <meta name="keywords" content="키즈가오, 점토, 장난감"> <meta name="author" content="김인권"> <title>키즈가오</title> <link rel="stylesheet" href="css/style.css"> <!-- animation 파일을 연동합니다. --> <link rel="stylesheet" href="css/animation.css"> </head> <body>…</body> </html>
<link> 태그를 작성할 때는 적용 순서를 주의해야 합니다. 애니메이션은 레이아웃 작업을 마친 후에 적용하는 것이 일반적입니다. 그래서 <link> 태그의 적용 순서는 style.css 파일을 먼저 연결한 다음에 animation.css 파일을 적용하는 것이 좋습니다(반대로 작성해도 결과는 같습니다. 다만 이렇게 하면 브라우저가 애니메이션 파일을 먼저 불러오고 난 다음에 레이아웃 파일을 불러오게 됩니다).