우리가 사용하는 값이 어떤 데이터 타입을 가지고 있는지 확인하기 위해 typeof 연산자를 사용했다.참고로 typeof 연산자의 결과가 모든 타입과 1:1로 매칭되지 않는다.typeof 'SeopE'; // stringtypeof Symbol(); // symboltypeof {}; // objecttypeof []; // objecttypeof true; // booleantypeof(false); // booleantypeof(123); // numbertypeof(NaN); // numbertypeof(456n); // biginttypeof(undefined); // undefined 일단 typeof null을 실행하면 문자열 null이 리턴되는게아니라 문자열 object가 리턴되는데이것은 자바..

모던 자바스크립트 (Modern JavaScript)더보기현 시점에서 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트자바스크립트는 다른 프로그래밍 언어에 비해서 데이터 타입이 상대적으로 유연한 특징이 있다.여기서 유연하다는 말은 상황에 따라서 데이터 타입이 변할 수도 있다는 의미를 가지는데,파이썬 같은 경우에는 일반적으로 서로 다른 데이터 타입끼리는 연산을 할 수가 없으며 (ex: 2+"3" → 숫자 + 문자열)데이터 타입의 구분이 엄격한 C나 Java 같은 경우에는 변수에도 따로 타입을 정해줘야 하기 때문에한번 타입이 정해진 변수에는 해당 타입의 값만 할당할 수 있다. 하지만 자바스크립트에서 숫자2와 문자열"3"을 더하면 숫자2가 문자열"2"로 되어 문자열"23"이 되고숫자2와 문..

▼ HTML, CSS JavaScript더보기 Logo menu-1 menu-2 menu-3 menu-4 What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen boo..

▼ HTML, JavaScript 문서더보기 sign up Stay Signed in   sign up Stay Signed in " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스HTMl 태그들 중에서 input 태그는 타양한 타입들을 가지고 있다.위 로그인창을 보면 일반적으로 글을 입력하는 텍스트 타입과입력값을 자동으로 가려주는 패스워드 타입,단순한 클릭이 가능한 버튼 타입,클릭을 통해서 선택과 해지가 가능한 체크박스 타입등을 가지고 있다. 이 밖에도 다양한 타입들이 있지만 평소에 많이 접하는 타입은 이 정도라고 볼 수 있는데이러한 input 태그를 다룰 때 활용할 수 있는 이벤트..

▼ HTML, CSS, JavaScript 문서더보기 keydown keypress keyup key code Esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 ` 1 2 3 4 5 6 7 8 9 0 - = BackSpace Tab Q W E R T Y U I O P [ ] \ CapsLock A ..

▼ HTML, CSS 문서더보기 mousemove mouseover / mouseout cell-1 cell-2 cell-3 cell-4 * { box-sizing: border-box;}body { padding: 50px;}.box { display: flex; width: 350px; height: 350px;}#box1 { justify-content: center; align-items: center; margin-bottom: 40px; font-size: 35px; background-color: #acfffc;}#box2 { flex-flow: row wrap; position: relative; padding: 35px; background-co..

▼ HTML, CSS, JavaScript 문서더보기 #mouse { width: 240px; height: 390px; border: 1px solid #333333; border-radius: 150px; overflow: hidden;}#btns { display: flex; position: relative; width: 100%; height: 150px; border-bottom: 1px solid #333333;}#btn0 { width: calc(50% - 1px); height: 100%; border-right: 1px solid #333333;}#btn1 { position: absolute; left: 50%; top: 50..

▼ HTML, JavaScript더보기 Link 네이버 접속하기 // 브라우저의 기본 동작const link = document.querySelector("#link");const checkbox = document.querySelector("#checkbox");const input = document.querySelector("#input");const text = document.querySelector("#text");대부분의 이벤트는 발생하는 순간 각 태그별로 혹은 문서 전체적인 측면에서브라우저가 기본적으로 갖고 있는 어떠한 동작들을 수행한다. ▼ 사용자가 웹 페이지를 사용하면서 흔하게 접하는 이벤트 태그는 클릭했을 때 href 속성에 담긴 주소로 웹 페이지 이동checkbox는 클릭을 ..

▼ HTML, CSS, JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 구름이 산책 게임 독서 청소 .item { margin: 10px 0; cursor: pointer;}.done { opacity: 0.5; text-decoration: line-through;}// 이벤트 위임 (Event Delegation)const list = document.querySelector("#list");for (let item of list.children) { item.addEventListener("click", function (e) { ..

▼ HTML, CSS 문서더보기 content 오늘 할 일 list 자바스크립트 공부 구름이 산책 게임 독서 청소 body * { padding: 7px 10px; margin: 5px 8px; color: #ffffff; font-size: 12px; background-color: rgba(0, 0, 0, 0.4);}h1 { font-size: 20px; font-weight: 500;}아래는 각 요소별로 클릭 타입에 이벤트 핸들러들을 등록한 상태이다.// 이벤트 버블링 (Event Bubbling)const cont..