HTML+CSS+JavaScript

13.10

자바스크립트 적용하기

웹 브라우저에 화면이 표시된 후 동적으로 화면을 조작하려면 자바스크립트를 사용해야 합니다. 최종 프로젝트에는 자바스크립트를 사용해 동적으로 처리한 부분이 총 3군데 있습니다.

첫 번째는 메인 영역의 텍스트 타이핑 효과입니다. 화면에 보여 줄 텍스트 데이터를 배열로 저장하고 일정 시간마다 반복하면 타이핑하듯이 화면에 출력합니다.

두 번째는 헤더 영역의 디자인 변경 효과입니다. 웹 브라우저를 스크롤하면 헤더 영역에 새로운 클래스를 추가해 디자인을 변경합니다.

세 번째는 스크롤 이동 효과입니다. 헤더 메뉴를 클릭하면 페이지 내부의 다른 영역으로 부드럽게 스크롤이 이동합니다.

최종 프로젝트에 자바스크립트를 적용하려면 HTML 파일의 마지막 부분에 다음과 같이 외부 스크립트 파일을 연결하는 코드를 추가해야 합니다.

  </section>
  <script src="script.js"></script>
</body>

그리고 프로젝트 폴더에 script.js 파일을 만들어 해당 파일에 자바스크립트 코드를 작성합니다.