오렌지_Story

Flexbox Froggyhttps://flexboxfroggy.com/#ko   1 .Flexbox 레이아웃을 사용하여 요소를 가운데 정렬하는 방법CSSdisplay: flex;justify-content: center;align-items: center;이 CSS 코드는 Flexbox 레이아웃을 사용하여 요소를 가운데 정렬하는 데 사용됩니다. 각 속성의 역할은 다음과 같습니다:1. display: flex;이 속성은 요소를 Flex 컨테이너로 설정합니다. Flex 컨테이너는 자식 요소들의 레이아웃을 유연하게 조절할 수 있는 특별한 컨테이너입니다.2. justify-content: center;이 속성은 Flex 컨테이너 내의 자식 요소들을 메인 축(주축)을 따라 가운데 정렬합니다. 메인 축은 기본적으..

JavaScript 2024. 12. 9. 12:02

팝업창과 모달창: 차이점과 장단점, 그리고 모달창 예제 팝업창과 모달창, 무엇이 다를까요?팝업창과 모달창은 웹 페이지에서 사용자에게 추가적인 정보를 제공하거나 특정 행동을 유도하기 위해 사용되는 창입니다. 비슷해 보이지만 몇 가지 중요한 차이점이 있습니다.팝업창:현재 열려 있는 브라우저 페이지 위에 새로운 브라우저 창을 띄우는 방식입니다.독립적인 창이기 때문에 메인 페이지와 별개로 조작이 가능합니다.광고, 이벤트 알림 등 주의를 집중시키는 용도로 많이 사용됩니다.단점: 사용자에게 불편함을 줄 수 있으며, 광고 차단 프로그램에 의해 차단될 수 있습니다.모달창:현재 페이지 위에 레이어를 씌워 새로운 창을 띄우는 방식입니다.메인 페이지는 비활성화되고, 모달창 안에서만 사용자의 입력을 받습니다.사용자에게 특정 ..

JavaScript 2024. 12. 2. 09:50

노트 추가 기능 Web Programming 공부할 주제를 기록해 보세요 추가  코드의 전체적인 흐름위 코드는 웹 페이지에서 사용자가 입력한 내용을 리스트에 추가하는 기능을 구현합니다. 즉, 사용자가 입력한 내용을 새로운 리스트 항목으로 만들어 기존 리스트에 추가하는 것입니다.코드별 상세 설명function newRegister():새로운 노트를 추가하는 기능을 담당하는 함수입니다.let newItem1 = document.createElement("li");:새로운 리스트 항목()을 생성하여 newItem1 변수에 저장합니다. 이는 리스트에 추가될 새로운 노트를 나타냅니다.let..

JavaScript 2024. 11. 28. 17:07

함수 표현식이란?함수 표현식은 자바스크립트에서 함수를 변수에 할당하여 사용하는 방식입니다. 함수를 단순히 실행되는 코드 블록이 아니라, 값처럼 다룰 수 있다는 것이 가장 큰 특징입니다. 함수 선언과 달리 호이스팅이 되지 않아 선언 전에 호출하면 오류가 발생합니다.익명 함수 (Anonymous Function)이름이 없는 함수입니다.주로 다른 함수의 인자로 전달하거나, 콜백 함수로 사용됩니다.JavaScript// 예시 1: 배열의 각 요소에 2를 곱하여 새로운 배열 만들기const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(function(number) { return number * 2;});console.log(doubled); // [2, ..

JavaScript 2024. 11. 22. 12:27

자바스크립트 함수: 간단하게 설명하고 예제와 함께 알아보기함수란 무엇일까요?함수는 특정 작업을 수행하는 코드 블록을 묶어놓은 것입니다. 마치 레시피처럼, 함수에 필요한 재료(인수)를 넣으면 원하는 결과(반환값)를 얻을 수 있습니다. 함수를 사용하면 코드를 재사용하고, 복잡한 문제를 작은 단위로 나누어 해결하기 쉽습니다.함수를 만드는 방법JavaScriptfunction 함수이름(매개변수1, 매개변수2, ...) { // 함수 안에서 실행될 코드 return 반환값;}코드를 사용할 때는 주의가 필요합니다. 함수이름: 함수를 호출할 때 사용하는 이름입니다.매개변수: 함수에 전달되는 값을 받는 변수입니다. (선택 사항)함수 안의 코드: 함수가 수행할 작업을 정의하는 부분입니다.return: 함수가 실행된 ..

JavaScript 2024. 11. 22. 12:26

자바스크립트 for 문 자세히 알아보기for 문은 자바스크립트에서 특정 조건이 만족될 때까지 코드를 반복적으로 실행하는 데 사용되는 반복문입니다. 즉, 특정 작업을 여러 번 반복해야 할 때 효과적으로 사용할 수 있습니다.for 문의 기본 구조JavaScriptfor (초기화; 조건; 증감식) { // 반복될 코드 블록}코드를 사용할 때는 주의가 필요합니다. 초기화: 반복이 시작되기 전에 한 번만 실행되는 부분으로, 주로 반복 변수를 초기화합니다.조건: 매 반복마다 평가되는 조건식입니다. 조건이 참일 동안 반복이 계속됩니다.증감식: 매 반복이 끝날 때마다 실행되는 부분으로, 주로 반복 변수의 값을 증가시키거나 감소시킵니다.쉬운 예제 5가지1부터 10까지 숫자 출력하기:JavaScriptfor (let i..

JavaScript 2024. 11. 22. 12:24

자바스크립트 초보자를 위한 for문 예제 5가지1. 1부터 10까지 숫자 출력하기JavaScriptfor (let i = 1; i 코드를 사용할 때는 주의가 필요합니다. 설명: i라는 변수를 1부터 시작하여 1씩 증가시키면서 10보다 작거나 같을 때까지 반복하며, 각 반복마다 i의 값을 콘솔에 출력합니다.2. 배열의 모든 요소 출력하기JavaScriptconst fruits = ['apple', 'banana', 'orange'];for (let i = 0; i   설명: fruits 배열의 길이만큼 반복하며, 각 인덱스에 해당하는 요소를 출력합니다.3. 구구단 출력하기JavaScriptfor (let i = 2; i   설명: 2부터 9까지의 숫자를 첫 번째 곱셈수로, 1부터 9까지의 숫자를 두 번째 ..

JavaScript 2024. 11. 22. 12:23

자바스크립트 while문과 do while 문: 쉬운 설명과 예제while 문while 문은 특정 조건이 참인 동안 계속해서 코드 블록을 반복 실행하는 반복문입니다. 즉, 조건을 검사하고, 조건이 참이면 코드 블록을 실행하고, 다시 조건을 검사하는 과정을 반복합니다.기본 구조:JavaScriptwhile (조건) { // 조건이 참일 때 실행될 코드}코드를 사용할 때는 주의가 필요합니다. 예시 1: 1부터 10까지 출력하기JavaScriptlet i = 1;while (i 코드를 사용할 때는 주의가 필요합니다. 예시 2: 사용자에게 숫자를 입력받아 0이 입력될 때까지 합계 구하기JavaScriptlet num, sum = 0;while (true) { num = parseInt(prompt("숫자를 ..

JavaScript 2024. 11. 22. 12:22