TIL no.16 - HTML / CSS / JavaScript 연동 예제

devzunky·2019년 10월 7일
0

사용자와 웹페이지 간의 상호작용하는 모습을 예제를 통해 HTML/CSS/JavaScript가 어떻게 쓰이는지 포스팅하겠습니다.


1. Log-in 버튼 활성화

1-1. 소스 코드

HTML

CSS

Javascript

1-2. 작동원리 포인트

WEB View

스크린샷, 2019-10-07 20-50-48.png

현재 로그인 버튼이 뿌연색인 것을 볼 수 있습니다.
이유는 제가 기본값으로 뿌연값을 넣어놨기 때문입니다.

이는 HTML과 CSS에서 확인할 수 있습니다.

button의 class에 unactivatedLoginColor값을 넣어놨습니다.

CSS에 .unactivatedLoginColor.activatedLoginColor두가지가 존재합니다.


이제 JavaScript에서 이에 해당하는 부분을 살펴보겠습니다.

Password 라는 Input에 keyup event가 일어났을 때, 조건을 충족하면
unactivatedLoginColor 클래스를 삭제하고 activatedLoginColor 클래스를 추가해줌으로써 이를 구현했습니다.

조건을 만족했을 때의 WEB View

스크린샷, 2019-10-07 20-54-33.png

이때의 HTML이 어떤지 개발자 도구를 열어 확인해보겠습니다.

기본 클래스였던 unactivatedLoginColor가 삭제되고 activatedLoginColor가 추가된 것을 확인할 수 있습니다.


실제로 DOM을 통해 구현하는 과정에서 문법적 실수가 일어날 수 있습니다.
원하는 결과가 나오지 않을 때는
꼭 문법을 다시 확인하는 습관을 들여야겠다고 생각했습니다.

profile
Back-End Develop

0개의 댓글