본문 바로가기
반응형

Javascript51

JavaScript로 버튼을 다루는 방법 2가지(onclick, addEventListenter) JavaScript로 버튼을 다루는 방법 2가지 이전 포스팅에서 자바스크립트로 CSS의 display 속성을 조작하여 Modal 공지창을 띄워주는 방법을 알아보았습니다. Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 displa kincoding.com 공지창을 띄워주기 위해서는 엘리먼트를 클릭하는 행위가 필요했는데요, 이처럼 버튼을 클릭하는 방법에 있어서도 자바스크립트는 2가지의 다른 방식을 활용할 수가 있.. 2023. 1. 16.
Javascript로 알림창 보이기 / 숨기기 (+ 함수로 개선하기) Javascript로 알림창 보이기 / 숨기기 웹 사이트에서 마우스 롤오버를 하면 숨겨져 있던 서브메뉴가 보인다거나, 공지 알림창을 클릭하면 사라지거나 하는 경우는 거의 대부분 Javascript로 CSS의 display 속성 값을 'none' 이나 'block'으로 변경하는 방법을 사용하는 경우가 많습니다. 물론 이와 같은 방법은 알림창 뿐 만이 아니라, 모든 HTML의 엘리먼트 요소들에 적용이 가능합니다. 동작원리도 매우 간단하기 때문에 한번 들여다보고 이해를 해두면, 동적인 UI를 만드는데 아주 훌륭한 기초지식이 되어줄 것입니다. 간단한 HTML / CSS 예제 코드를 통해 함께 살펴보겠습니다. Notice 버튼 .alert-box { background-color: slategray; paddin.. 2023. 1. 15.
CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교 CSS와 JavaScript로 HTML문서 내 Style 적용하는 방법 비교 HTML 문서에는 일반적으로 CSS를 이용해서 스타일링을 합니다. CSS는 스타일링을 위한 목적으로 만들어진 마크업 언어이기도 하니까요. 그런데, JavaScript를 이용해서도 HTML 문서를 스타일링 할 수가 있습니다. 왠지 같은 기능을 서로 하는 것 같은데, 그럴만한 이유는 다 존재합니다. 우선은 CSS와 Javascript가 같은 스타일링을 하는 데 있어 어떻게 서로 다른 모습을 띄는 지 살펴봅시다. 아래와 같은 간단한 샘플코드를 준비해보았습니다. JavaScript Stydy 글자 크기 변경하기 글자 크기를 변경하는 스타일링으로 간단하게 비교해보겠습니다. CSS 경우 Javascript의 경우에는 CSS는 font-si.. 2023. 1. 14.
Node.js + Express로 초간단 서버 만들기, 3분 컷 Node.js + Express로 초간단 서버 만들기 '서버'라는 말을 들으면 어떤 이미지를 떠 올리시나요? 대부분의 사람들은 아마도 이런 형태를 떠올릴 것이라 생각합니다. 뭔가 대단히 복잡한 기계장치로 보이고, 대단히 이해하기 어려운 장비처럼 보입니다. 그런데, Server라는 것은 생각보다 "간단"하다는 사실을 알고 계시나요? 서버가 별건가? 서버는 간단하게 서버는 Server입니다. 즉, 원래 뜻은 식당 등에서 서빙을 하는 사람을 지칭합니다. 삼겹살 2인분 갖다 달라면 갖다주는 분이 바로 'Server'인 것이죠. 한국에서는 '고깃집 알바생'이라고 봐야 할라나요? 컴퓨터 세계에서 말하는 서버의 개념도 비슷합니다. 사용자가 무엇인가를 '요청하면 요청한 걸 갖다주는 프로그램'입니다. 컴퓨터 서버 세계의.. 2023. 1. 8.
반응형

티스토리툴바