반응형 자바스크립트12 Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 display 속성 값을 'none' 이나 'block'으로 변경하는 방법을 사용하는 경우가 많습니다. 물론 이와 같은 방법은 알림창 뿐 만이 아니라, 모든 HTML의 엘리먼트 요소들에 적용이 가능합니다. 동작원리도 매우 간단하기 때문에 한번 들여다보고 이해를 해두면, 동적인 UI를 만드는데 아주 훌륭한 기초지식이 되어줄 것입니다. 간단한 HTML / CSS 예제 코드를 통해 함께 살펴보겠습니다. Notice 버튼 .alert-box { background-color: slategray; paddin.. 2023. 1. 15. Node.js + Express로 초간단 서버 만들기, 3분 컷 Node.js + Express로 초간단 서버 만들기 '서버'라는 말을 들으면 어떤 이미지를 떠 올리시나요? 대부분의 사람들은 아마도 이런 형태를 떠올릴 것이라 생각합니다. 뭔가 대단히 복잡한 기계장치로 보이고, 대단히 이해하기 어려운 장비처럼 보입니다. 그런데, Server라는 것은 생각보다 "간단"하다는 사실을 알고 계시나요? 서버가 별건가? 서버는 간단하게 서버는 Server입니다. 즉, 원래 뜻은 식당 등에서 서빙을 하는 사람을 지칭합니다. 삼겹살 2인분 갖다 달라면 갖다주는 분이 바로 'Server'인 것이죠. 한국에서는 '고깃집 알바생'이라고 봐야 할라나요? 컴퓨터 세계에서 말하는 서버의 개념도 비슷합니다. 사용자가 무엇인가를 '요청하면 요청한 걸 갖다주는 프로그램'입니다. 컴퓨터 서버 세계의.. 2023. 1. 8. [Javascript] 반복문 for.. in 과 for.. of 의 차이 지난 포스팅에서 배열이 내장함수인 forEach()에 대한 기초적인 내용들을 정리를 해보았습니다. forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) forEach, for...in을 이용한 반복문 기초 프로그램밍을 공부하면서 사람에게 가장 쉽게(?) 다가오는 기능은 바로 '반복문'과 '조건문'이라고 생각합니다. 왠지 내가 코딩 천재가 된 것 같은 착각 아닌 kincoding.com 그러면서 for.. in 반복문도 함께 살펴보았는데요, 이놈의 Javascript에는 for.. of 라는 반복문 형태가 또! 존재합니다. 비슷한 게 뭐가 이리 많어, 헷갈리게! 싶은데요. 역시나 자.. 2023. 1. 5. 이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리 웹페이지를 해석해서 보여주는 브라우저(Browser)의 동작방식 중에는 '이벤트 버블링(Event Bubbling)'이라는 현상이 존재합니다. 왠지 용어가 일반적이지 않고 뭔가 전문가 포스 같은 느낌이 나서 괜히 어렵게 느껴지는 것도 같습니다. 일반적인 사용 케이스에서 살펴보자면, 버튼을 누른 것도 아니고 배경화면을 클릭한 것 뿐인데도 모달창이 닫히게 되는, 뭐 그런 현상들이 바로 이벤트 버블링 현상이 만들어내는 경우입니다. 이번 포스팅에서는 이러한 '이벤트 버블링'과 관련하여 "전문적"이 아닌 "현상적"인 이해를 경험 해보기로 합니다. 이벤트 버블링(Event Bubbling) 일단 테스트를 위한 코드를 간단하게 작성해보도록 합니다. div 태그로 박스를 세 개 만들었습니다. 이벤트 버블링 아래 이미지.. 2023. 1. 3. 이전 1 2 3 다음 반응형
