반응형 javascript37 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. HTML / CSS / Javascript 각자의 역할은 무엇일까? HTML / CSS / Javascript 각자의 역할은 무엇일까? 아들놈들이 언젠가 코딩에 관심을 갖고 시작하게 될 때, 한번 봐주었으면 하는 마음으로 웹페이지 제작에 관한 기초적인 내용을 정리해둡니다. 우리는 크롬, 엣지 등의 브라우저를 통해 다양한 웹사이트 혹은 웹페이지에 접속할 수 있습니다. "접속"이라는 표현을 쓰다보니 어딘가로 찾아가서 웹페이지를 열람하는 것으로 이해하기 쉽지만, 사실 이전 포스팅에서 살펴본 GET요청 방식으로 요청을 한 후 "내 컴퓨터"에 내려 받은 웹페이지를 열람하는 것이 인터넷의 특징입니다. 즉, 서버에 '접속'한 후 요청한 웹페이지를 결국 내려 받기 위해 인터넷이라는 망이 필요해지는 것 뿐입니다. 아무튼 인터넷을 탐험하는 브라우저들은 그렇게 동작하고 있었습니다. 사람으로.. 2023. 1. 9. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 반응형
