- addEventListener는 자바스크립트에서 HTML 요소에 이벤트 리스너를 추가하는 메서드입니다. 이벤트 리스너는 특정 이벤트가 요소에서 발생할 때 실행되는 함수입니다. - 다음은 addEventListener를 사용하여 이벤트 리스너를 추가하는 기본 구문입니다. element.addEventListener(event, function, useCapture); - 구성 요소는 다음과 같습니다. element: 이벤트 리스너를 추가할 HTML 요소입니다. event: 이벤트 이름입니다. 예를 들어, "click", "mousemove", "keydown" 등이 될 수 있습니다. function: 이벤트가 발생할 때 실행할 함수입니다. useCapture: 선택적 매개변수로, 이벤트 캡처링을 사용할..

- 오늘은 위에 있는 예시처럼 이미지들로 이루어진 이미지타입의 페이지를 만들어 보겠습니다. - 구조는 크게 제목을 이루고 있는 헤더 부분과 이미지로 이루어진 컨텐츠 부분이 있겠습니다. - 함께 코드를 보시죠 식물을 키우는 방법 식물을 키우는 것은 생각만큼 쉽지않지만 배운다면 할 수 있습니다. 물을 주는 주기 올바른 주기를 알고 물을 주는 것이 중요합니다. 너무 자주주면 뿌리가 썩을 수도 있기 때문입니다. 자세히보기 광합성의 중요성 올바른 주기를 알고 물을 주는 것이 중요합니다. 너무 자주주면 뿌리가 썩을 수도 있기 때문입니다. 자세히보기 - 자 먼저 body 부분을 보겠습니다. - 먼저 아까 말씀드렸던 것과 같이 제목과 아래 설명부분을 h2와 p태그를 통해 만들어주고 - 이미지가 들어갈 부분을 image..

- 자 오늘도 금요일이라 시험을 보는 날이 되었습니다!! - 같이 문제를 보시고 제가 틀린문제를 같이 풀어보겠습니다. // 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } // 정답은 false // 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } // 정답은 12456 // 07. 결괏값을 작성하시오. { for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); } // 정답은 함수가 실행되었습니다 // 11. 결괏값을 작성..

- 자 오늘은 어제 만든 강아지가 정답을 맞추면 웃고 정답을 틀리면 우는 것을 만들어 보겠습니다. - 일단 완성본입니다!! - 이제 코드를 뜯어보도록하죠 - 사실 html과 CSS는 크게 달라진 점이 없기 때문에 오늘도 자바스크립트에 집중하도록 하겠습니다. - 설명부분과 우측상단에 문제번호가 추가된 것 말고는 내용 상에는 변한게 없습니다. - 일단 기본적인 부분은(번호를 넣거나 문제를 넣는 내용적인 부분들) 어제 것과 같기 때문에 설명을 생략하겠습니다. - 이게 사소해 보이지만 중요한 것인데 html를 짤 때 규격에(?) 맞춰서 짠다면 코드의 재활용이 가능하다는 점입니다. - 덕분에 저희는 달라지는 요소들만 바꾸면 된다는 것이죠!! - 출력과 숨기기는 어제 했으니 오늘은 사용자의 정답을 받아와서 정답을 ..

- 위의 사이트처럼 정답확인을 누르면 답이 나오는 사이트를 만들어 봅시다.!! - 그 후 나중에 정답을 맞추었을 땐 강아지가 웃고, 틀렸을 땐 지금 처럼 울게 만들어 보는 것도 해보겠습니다. Quiz 정답 확인하기 유형 . 정답 확인하기 imkebab00@gmail.com - Javascript 포스팅 이니 중요한건 script부분이죠! - 사실 body부분이나 css같은 이미지는 다른 곳에서 쉽게 가져올 수 있습니다. - 스크립트 부분 입니다! 처음보는 것들도 있고 눈에 익은 것들도 조금 있네요!! - 일단 querySelector 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. - 예를들어 document.qu..

- 사이트는 여러장의 페이지들이 합쳐져서 만들어집니다. - 사이트를 구성하는 페이지들은 여러가지 타입이 있는데 대표적으로 imageType, cardType, textType, bannerType,footerType등이 있습니다. - 오늘은 그 중에서 cardType을 한번 만들어 보겠습니다. cardType 페이지란 - 보통 3-4개의 카드들로 구성된 페이지를 말합니다. - 위의 모양처럼 생긴 페이지가 cardType의 대표적인 예 입니다. HTML 삽입 미리보기할 수 없는 소스 - 위의 페이지를 만들어 보겠습니다. 식물을 키울 때 주의해야 할 것들 식물을 키우는 방법에 대해서는 다양한 팁과 지침이 있지만 기본적인 것들에 대해서 이야기를 나누어 보려고 합니다. 다음에 설명할 내용과 같은 기본적인 방법들..