[데이터_공예소]

자바스크립트에서 구구단 계산 함수를 함수선언문, 함수표현식, 화살표 함수로 각각 표현할 수 있습니다. 아래에 각각의 예시를 제시해 드리겠습니다. 함수 선언문을 사용한 구구단 계산 함수: function multiplicationTable(num) { for (var i = 1; i

블로그의 내용을 흐름에 맞게 정리하였습니다. 본 페이지를 기준으로 공부순서를 잡고 정리하시면 됩니다. 1. 자바스크립트 기초 가이드 https://d-craftshop.tistory.com/206 자바스크립트 기초 가이드 JavaScript 는 무엇이며, 어디에서 사용될까요? 그리고 장,단점은 무엇일까요? 웹사이트의 모든 페이지는 JavaScript를 사용할 가능성이 높습니다. Google 애널리틱스, 이벤트 추적 또는 디스플레이 광 d-craftshop.tistory.com 2. 자바스크립트 데이터 자료형 https://d-craftshop.tistory.com/208 자바 스크립트 자료형 자바스크립트에서는 다양한 자료형을 사용할 수 있습니다. 그 중에서도 가장 기본적인 자료형은 문자형(String),..

연산자(Operator) 연산자(Operator)는 프로그래밍에서 값을 연산하거나 조작하는 데 사용되는 기호나 키워드입니다. JavaScript에서도 다양한 연산자가 있습니다. 이 중에서 산술 연산자와 단항 산술 연산자를 설명해 드리겠습니다. 산술 연산자(Arithmetic Operators): 산술 연산자는 숫자 값들을 연산하는 데 사용됩니다. 주요 산술 연산자는 다음과 같습니다: 덧셈(+): 두 피연산자를 더합니다. 뺄셈(-): 첫 번째 피연산자에서 두 번째 피연산자를 뺍니다. 곱셈(*): 두 피연산자를 곱합니다. 나눗셈(/): 첫 번째 피연산자를 두 번째 피연산자로 나눕니다. 나머지(%): 첫 번째 피연산자를 두 번째 피연산자로 나눈 나머지를 반환합니다. 예시: let x = 10; let y = ..

자바스크립트에서는 다양한 자료형을 사용할 수 있습니다. 그 중에서도 가장 기본적인 자료형은 문자형(String), 숫자형(Number), 논리형(Boolean)입니다. 문자형(String): 개념: 문자열은 텍스트 데이터를 나타내는 데 사용됩니다. 문자열은 작은따옴표('')나 큰따옴표("")로 감싸져 있습니다. 예시 코드: let message = "Hello, world!"; // 큰따옴표로 둘러싼 문자열 let name = 'Alice'; // 작은따옴표로 둘러싼 문자열 숫자형(Number): 개념: 숫자형은 숫자를 나타내는 데 사용됩니다. 정수나 실수를 포함하여 다양한 숫자를 표현할 수 있습니다. 예시 코드: let age = 25; // 정수 let pi = 3.14; // 실수 논리형(Boole..

식별자(Identifier): 식별자는 변수, 함수 등을 구별하는 데 사용되는 이름입니다. let age = 25; function greet() { console.log("Hello!"); } 연산자(Operator): 연산자는 값들을 조작하고 계산하는 데 사용됩니다. let sum = 10 + 5; // 덧셈 연산자 let difference = 20 - 8; // 뺄셈 연산자 let product = 4 * 6; // 곱셈 연산자 let quotient = 50 / 2; // 나눗셈 연산자 표현식(Expression): 표현식은 값, 변수, 연산자의 조합으로 이루어진 구조입니다. let result = (5 * 3) + (10 / 2); // 표현식 값(Value): 값은 데이터의 기본적인 단위로,..

JavaScript 는 무엇이며, 어디에서 사용될까요? 그리고 장,단점은 무엇일까요? 웹사이트의 모든 페이지는 JavaScript를 사용할 가능성이 높습니다. Google 애널리틱스, 이벤트 추적 또는 디스플레이 광고를 사용하는 경우 이미 JavaScript를 사용하고 있는 것입니다. 사용자에게 훌륭한 경험을 제공하기 위해 JavaScript를 더욱 활용해야 합니다. 그러기 위해서는 먼저 JavaScript가 무엇이며 어떤 용도로 사용되는지 알아야 합니다. JavaScript는 무엇인가요? JavaScript(JS)는 웹사이트와 애플리케이션을 동적이고 상호작용적으로 만드는 데 사용되는 컴퓨터 프로그래밍 언어입니다. 서버뿐만 아니라 브라우저에서 직접 실행할 수 있다는 점이 독특합니다. HTML(hypert..

Flex와 지금 공부할 Grid의 큰 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 이라는 점입니다. 따라서 Flex보다 더 복합적인 레이아웃 표현이 가능하지요. 참고로 지금 보고 계신 이 1분코딩 웹사이트는 전체적인 레이아웃은 Grid로 잡았고, 부분 부분에 Flex와 Grid를 적절히 사용해 주었습니다 Grid 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다. Flex와 마찬가지로, 컨테이너와 아이템이 있으면 됩니다. A B C D E F G H I 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고..

Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다. helloflex abc helloflex 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다. Flex의 속성들은, 컨테이너에 적용하는 속성 아이템에 적용하는 속성 이렇게 두 가지로 나뉘어요. 먼저, 컨테이너에 적용하는 속성들 부터 알아볼게요. Flex 컨테이너에 적용하는 속성들 display: flex; Flex 컨테이너에 display: flex;를 적용하는게 시..

[JS] 웹 페이지와 Javascript Javascript는 원래 HTML 파일 안에서 HTML태그나 CSS를 제어하기 위한 언어였습니다. 그렇기 때문에 늘 Javascript의 기초는 웹 페이지에 어떻게 인터렉티브한 효과를 주는가를 이야기 합니다. 이제 본격적으로 웹 페이지에서의 Javascript를 시작해 봅시다. #01. Javascript 소스코드의 위치 JS 소스코드는 HTML 페이지의 어느 위치에나 올 수 있다. 대체로 가장 많이 사용하는 위치는 태그가 끝나기 전과 태그가 끝나기 전이다. 1) 태그에 JS가 위치하는 경우 웹 브라우저가 HTML 파일을 실행하는 과정에서 JS소스를 인식하고 JS코드를 해석한다. 만약 형태로 외부 스크립트 파일을 참조하는 처리가 있다면 해당 파일을 다운로드 받기..

Intro 브라우저 사이즈에 따라서 반응형으로 웹 페이지 레이아웃이 변경되도록 하는것이 이번 장의 목표입니다. flex를 이용하는 방법으로도 레이아웃을 만들 수 있지만, 이번에는 Grid를 이용해보겠습니다. Live Demo 👈 우리가 작업할 레이아웃을 미리 확인할 수 있습니다. 너비가 1024px 이상일 떄는 아래와 같은 레이아웃이 되도록 해야합니다. 너비가 768px 이상일 때는 다음과 같아야합니다. 너비가 768px 이하 일때는 아래와 같아야 합니다. HTML 그리드 레이아웃을 구성 768px 이하 일 때는 1개씩 768px 이상 일 때는 첫 번째 줄에 1개, 두 번째 줄부터 2개씩 1024px 이상 일 때는 첫 번째 줄에 2개, 두 번째 줄부터 4개씩 card 컨테이너가 등장합니다. 배경 이미지는..