HTML/CSS 로 원하는 UI 모양을 일단 만든다.
만든 문서는 일단 숨겨둔다 (display: none; <- css 로 숨긴다)
버튼을 하나 만들고 버튼을 클릭 했을때 숨겨둔 HTML/CSS UI 가 나오도록 만든다고 생각한다.
태그 옆에 속성으로 onclick
를 넣는다.
(onclick 안에는 JS 를 쓸 수 있음, 대부분의 태그에 사용 가능한 속성임)
자바스크립트로 버튼을 눌렀을때 display: none → display: block 으로 바꿔준다.
Q. id 값이 'hello' 인 h1 태그에 컨텐츠를 JS를 이용하여 'Hi!' 으로 변경해보자.
A. JS의 기본적 문법은 이렇다. 그리고 script 태그 안에다 보통 적는다.
(inline 으로 적어도 되는 속성들도 있음)
Q. 열림 버튼을 누르면 alert 창이 뜨고, 닫힘 버튼을 누르면 alert 창이 다시 없어지게 해보자.
A. function 함수로, 길고 보기 힘들었던 식을 짧은 함수명에 담을 수 있다.
그리고 onclick 값으로 function 함수명을 적는다.
긴 코드는 가독성이 떨어진다. 그러면 내가 보기도, 다른 사람이 보기도 어려워짐.
function 함수로 긴코드를 축약하고, 긴코드를 재사용하기에도 좋게 할 수 있다.
프로젝트 처음에 열리는 버튼의 function의 함수명을 'open' 으로 주었었다.
그랬더니 '열기' 버튼을 누를때마다 모든 컨텐츠와 요소들이 다 사라졌다.😅 (이세계로 떠난 그들...)
보통 구현이 제대로 안되는건 오타일 경우가 대부분이라서
몇번을 다시 써보고 확인했지만 여전히 이세계로 떠난 컨텐츠들은 제대로 구현이 되지 않았다.
구글신님의 도움으로 JS에 open 은 팝업창을 띄우는 함수임을 알았다... 🤦♀️
당연히 함수명을 바꾸니 바로 제대로 작동되더라... 하하하핫 ㅎㅎ 🥲
이렇게 또 하나를 배워간다!
⇒ 여기서 또 느끼지만... 컴퓨터는 잘못이 없다. 다 사람잘못이다 🥲