관련자료 WebApps 스톱워치 스톱워치 - UI구현(HTML, CSS) UI구현(JavaScript) JS연결 "스톱워치"폴더에 app.js라는 이름의 JavaScript 파일을 생성합니다. HTML 코드에 이 JavaScript 파일을 연결합니다 변수 선언 스톱워치의 시작시간(startTime), 종료 시간(endTime), 실행 상태(running). 경과시간(duration)을 저장하는 변수를 선언 초기화합니다. let 키워드로 변수의 값을 나중에 변경할 수 있게 선언합니다. HTML 요소를 참조하는 변수 DOM(Document Object Model)을 조작하여 동적으로 변경하기 위해 HTML에서 ID요소를 가진 timer, statBtn, stopBtn, resetBtn 변수에 할당합니다. 변..
관련자료 WebApps 스톱워치 스톱워치 - UI구현(JavaScript) UI디자인 UI 구현 (HTML, CSS) 먼저 IDE에서 스톱워치 폴더와 index.html 생성합니다 1️⃣div박스로 id명 app과 2️⃣style.css 파일 만들고 3️⃣태그로 index.html 파일과 연결합니다 style.css파일 내에서 app이라는 id에 대한 스타일을 정의합니다. id-app에 대한 스타일링은 넓이와 높이 설정, 외곽선처리, 그리고 위치 배치와 여백 지정을 포함합니다. 1️⃣h2 태그를 사용하여 '이 애플리케이션이 스톱워치임'을 나타내줍니다. 2️⃣그리고 스톱워치 문장이 가운데 가도록 스타일을 정의합니다 1️⃣HTML부분에서 timer라는 ID를 가진 태그를 생성하고, 그내용으로 "00:00:0..
