전체 글45 [JS] 타이머 timer // setTimeout 함수로 타이머 설정 var timer = setTimeout(function() { console.log("타이머가 실행되었습니다."); }, 3000); // 타이머를 취소하여 실행 중지 clearTimeout(timer); setInterval(함수, 초(ms)) : 일정한 시간 간격으로 작업을 반복 실행함. 사용예시 // setInterval 함수로 반복적인 작업 설정 var interval = setInterval(function() { console.log("반복적인 작업이 실행되었습니다."); }, 1000); // 1초마다 반복됨. // 일정 시간 후에 작업 중지 setTimeout(function() { clearInterval(interval); }, 5000);.. 2023. 6. 1. [JS] 이벤트 리스너를 이용해서 속성을 껐다 켰다하기 (toggle) * { margin: 0; padding: 0; } ol, ul { list-style: none; } .select { width: 100%; height: 50px; margin-top: 10px; text-align: center; } .select.one { background-color: #b3b3b3; } .select.two { background-color: #56bec9; } .select.three { background-color: #7ef2f2; } .check_icon { display: none; /* 체크 박스가 보이지 않도록 설정 */ width: 20px; height: 20px; background-color: yellow; margin-top: 15px; } .selec.. 2023. 6. 1. [JS] 이벤트 핸들러 2, ~.js에서만 작성하기 앞서 살펴본 방법은 두가지였습니다. hmtl 파일 안에서 만들기 / html 파일 안에서 일부 + JS 파일에서 일부 만들기 이번에는 JS 파일에서만 작성하여 동작시키는 방법을 알아보겠습니다. 그러기 위해서 필요한 것은 .addEventListener() 라는 함수입니다. 이 함수는 어떤 객체 뒤에 꼬리표로 붙여 사용하는 메소드입니다. 그렇다면 어떤 객체 뒤에 붙일까요? 네, 우리가 제어하길 원하는 html 객체 뒤에 붙입니다. 그러면 그 객체에다 이벤트가 발생시 할일을 하는 함수 '이벤트 핸들러'를 등록해줍니다. 그런데 앞에서 말했듯이 html파일은 건드리지 않는다고 했습니다. 즉 html파일은 건드리지 않고 js파일 내에서 리모컨으로 조종하듯 html의 요소를 요리조리 제어하는 겁니다. 형식은 이렇습.. 2023. 5. 31. [JS] 버튼 누르면 동작하기, 이벤트 핸들러 사용자가 마우스를 클릭하거나 키보드의 키를 누른 것을 컴퓨터 입장에서는 '이벤트'라고 한다. 이런 이벤트가 일어났을 때 할 일이 바로 '이벤트 핸들러'이다. 즉 마우스를 클릭하면 '이런 일'을 해라 할 때 '이런 일=이벤트 핸들러' 인 것. 이 이벤트 핸들러는 먼저 해당하는 객체/요소에 등록이 되어있어야 호출해서 쓸 수가 있다. 등록하는 방법은 다음과 같이 2가지이다. 1. HTML 태그 안에 속성으로 등록하기 (~.html 파일에서 직접 제어) 클릭해 보세요! 2. JS 코드에서 프로퍼티로 등록하기 (~.js 파일에서 제어) window.onload = function() { // 어쩌구 } 아 그렇구나~ 하고 다음 예제로 넘어가서 실제로 어떻게 작동하는지 알아봅시다. 첫번째. (html 내에서 처리).. 2023. 5. 31. [JS] DOM 에서 innerHTML과 contentText의 차이 자바스크립트로 DOM 요소를 제어하는 파트를 공부하다가 innerHTML과 contentText 두 가지가 무슨 차이가 있나 궁금해졌다. innerHTML : HTML 요소의 내용을 조작할 수 있다. textContent: 순수한 텍스트를 가져오거나 설정한다. HTML을 직접 조작해야 한다면 innerHTML을 사용하고, 텍스트 내용에만 관심이 있다면 textContent를 사용하면 된다고 한다. 2023. 5. 31. [JS] 문자를 숫자로, 숫자를 문자로. 간단히 하는 방법 num = 123 r1 = String(num) // 첫번째 방법 r2 = num + "" // 두번째 방법 r1 에는 String() 를 사용해서 숫자 123을 문자열로 변경시켜 할당했습니다. r2 에는 단순히 숫자 123 에 문자열 ""을 더해주었구요. 둘다 결과는 동일하게 '123' 이 됩니다. r1 = '123' r2 = '123' 자바스크립트는 '더하기 연산자 + 에 한해서' 숫자와 문자열을 더하라고 하면 전부 문자열로 합쳐버립니다. 123 + "45" = "12345" 빼기 곱하기 나누기( - * / )는 숫자로 계산해버리구요. 더하기만 문자열로 취급해버립니다. 123 - "45" = 78 123 * "45" = 5535 123 / "45" = 2.7333333333333334 어쨌든, 숫자 .. 2023. 5. 31. [HTML/CSS] css로 html에 배경 이미지 넣고 제어하기 Nice to meet you 2023. 5. 23. [HTML/CSS] HTML 기본 안녕 이아인! 2023년 동남권 ICT 온라인 코딩 풀스택 개발자 양성 온라인 부트캠프 (이름 진짜 길다..) 웹 개발 과정으로 힘찬 발걸음을! 오늘 한 발 내딛었다. 플랫폼은 앨리스. 자체 플랫폼에 대해 거리낌이 있었는데 사용해보니 꽤 빠르고 좋네? 오늘은 1일차로, HTML 기본을 배우고 있다. ㅎㅎ 위를 실행하면 아래와 같은 화면이 나온다. 태그 문서의 주요 내용을 담는 태그인데 익스플로러에서는 지원되지 않으므로 role="main" 이라는 속성을 반드시 주어야 한다. 전체적인 설계 윤곽 메뉴1 메뉴2 메뉴3 이 구역을 대표하는 타이틀 정보 본문 회사 주소 회사 연락처 2023. 5. 15. [python] 모듈과 라이브러리와 패키지 import numpy.random from numpy import random 위 코드는 둘 다 NumPy라는 패키지에서 random이라는 모듈을 불러온다. 모듈은 단일한 한개의 파이썬 파일을 가리킨다. random.py 이런 식이다. 이 파일 안에는 함수, 클래스와 변수 등등이 기록되어 있다. 이런 모듈들을 한 폴더에 모아놓은 것을 패키지라 부른다. 라이브러리란 더 큰 개념인데 패키지와 모듈들을 모아놓은 것을 말한다. 이걸 알아보려고 ChatGPT한테 여러 방법으로 질문했는데 왔다리 갔다리 해서 더 헷갈렸다... 모듈이 아니랬다가 모듈이랬다가... 결국 구글링해서 찾은 게 본문의 내용. 2023. 5. 8. 이전 1 2 3 4 5 다음
