![Featured image for [JavaScript] Event](https://tired-i.com/wp-content/uploads/2026/01/javascript-even-image.png)
1. Event 사용자와 웹 페이지 간의 상호작용이 있을 때 적절한 액션을 취한다. 가. 이벤트 유형 이벤트 이름 설명 click 사용자가 마우스 버튼을 클릭했을 때 발생 dblclick 사용자가 마우스 버튼을 빠르게 두 번 클릭했을 때 발생 mousedown 사용자가 마우스 버튼을 누르는 순간 발생 mouseup 사용자가 마우스 버튼을 눌렀다 뗄 때 발생 mouseover 마우스 포인터가 요소 위로 … 더 읽기
![Featured image for [JavaScript] FOR문](https://tired-i.com/wp-content/uploads/2026/01/javascript-for-image.jpg)
1. FOR문 4가지 방법이 있다. 가. for 특별할 것 없는 일반적인 for문이다. 나. for … in for…in은 객체의 모든 열거 가능한 속성을 순회한다. (이를 enumerable하다고 표현하더라…) 이는 객체의 속성 Key를 반환한다. 주로 객체의 속성을 순회할 때 사용된다. 배열에도 사용할 순 있지만 추천되지 않는다. 다. for … of for…of는 반복 가능한 객체(Array, Map, Set, String, arguments … 더 읽기
![Featured image for [JavaScript] 자료형, 함수](https://tired-i.com/wp-content/uploads/2026/01/javascript-image.png)
1. 자료형 Javascript에서 사용할 수 있는 자료형은 Primitive type과 객체(objects)가 있다. 2. Primitive type Primitive type은 Null, Undefined, Boolean, Number, String, BigInt, Symbol이 있다. 나머지는 모두 객체(objects)다. 가. Symbol Symbol은 ES6에서 도입된 새로운 Primitive type이다. 고유하고 변경 불가능한 값을 표현하기 위해 사용된다. Symbol은 객체 속성의 키로 사용될 때 유용하다. 각 Symbol이 고유하므로, 다른 속성 키와 … 더 읽기
![Featured image for [CSS] Positioning, Flexbox](https://tired-i.com/wp-content/uploads/2026/01/css-positioning-image.png)
1. Positioning 가. position Position 옵션 설명 static (default) Position의 기본값. 상위 요소나 다른 요소에 영향을 받지 않고 문서의 흐름에 따라 위치가 결정됩니다. relative 일반적인 문서 흐름에 따라 배치하고, 조상 요소를 기준으로 top, right, bottom, left의 값으로 위치를 조정. absolute 가장 가까운 위치 지정 조상 요소(position 값이 static이 아닌 요소)에 대해 상대적으로 위치를 결정하며, 위치 … 더 읽기
![Featured image for [JavaScript] BOM, DOM](https://tired-i.com/wp-content/uploads/2026/01/javascript-bom-image.png)
1. BOM W3Schools.com W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. 객체 설명 screen 모니터의 정보 navigator 현재 실행 중인 브라우저의 정보 location URL의 정보 history 방문 기록에 대한 정보 document 문서에 대한 … 더 읽기
1. destructuring operator What does this javascript syntax means: const { headers, method, url } = request; It’s not clear what this syntax means const { headers, method, url } = request; found in this tut https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/
0. 참고자료 1. async async function – JavaScript | MDNMDN async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. (출력값이 Promise 객체다.) 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는 것과 많이 비슷합니다. (특장점!) 비동기 함수를 사용하는 그 어떤 … 더 읽기
![Featured image for [JavaScript] var과 let](https://tired-i.com/wp-content/uploads/2026/01/javascript-var-image.png)
1. 결론 생활코딩 강의를 봅시다. (https://youtu.be/61iolhWgQt0) 생활코딩 유튜브 결론은 var보단 let을, 가능하다면 const를 사용하자. 2. 이유 var let const var let const global O X X script scope X O O function local scope O O O block scope X O O 재선언 O X X 재할당 O O X const는 값을 재할당 할 … 더 읽기
계산기 이렇게 생긴 계산기를 Html, CSS, JS를 이용해서 만들어보자. 유튜버 수코딩님의 강의 영상을 보고서 따라 했다. 클론 코딩을 하면서 배운 점을 정리해보자. 1. 파일 보관 중인 Github 주소 : index.html style.css main.js CSS 단위 참고! https://webclub.tistory.com/356 height: 100vh height: 100vh;가 필요한 이유. 없으면 이렇게 된다. 그 이유에 대하여 알아보면 … 별도로 body의 높이를 지정하지 않으면 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 JS 코드 설명 main.js 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css 수정 clamp라는 클래스를 지닌 title에 대하여 적용될 CSS 코드를 작성한다. clamp 되었을 경우에 텍스트는 2줄로 고정이 되고 초과한 글자는 생략된다. 버튼이 클릭된 경우 아이콘을 180도 회전한다. index.html 수정 clamp된 상태가 기본이기 때문에 class에 clamp를 추가한다. … 더 읽기
