전체 글33 [기초]JavaScript 함수(Function) 자바스크립트(JavaScript)에서 함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 재사용 가능하며, 코드의 모듈화와 유지보수를 쉽게 해줍니다. 함수는 선언, 호출, 인자 전달, 반환 값 등의 개념으로 구성됩니다. 1. 함수 선언 (Function Declaration)함수 선언은 function 키워드를 사용하여 함수를 정의합니다. 함수 선언은 호이스팅(hoisting)되므로, 함수 선언 전에 호출할 수 있습니다.function greet(name) { return `Hello, ${name}!`;}console.log(greet("Alice")); // Hello, Alice! 2. 함수 표현식 (Function Expression)함수 표현식은 함수를 변수에 할당하는 방식으로 정의합니다.. 2024. 8. 24. [기초]JavaScript 연산자(Operators) 자바스크립트 연산자(JavaScript Operators)는 변수와 값을 조작하는 데 사용됩니다. 연산자는 산술 연산, 할당, 비교, 논리, 비트, 문자열, 조건, 콤마, 및 typeof 연산자를 포함합니다. 각 연산자는 고유한 기능을 제공하며, 다양한 프로그래밍 상황에서 유용하게 사용할 수 있습니다. 연산자: 산술 연산자, 할당 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 문자열 연산자, 조건 연산자, 콤마 연산자, typeof 연산자, 삭제 연산자, in 연산자, instanceof 연산자 등이 있다. 1. 산술 연산자 (Arithmetic Operators)산술 연산자는 수학적 계산을 수행합니다.덧셈 ('+'): 두 피연산자를 더합니다.let sum = 5 + 3; // 8 뺄셈 ('-').. 2024. 8. 23. [기초]JavaScript 자료형(Data Type) 자바스크립트(JavaScript)는 동적이고 느슨한 타입의 언어로, 다양한 자료형을 지원합니다. 자료형은 크게 원시 타입(Primitive Type)과 참조 타입(Reference Type)으로 구분됩니다. 원시 타입 (Primitive Type)원시 타입은 하나의 값을 담는 단순한 데이터 유형입니다. 자바스크립트는 7가지 원시 타입을 제공합니다. 1. 숫자(Number)정수와 부동 소수점을 포함한 숫자를 나타냅니다.예시: 42, 3.14특별한 숫자 값: Infinity, -Infinity, NaN (Not-a-Number)let age = 25;let pi = 3.14;let inf = Infinity;let notANumber = NaN; 2. 문자열(String)텍스트 데이터를 나타냅니다. 큰따옴.. 2024. 8. 22. [기초]JavaScript란? JavaScript는 웹 개발을 위한 프로그래밍 언어로, 웹 페이지를 동적이고 상호작용적으로 만들기 위해 사용됩니다. HTML과 CSS와 함께 웹의 3대 핵심 기술 중 하나로 간주되며, 웹 브라우저뿐만 아니라 서버 측에서도 실행될 수 있습니다. 아래는 JavaScript의 주요 특징과 역할을 설명합니다. 역사와 배경탄생: JavaScript는 1995년에 Netscape의 브렌던 아이크(Brendan Eich)에 의해 개발되었습니다. 원래는 "Mocha"라는 이름이었으나, 이후 "LiveScript"로 바뀌었고, 최종적으로 "JavaScript"라는 이름을 가지게 되었습니다. "JavaScript"라는 이름은 당시 Java 언어의 인기에 편승하기 위한 마케팅 전략이었습니다.표준화: JavaScript는 .. 2024. 8. 21. [기초]CSS 그리드(Grid) CSS Grid 레이아웃은 웹 페이지의 복잡한 2차원 레이아웃을 간편하게 구성할 수 있는 강력한 레이아웃 시스템입니다. 그리드는 행(row)과 열(column)을 사용하여 컨테이너 안에 아이템을 배치합니다. CSS Grid는 주로 레이아웃의 큰 틀을 잡는 데 사용되며, CSS Flexbox와 함께 사용하면 더욱 유연한 디자인을 만들 수 있습니다. 기본 구성 요소그리드 컨테이너(Grid Container): 그리드 레이아웃이 적용되는 부모 요소입니다.그리드 아이템(Grid Items): 그리드 컨테이너 내의 자식 요소들입니다. 그리드 컨테이너 속성1. display: 그리드 컨테이너를 정의합니다.값: grid | inline-grid.container { display: grid;} 2. grid-te.. 2024. 8. 20. [기초]CSS 플렉스박스(FlexBox) Flexbox(유연한 박스 레이아웃 모듈)는 복잡한 레이아웃을 간편하게 구성할 수 있도록 설계된 1차원 레이아웃 모델입니다. Flexbox는 요소를 정렬하고 공간을 분배하며, 다양한 화면 크기와 장치에서도 유연하게 레이아웃을 조정할 수 있습니다. Flexbox의 기본 구성 요소Flex 컨테이너: Flexbox 레이아웃의 부모 요소로, 자식 요소들을 Flex 아이템으로 취급합니다.Flex 아이템: Flex 컨테이너 내의 직속 자식 요소들입니다. Flex 컨테이너 속성1. display: Flex 컨테이너를 정의합니다.값: flex | inline-flex.container { display: flex;} 2. flex-direction: Flex 아이템의 주 축(main axis)을 설정합니다.값: r.. 2024. 8. 19. 이전 1 2 3 4 5 6 다음
