JavaScript 입문 : 클릭 반응 속도 체크 - 기본 HTML / CSS 및 JS 구조

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

지난시간 만들어 보았던 순서도 기반으로 기본 HTML, CSS 및 JS를 세팅헤 보도록 하겠습니다. 

 

▒ 기본 HTML CSS JS

 

역시 VS Code를 통하여 3종세트를 만들어 봅니다. 

 

1. HTML 기본

 

 

상기 HTML에서 <div>태그를 2개 만든 이유는 첫번째는 카드의 색을 변환시키고 두번째 <div>태그에서는 결과값을 출력하게 설계한 겁니다. 

 

id와 class각각 만들어 주었고 향후 CSS에서 빨간색과 노란색을 className을 다르게 지정하여 만들어 주고 JS를 통하여 프로그램이 작동할 수 있도록 하고자 합니다. 

 

2. CSS 기본

 

CSS에서는 기본적인 카드에 적용될 색상을 지정해 줍니다. 첫번째 나오는 명령어는 브라우저 자체에 내재되어 있는 기본값을 없애는 겁니다. 

 

여기서 user-select는 기본 동작외에 아무것도 할수 없게 예를들어 글씨 복사라든지 등을 할 수 없게 만드는 명령어입니다. 

 

 

3. JS 기본

 

자바스크립트는 현재 두개의 <div>태그  id를 지정해서 태그를 선택합니다. 

 

 

이렇게 기본 구조를 만들어 놓고 브라우저를 보면 다음과 같이 나옵니다.