Day22 : JS로 HTML, CSS 조작

0일 0시간 0분 0초가 미리 나와있는 게 마음에 안 든다.

D-day를 입력하면 등장하도록 하자

 

0일 0시간 0분 0초는 d-day-container라는 아이디를 가진 <div>에 감싸져 있다.

 

script.js에 container라는 d-day-counter를 가진 변수를 생성한다.

그리고 display 속성을 none으로 지정한다.

display = none → 존재하지만 화면에 보이지 않는 상태로 설정하는 속성값

 

 

없어졌다.

 

이번에는 'D-day를 입력해주세요.'라는 문구를 h3 정도의 두꺼운 텍스트로 변환해본다.

 

textContent에서 innerHTML로 변경한다.

 

innerHTML

해당하는 태그의 안쪽에 직접 html 자체를 입력할 수 있게 한다.

 

 

잘못된 시간이 입력되었을 때에도 innerHTML을 활용해보자

 

innerHTML은 기존에 있던 것도 지우고 태그 안에 있는 HTML 전체를 현재 값으로 바꿈

 

---

 

0일 0시간 0분 0초를 타이머로 사용해보자

'일',  '시간', '분', '초'는 변경할 필요 없고 숫자 부분만 변경해주면 되기 떄문에

<span>의 id로 지정하면 되겠다.

 

이번에는 querySelector 대신 getElementById를 이용해 html 요소를 가져왔다.

 

getElementById

태그에 있는 id 속성으로  해당 태그에 접근하여 하고싶은 작업을 할 때 쓰는 함수

 

 

변수들을 객체로 관리해보자.