chLog

JavaScript 제어문 (Control Statements)✅ 제어문은 조건을 검증하여 코드 실행 흐름을 제어하는 역할✅ 조건문(Conditional Statements)과 반복문(Loop Statements)으로 구분📌 1. 조건문 (Conditional Statements)✅ 조건이 참(true)인지 거짓(false)인지에 따라 코드 실행 결정✅ 비교 연산자(>, , ==, === 등)와 논리 연산자(&&, ||, !)를 활용🔹 1) if 문if (조건식) { // 조건이 참일 때 실행}let number = 10;if (number > 0) { console.log("양의 정수입니다.");}🔹 2) if...else 문if (조건식) { // 조건이 참일 때 실행} else { //..

JavaScript 연산자 (Operators)✅ 연산자는 수학적 계산 및 논리적 비교를 수행하는 코드✅ 산술, 할당, 비교, 논리, 삼항 연산자 등이 있음📌 1. 산술 연산자 (Arithmetic Operators)연산자설명+덧셈-뺄셈*곱셈/나눗셈 (몫 + 나머지)%나머지 연산++1 증가 (증가 연산자)--1 감소 (감소 연산자) let x = 10;let y = 3;console.log(x + y); // 13console.log(x - y); // 7console.log(x * y); // 30console.log(x / y); // 3.333...console.log(x % y); // 1💡 증감 연산자 (++, --)x = 10;console.log(x++); // 10 (출력 후 증가)co..

JavaScript 변수와 자료형📌 변수: 데이터를 저장하기 위한 공간✅ 변수는 데이터를 저장하고 나중에 재사용할 수 있도록 하는 역할✅ 변수를 사용하면 코드의 유지보수성과 가독성이 향상됨📌 변수 명명 규칙🔹 필수 규칙✔ 첫 문자는 영문자(a-z, A-Z), _(언더스코어), $(달러)만 사용 가능✔ 띄어쓰기 불가능✔ 대소문자 구분 (num과 Num은 다름)✔ 예약어(let, var, function 등) 사용 불가let 1num; // ❌ 오류let num ber; // ❌ 오류🔹 선택 규칙 (권장)✔ lowerCamelCase 사용 권장 (userAge, currentYear)let currentYear = 2024;let birthYear = 2000;let age = currentYear ..

JavaScript 소개✅ JavaScript는 웹에서 동작하는 프로그래밍 언어✅ 웹 개발, 서버 구축, 데이터베이스 연동 등 다양한 용도로 사용 가능✅ 웹 브라우저뿐만 아니라 Node.js 환경에서도 실행 가능📌 JavaScript의 역할1️⃣ HTML (HyperText Markup Language)웹 콘텐츠의 구조와 의미를 정의하는 마크업 언어2️⃣ CSS (Cascading Style Sheets)HTML 콘텐츠에 스타일을 적용하는 스타일 규칙 언어3️⃣ JavaScript (JS)웹 페이지에 동적인 기능 추가프로그래밍 가능 (제어문, 함수, 이벤트 처리 등)📌 JavaScript의 활용1️⃣ 웹 클라이언트 애플리케이션 개발 (프론트엔드)✅ 사용자가 웹 요소를 조작할 수 있도록 UI(User ..

Node.js란?✅ JavaScript는 기본적으로 웹 브라우저에서 실행됨✅ Node.js는 JavaScript를 브라우저 밖에서도 실행 가능하도록 만들어줌✅ 백엔드 개발, 서버 구축, 파일 시스템 조작, 데이터베이스 연동 등의 작업 수행 가능📌 Node.js 설치 방법🔗 Node.js 공식 홈페이지→ 해당 사이트에서 LTS 버전을 다운로드하여 설치📌 Node.js 설치 확인설치 완료 후 터미널을 실행하여 아래 명령어 입력:node -vnpm -v✅ 버전이 출력되면 설치 성공!📌 Node.js 실행 테스트1️⃣ JavaScript 파일 생성 (파일명.js)2️⃣ 통합 터미널 열기3️⃣ 아래 명령어 실행:node 파일명.js✅ 콘솔창에서 결과값이 출력되면 정상 작동!🚀 이상 Node.js 설치 및..

CSS Flexbox📌 Flexbox의 주요 구조1️⃣ Flex 컨테이너 (Container)✅ Flexbox 레이아웃의 테두리 역할✅ Flex 컨테이너 내의 직접 자식 요소만 Flex 아이템(Item)이 됨.container { display: flex; /* Flex 컨테이너 지정 */}💡 중첩 Flex 가능A 요소 → Flex 컨테이너 지정B 요소 → A의 Flex 아이템B 요소를 다시 Flex 컨테이너로 지정하면 C 요소가 Flex 아이템2️⃣ Flex 아이템 (Item)✅ Flex 컨테이너 내의 요소들✅ 크기, 순서, 정렬 등을 지정 가능.item { flex: 1;}📌 Flexbox의 축1️⃣ 기본 축 (Main Axis)✅ Flex 아이템이 배치되는 방향✅ 기본값 → 가로 정..

CSS (Cascading Style Sheets)📌 CSS란?✅ 웹 페이지의 디자인과 레이아웃을 구성하는 스타일 시트 언어✅ HTML 요소의 스타일을 지정 (글꼴, 색상, 정렬, 배치 등)✅ Cascading(캐스케이딩): 위에서 아래로 흐르는, 상속되는 스타일 적용 방식📌 CSS 스타일 형식/* 기본형 */선택자 { 속성1: 속성값1; 속성2: 속성값2; }✅ 스타일 규칙 → 속성과 값이 하나의 쌍으로 이루어짐✅ 세미콜론( ; )으로 여러 개의 스타일을 지정 가능p { text-align: center; /* 텍스트 가운데 정렬 */ color: blue; /* 글자 색상 변경 */}📌 CSS 스타일 시트✅ 스타일을 한곳에 모아 관리 가능✅ 브라우저 기본 스타일✅ 사용자 스타일 → 인..

HTML 텍스트 관련 태그📌 태그 (제목 태그)✅ 제목을 나타내는 태그 (heading)✅ h1 ~ h6 사용 (1이 가장 크고 중요, 6이 가장 작고 덜 중요)✅ 검색 엔진이 문서 구조를 인덱싱할 때 활용✅ 브라우저가 제목 앞뒤에 자동으로 여백 추가가장 중요한 제목두 번째로 중요한 제목세 번째로 중요한 제목📌 태그 (문단 태그)✅ 텍스트 단락(문단)을 만드는 태그✅ 단락은 항상 새 줄에서 시작되며, 브라우저가 자동으로 공백 추가첫 번째 단락입니다.두 번째 단락입니다.📌 태그 (줄바꿈 태그)✅ 새 단락을 시작하지 않고 줄 바꿈을 원하는 경우 사용✅ 닫는 태그 없이 단독으로 사용 가능✅ XHTML에서는 처럼 닫는 태그를 붙이는 것이 필수첫 번째 문장입니다.두 번째 문장입니다.📌 태그 (인라인..

HTML 속성 (Attributes)📌 HTML 속성이란?✅ 모든 HTML 요소는 속성을 가질 수 있음✅ 요소에 대한 추가 정보를 제공✅ 속성은 항상 시작 태그에 지정되며, name="value" 형태로 제공 내용 ✅ 속성 이름 다음엔 등호(=)✅ 속성 값은 따옴표(" ")로 감싸야 함📌 HTML 속성 작성 규칙✅ 공백 사용요소 이름과 속성 사이에는 공백여러 속성이 있는 경우 속성 사이에도 공백✅ 소문자 속성 사용 권장HTML 표준에서 대소문자 구별 X, 하지만 소문자 사용을 권장XHTML에서는 반드시 소문자 사용 필수✅ 속성 값은 항상 따옴표 사용 권장HTML 표준에서는 따옴표가 필수는 아니지만,XHTML 등 더 엄격한 문서 유형에서는 따옴표 필수📌 HTML 속성(Attributes)의 종류✅ h..

HTML 개요📌 HTML이란?HTML (HyperText Markup Language)✅ 웹 페이지를 만들기 위한 표준 마크업 언어 (프로그래밍 언어 X)✅ HyperText: 문서를 서로 연결하는 링크✅ Markup: 태그를 삽입하여 문서의 형식, 구조, 스타일을 지정📌 웹 문서 특징문서 유형특징일반 문서 (엑셀, 워드)입력 프로그램 = 확인 프로그램웹 문서입력 프로그램 ≠ 확인 프로그램웹 편집기 (Web Editor)HTML을 마크업(Markup)웹 브라우저 (Web Browser)HTML을 해석하여 표시✅ HTML 문서 확장자: .html📌 HTML 기본 구조🔹 HTML 문서 예제 HTML 문서의 제목 태그 HTML CSS JavaScript📌 HTML 주요 태그태그설명문서 유형..