류지 프로젝트

1. 기본 반복문자바스크립트의 기본 반복문에는 for, while, do...while이 있으며, 이는 조건을 기반으로 특정 코드를 반복 실행할 때 사용됩니다. for문은 초기식, 조건식, 증감식을 포함하여 반복 횟수가 명확할 때 주로 사용되며, 가장 많이 쓰이는 반복문입니다. while문은 조건이 참인 동안 계속 반복하며, 반복 횟수가 정해져 있지 않거나 조건에 따라 반복을 제어하고 싶을 때 유용합니다. do...while문은 최소 한 번은 실행된 후 조건을 검사하기 때문에, 적어도 한 번 실행이 보장되는 특징이 있습니다. 이 반복문들은 배열이나 객체와 무관하게, 반복적으로 어떤 작업을 수행할 때 사용됩니다. 1. while 문while 문은 자바스크립트에서 조건이 참(true)인 동안 반복해서 코드를..

프론트엔드/JavaScript 2025. 4. 10. 14:02

1. 제어문자바스크립트의 제어문은 프로그램의 흐름을 개발자가 원하는 방식으로 조정하기 위해 사용하는 구문입니다. 대표적으로 조건에 따라 실행을 분기하는 if, else if, else, switch 같은 조건문과, 특정 코드를 반복 실행하는 for, while, do...while 같은 반복문이 있습니다. 또한, 반복을 빠져나오거나 건너뛸 수 있는 break와 continue 같은 키워드도 제어문에 포함됩니다. 이러한 제어문을 활용하면 코드의 흐름을 상황에 맞게 결정하고, 반복 작업을 효율적으로 처리할 수 있어 프로그램의 논리를 더 정교하게 구성할 수 있습니다. 2. 조건문자바스크립트의 조건문은 주어진 조건의 참(true) 또는 거짓(false)에 따라 코드의 실행 흐름을 제어하는 데 사용됩니다. 가장 ..

프론트엔드/JavaScript 2025. 4. 10. 01:58

1. 연산자연산자란 두 개 이상의 값(피연산자)을 가지고 연산을 수행하여 결과를 만들어내는 기호 또는 기호의 조합입니다. 자바스크립트에서는 덧셈(+)이나 뺄셈(-)처럼 수학적인 계산을 하는 산술 연산자, 크기를 비교하는 비교 연산자(>, =,  1. 산술 연산자 (Arithmetic Operators)숫자 계산을 할 때 사용합니다.let a = 10;let b = 3;console.log(a + b); // 13console.log(a % b); // 1 2. 비교 연산자 (Comparison Operators)두 값을 비교하여 true 또는 false를 반환합니다.let x = 5;let y = "5";console.log(x == y); // trueconsole.log(x === y); // fa..

프론트엔드/JavaScript 2025. 4. 10. 01:54

1. 변수자바스크립트에서 변수는 데이터를 저장하고 나중에 재사용하기 위해 이름을 붙인 저장 공간입니다. var, let, const 키워드를 사용하여 변수를 선언할 수 있으며, 각각의 키워드는 변수의 스코프(유효 범위)와 재할당 가능 여부에 따라 다르게 동작합니다. 예를 들어, let은 블록 스코프를 가지며 재할당이 가능하고, const는 블록 스코프를 가지지만 재할당이 불가능한 상수를 선언할 때 사용합니다. 변수에는 숫자, 문자열, 객체, 배열, 함수 등 다양한 데이터를 저장할 수 있으며, 자바스크립트는 동적 타입 언어이기 때문에 변수에 저장된 값의 자료형은 언제든지 바뀔 수 있습니다.let name = "apple"; 1. 변수 선언 방법자바스크립트에서는 변수를 만들 때 다음 세 가지 키워드를 사용합..

프론트엔드/JavaScript 2025. 4. 9. 02:02

1. 자바스크립트자바스크립트(JavaScript)는 웹 페이지를 동적으로 만들기 위해 사용되는 프로그래밍 언어입니다. HTML과 CSS가 각각 웹 페이지의 구조와 스타일을 담당한다면, 자바스크립트는 사용자와의 상호작용을 처리하고 웹 페이지의 동작을 제어하는 역할을 합니다. 예를 들어 버튼 클릭, 폼 입력, 애니메이션 효과 등 다양한 기능을 구현할 수 있으며, 최근에는 Node.js와 같은 환경을 통해 서버 개발에도 널리 사용되고 있습니다. 자바스크립트는 대부분의 웹 브라우저에서 실행되며, 현대 웹 개발에 필수적인 핵심 기술 중 하나입니다. node.jsNode.js는 자바스크립트를 웹 브라우저가 아닌 컴퓨터의 서버 환경에서도 실행할 수 있도록 만들어진 오픈소스 런타임입니다. 구글의 V8 자바스크립트 엔진..

프론트엔드/JavaScript 2025. 4. 8. 20:13

1. animationanimation은 CSS에서 요소에 움직임(애니메이션 효과)을 부여할 수 있는 속성으로, 시간에 따라 스타일이 자연스럽게 변하도록 만듭니다. @keyframes 규칙을 사용하여 시작부터 끝까지의 상태를 정의하고, animation-name, animation-duration, animation-timing-function 등의 속성을 조합하여 반복 여부, 속도, 지연 시간 등을 설정할 수 있습니다. 예를 들어, 박스를 점점 커지게 하거나, 색을 서서히 바꾸거나, 계속 회전하게 만드는 등 다양한 시각적 효과를 줄 수 있습니다. CSS만으로도 부드럽고 다채로운 인터랙션을 만들 수 있기 때문에 웹 디자인에서 자주 사용됩니다. @keyframes@keyframes는 CSS에서 애니메이션의..

프론트엔드/HTML, CSS 2025. 4. 6. 19:40

1. transformtransform은 HTML 요소에 회전, 크기 조절, 이동, 기울이기 등의 2D 또는 3D 변형 효과를 적용할 수 있는 CSS 속성입니다. 이 속성을 사용하면 요소를 원래 위치나 모양에서 벗어나 다양한 시각적 효과를 줄 수 있으며, 대표적으로 translate()(이동), rotate()(회전), scale()(확대/축소), skew()(기울이기) 함수 등이 있습니다. 예를 들어 transform: rotate(45deg);를 사용하면 요소를 45도 회전시킬 수 있습니다. 애니메이션이나 인터랙션 효과를 만들 때 자주 활용됩니다. 1. translate(x, y) – 이동하기요소를 x축과 y축 방향으로 이동시킵니다.단위는 px, % 등 사용할 수 있습니다.원래 위치에서 얼마나 이동할..

프론트엔드/HTML, CSS 2025. 4. 6. 18:18

1. 미디어쿼리미디어쿼리는 웹 페이지가 다양한 장치(예: 데스크톱, 태블릿, 스마트폰 등)의 화면 크기나 해상도에 맞게 스타일을 다르게 적용할 수 있도록 도와주는 CSS 기능입니다. @media 규칙을 사용하여 특정 조건(화면 너비, 높이, 방향 등)에 따라 CSS를 분기하여 반응형 웹 디자인을 구현할 수 있으며, 이를 통해 사용자에게 보다 최적화된 화면 구성을 제공합니다.@media (조건) { /* 이 조건에 맞을 때만 적용될 CSS */} 주요 미디어쿼리 조건  화면 크기에 따라 배경색이 달라집니다 브라우저 크기를 조절해보세요! 2. 미디어쿼리 활용아래 파일을 이미지를 다운습니다. 아래 코드를 ./css/media.css에 저장합니다.#container { width: 100%;}head..

프론트엔드/HTML, CSS 2025. 4. 6. 17:41