creamymood의 개발 공부 발자취 💭

HTML에서 태그는 표를 만드는 데 사용돼! 아주 쉽게 설명해줄게.기본 구조표를 만들려면 태그 안에 , 같은 태그를 사용해.: 표 전체를 감싸는 태그: 표의 행(row): 표의 셀(cell), 데이터를 넣는 곳   응 그래.. 개념은 알겠는데 이걸 뭔가 시각적으로 예상이 안온다면 ? 💬 ..   좀 더 구체적으로, "tr"은 행을 만들고, "td"는 셀을 만든다는 개념을 시각적으로 설명해줄게.1. 표의 기본 구조표는 **행(row)**과 **열(column)**로 구성돼.행 (tr): 가로로 길게 쭉 늘어나는 줄.열 (td): 세로로 데이터를 넣는 칸.예시로 이해하기표를 그릴 때, 상상해봐!이름나이철수20영희22이 표에서 **'이름'**과 **'나이'**는 첫 번째 행에 들어가고, 철수와 20, ..

✅ 이벤트(Event)란?이벤트는 웹 페이지에서 발생하는 모든 행동이나 변화를 의미해.예를 들면:버튼을 클릭했을 때 (click 이벤트)키보드를 눌렀을 때 (keydown 이벤트)마우스를 올려놓았을 때 (mouseover 이벤트)입력 창에 글자를 입력했을 때 (input 이벤트)이런 것들이 전부 "이벤트"야.✅ 이벤트 핸들러(Event Handler)란?이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수야.즉, "이벤트가 발생하면 이 코드를 실행해!"라고 지정하는 역할을 해.📌 예제 (이벤트 vs. 이벤트 핸들러)// 이벤트: 'click' (클릭하는 행위)// 이벤트 핸들러: 클릭했을 때 실행할 함수document.querySelector("button").addEventListener("click"..

문자열 함수는 문자열을 다룰 때 사용하는 함수나 메소드들을 의미합니다.문자열은 텍스트 데이터를 표현하는 데 사용되며, 이러한 문자열을 다룰 때 자주 쓰이는 함수들이 여러 가지 있습니다.예를 들어, 문자열을 자르거나, 결합하거나, 변환하거나, 특정 문자나 패턴을 찾을 수 있는 다양한 함수들이 존재합니다. 문자열 함수 예시: str.함수📝length: 문자열의 길이를 반환합니다.let str = "hello";console.log(str.length); // 5 📝charAt(): 특정 인덱스에 위치한 문자를 반환합니다.let str = "hello";console.log(str.charAt(1)); // "e" 📝substring(): 문자열의 일부를 잘라내는 함수입니다.let str = "hel..

1. 함수란?함수는 어떤 일을 대신 해주는 로봇이라고 생각하면 돼!예를 들어, **"계산기"**가 있다고 해보자. 계산기에 숫자를 넣으면 더하거나 빼주지?자바스크립트에서도 특정한 일을 하는 코드 묶음을 **"함수"**라고 해.2. 함수 만드는 방법 🍕 피자 가게 이야기로 쉽게 이해하기!🍽 함수 선언식 (Function Declaration) : "미리 준비된 레시피"피자 가게에서 레시피를 미리 공책에 적어두면 언제든 피자를 만들 수 있어요!function makePizza() { console.log("🍕 피자를 만들었어요!"); } makePizza(); // 결과: 🍕 피자를 만들었어요!레시피(함수)를 미리 선언하면 가게(코드) 어디서든 사용할 수 있어요!함수를 위에서 선언하지 않아..

연산자 (Operators):연산자는 변수나 값에 대해 특정 작업을 수행하는 기호예를 들어, 산술 연산자(+, -, *, /), 비교 연산자(==, !=, 등), 논리 연산자(&&, ||, !) 등 비교 연산자는 연산자 중 하나로, 두 값을 비교하여 true 또는 false를 반환자바스크립트에서 사용되는 주요 비교 연산자== (같다)값이 같은지 비교합니다. 형 변환을 허용합니다.예: 5 == '5'는 true를 반환=== (엄격한 같음)값과 자료형이 모두 같은지 비교합니다. 형 변환을 하지 않음.예: 5 === '5'는 false를 반환합니다.!= (같지 않다)값이 다른지 비교합니다. 형 변환을 허용합니다.예: 5 != '5'는 false를 반환합니다.!== (엄격한 같지 않음)값과 자료형이 다르면 t..

오늘도 화이팅 ~ 익숙해지기비교연산 비교연산은 언제나 boolean 데이터로 반환 한다 !데이터가 언제나 참 또는 거짓 * 등호 (=)은 대입연산자 이므로 기호 갯수를 잘 확인 해야 한다* 같다(==) / 완전히 같다 (===) 👉🏻완전히 같다는 자료형 까지 일치 ~(!= 같지 않다, !== 완전히 같지 않다) * 문자열도 비교 연산 가능( 문자가 같은지)조건문조건문이란 주어진 조건의 참/거짓에 여부에 따라 프로그램 흐름을 결정할 수 있는 구문 if (result) {alert("사용자가 확인을 눌렀습니다.");}else { alert("사용자가 취소를 눌렀습니다.");}즉, true일 때 if가 실행되고, false일 때 else가 실행되는 구조 !!정리하면:if는 첫 번째 조건을 확인하고,else..

브라우저의 기본 제공 기능인 **대화 상자(Dialog box)**을 알아보자자바스크립트에서는 사용자와 상호작용을 위해 여러 가지 대화 상자를 사용할 수 있다.이들은 Window 객체의 메서드로 분류 Q. 그러니까 이런 대화 상자 안에 document.querySelector의 변수 같은 걸 넣을 수 있다는거지 ?A. 네. document.querySelector를 사용해서 웹 페이지에서 특정 요소를 선택한 후, 그 값을 alert, prompt, confirm 등의 대화 상자에 넣을 수 있습니다.1. Alert 대화 상자 alert()사용자에게 정보를 알리는 창을 띄우는 메서드.사용자에게 하나의 버튼(확인)을 제공alert("이것은 알림 창입니다!");   2. Confirm 대화 상자 (confirm..

디버깅이 뭐야?디버깅(Debugging)은 프로그램에서 **틀린 부분(버그)**을 찾아서 고치는 과정이야.🔍 디버깅을 쉽게 설명하면?📌 초등학생 숙제 검사랑 비슷해!숙제를 다 했어. (코드를 작성했어)맞았는지 확인해. (실행해 봐)틀린 부분이 나오면 고쳐! (에러를 찾고 수정해)

아이고 끙끙 어렵다 어려워한 발자국이 험난한 개발자로의 길..  자바스크립트에서 DOM (Document Object Model)은 웹 페이지의 구조를 다루는 방법이야.간단하게 말하자면, DOM은 웹 페이지를 자바스크립트로 제어하고 수정할 수 있게 해주는 창구 같은 거야. HTML 문서가 있으면, DOM은 그 문서의 각 요소(제목, 단락, 버튼 등)를 객체로 변환하고,자바스크립트는 이 객체를 조작해서 페이지의 내용이나 스타일을 변경할 수 있어.💡자바스크립트에서 선택자를 사용할 때, 괄호 안에 작은 따옴표(' ')나 큰 따옴표(" ")는 꼭 써야 한다.   두 가지 모두 괜찮고, 중요한 건 선택자 문자열을 감싸야 한다는 점 !    즉, 아이디나 클래스를 선택할 때는 다음처럼 사용합니다:getElemen..

0. 변수: 데이터를 저장하는 상자자바스크립트에서는 변수를 이용해 값을 저장할 수 있어. * 대입 연산자 : 어떤 값을 변수에 넣어주는 기호(=)야! 쉽게 말해서, 컴퓨터에게 "이 값 저장해!" 라고 하는 것이야.    let 사과 = 5;   ➡️ "사과라는 상자에 5를 넣어줘!" 라는 뜻이야! 🍏    let 이름 = "Jane";   ➡️ "이름이라는 상자에 Jane을 넣어줘!" 라는 뜻이야! 💡 ✅ 변수는 정보를 저장하는 "이름표가 붙은 상자"✅ 값을 바꿀 수 있어서 "변수" 라고 불림✅ 이름을 부르면 안에 들어있는 값을 가져올 수 있음 📌 할당하다의 뜻!👜 **"가방에 물건을 넣는 것"**을 생각해 보자!변수 = 가방 🎒값 = 물건 🎁할당(=) = 가방에 물건을 넣는 행동  1. 객체..