Preview Loop

파일 연결을 확인하면 첫 페이지 실습이 완성됩니다

HTML, CSS, JavaScript는 따로 작성하지만 브라우저에서는 하나의 페이지로 합쳐져 보입니다.

HTML

my_profile.html

문서 구조를 만들고 CSS와 JavaScript 파일 경로를 연결합니다.

CSS

profile_style.css

<link>가 맞으면 색, 여백, 버튼 스타일이 적용됩니다.

JavaScript

profile_script.js

<script>가 맞으면 버튼 클릭 이벤트가 실행됩니다.

1

저장

HTML, CSS, JS 파일을 모두 저장합니다.

2

Go Live

Live Server로 HTML 파일을 엽니다.

3

화면 확인

레이아웃과 버튼 스타일이 보이는지 봅니다.

4

클릭

문의하기 버튼의 alert 동작을 확인합니다.

바뀌지 않으면 경로와 콘솔을 먼저 봅니다

파일명 철자, 같은 폴더 여부, 저장 상태를 확인하고 개발자 도구 Console에 오류가 있는지 확인합니다.

filename path console