1강 강의 소개와 자바스크립트의 근본
script 안에 document는 문서
.은 ~의
getElemenrById는 html요소를 가져와라 (Id)의 요소
2강 (동적 UI 만드는 스텝 (Alert 박스 만들기)
오늘 배운 2강은 버튼을 클릭하면,
이런식으로 보여주는 코드를 짜 보았고, 숙제로 닫기 버튼을 배웠다.
하나씩 알아가 보겠다.
div안에 클래스를 준 이유와 css에 대해서.
우선 div박스 안에 class를 준 이유는 css를 꾸며주기 위해서 이다. css에서
display: none; 를 먼저 선언 해 준다.
id를 준 이유와 자바스크립트에 대해서
id를 준 이유는 자바스크립트를 활용하기 위한 방법이다. button안에 onclick 을 적어주면 클릭을 하면 보여주는 의미라고 생각한다. 그리고 document.getElemenrById 를 주면 1강에서 보았던 거처럼 html 문서를 가져와달라는 의미로 보면 될 거 같다. 그리고 div 에서 선언해준 id를 주고,
style.display = 'block'을 주면 css none이였던 게 다시 block으로 변환되면서 버튼을 클릭 했을 때, 다시 block으로 변환되는 것을 배웠다.
숙제
숙제는 닫기를 해서 알림창임을 없애는 것에 대해 숙제를 주셨다.
닫기도 버튼과 원리는 같은데, 다시 알림창을 없애야 하니까 block이 아닌,
none을 선언 해 주었다. 이렇게 none, block을 잘 선언 해 주면 버튼을 열면 보이고 닫기를 하면 닫히는 것을 만들 수 있다.
느낀점
오늘 배운것은 정말 간단한 거라고 생각한다. 너무 많은 선언문도 있을 거 같지만,
잘 배우고 정리 해 놔서 머리에 기억해 둘 수 있게 끔 해놔야겠다, 그리고 강의를 들으면서 이해를 꼭 하면서 넘어가야겠다.
