분류 전체보기 87

[JavaScript] JS 함수

✏️  함수하나의 동작으로 어떤 목적을 달성하거나 원하는 결과를 도출하기 위한 코드 집합 의미한 번만 사용하고 마는 것이 아닌 반복적인 동작을 처리하기 위해 작성되고 같은 이름으로 계속하여 재사용할 수 있음✏️  함수 작성함수를 작성할 때는 펑션이라는 키워드 사용뒤에 함수의 사용할 이름을 작성을 함뒤에 괄호를 넣는데, 괄호는 함수에서 사용하려는 인자를 담는 공간을 의미인자들을 반드시 정의해야 하는 것은 아님인자가 필요하지 않은 함수라면 그냥 없이 사용해도 됨중괄호 부분에는 어떤 처리를 할지를 작성하면 됨함수를 정의할 때 작성했던 함수 이름을 작성하고 뒤에 괄호를 열어서 필요한 인자를 넣어주면됨한 번 만든 함수는 언제든지 재사용할 수 있고 어느 위치든 내가 필요한 위치에서 부를 수 있다는 장점이 있음fun..

Front/JavaScript 2024.07.05

[JavaScript] JS 반복문

🔍  반복문반복적으로 수행해야 하는 동작을 처리하기 위해서 사용되는 제어문자바스크립트에서 제공하는 반복문의 종류는 for문과 while문으로 나눌 수 있음🔍  forfor 키워드 사용괄호 안에 반복을 위한 어떤 조건들이 명세가 됨시작 값을 정의하고 각각을 세미콜론(;)으로 정의반복의 조건증감 값을 작성for(let i = 1; i 참이라면 반복문을 실행하고 거짓이라면 반복문을 빠져나옴🔍  시작 값을 생략하는 방법 / 증감 식을 생략하는 방법for문을 사용할 때 시작값, 조건식, 증감식 인자를 사용하는데 작성하지 않고도 생략할 수 있는 방법이 있음let i = 0;for(; i let i = 0;for(; i 🔍  break 반복문은 기본적으로 주어진 조건에 의해서 결과값이 거짓이 될 때 반복문을 ..

Front/JavaScript 2024.07.05

[JavaScript] JS 조건문

🔎  조건문어떤 지정된 조건이 참인지 거짓인지에 따라서 서로 다른 코드로 분계하기 위해서 사용조건이 참일 때는 a라는 코드를 실행시키고 거짓일 때는 b라는 코드를 실행시킨다더니 이런 조건을 처리하기 위해 사용되는 제어문을 의미 자바스크립트 조건문에는 if문과 swith문이 있음🔎  if많은 프로그래밍 언어를 배울 때 가장 기본이 되고 대표적인 조건문if라는 키워드 사용() 안에 조건을 작성을 하고 참일 경우에 뒤에 이어지는 블록 내부에 위치한 코드를 실행하게 됨const a = 10;const b = 20;if(a a의 값이 b의 갑보다 작기 때문에 윗부분 조건에 참이 되어 블록 내부에 위치해 있는 문자열을 출력하여 나타냄const a = 10;const b = 20;if(a > b){ cons..

Front/JavaScript 2024.07.04

[JavaScript] JS 연산자

🎈 자바스크립트 연산자 종류산술 연산자 증감 연산자비교 연산자논리 연산자삼항 연산자널리쉬 연산자비트 연산자대입 연산자🎈 산술 연산자+,-,*,/모듈러(%) , **(지수 연산)나눗셈을 했을 때 몫이 되는 값console.log(10 / 5);나머지 연산자를 사용하면 모듈러 퍼센트 기호를 사용console.log(10 % 5);이 연산자를 사용하면 결과가 나눗셈을 실행한 몫이 아니라 나머지 값을 결과값으로 가지게 됨지수 연산자는 앞의 숫자에 대한 제곱을 하여 결과값을 나타내주는 연산자🎈 증감 연산자숫자를 증가시키거나 감소시키기 위해 사용되는 연산자++ => +를 연달아 사용하면 숫자 값이 1 증가let number = 10;number++;console.log(number);-- => -를 연달아 사..

Front/JavaScript 2024.07.04

[CSS3] CSS 변환

📕  변환이란?플러그인의 도움 없이 웹 브라우저에 3차원 공간을 구현할 수 있게 되었음HTML5에서 3차원을 구현하는 방법은 크게 2가지자바스크립트를 사용한 webGLCSS3를 사용한 3차원 배열📕  2차원 배열대부분의 컴퓨터 프로그램은 화면 좌표를 이용X축과 Y축이 있는 화면 좌표를 2차원 화면 좌표라고 부름Z축을 추가하면 3차원 화면 좌표로 확장3차원 화면 좌표에서 Z축은 웹 브라우저를 보는 사용자에게 가까울수록 큰 값임📕  transform 속성CSS3부터는 transform 속성을 사용해 객체를 변환할 수 있음변환이 가능한 이야기는 HTML 페이지 스스로 애니메이션 같은 플래시 콘텐츠를 만들 수 있음 코드를 실행하면 사각형이 60도 회전📕  2차원 변환 함..

Front/CSS 2024.07.03

[JavaScript] JS 데이터 타입

⏱️  원시 데이터 타입객체가 아니면서 메서드도 가지지 않는 데이터string, number, bigint, boolean, undefined, null, symbol⏱️  숫자 데이터 타입정수와 부동소수점 숫자를 나타내는 타입typeof (타입오브) 라는 데이터 타입을 알려주는 연산자를 사용const number = 123;console.log(typeof number);bigint (빅인트)라는 데이터 타입은 숫자 데이터 타입으로 표현할 수 있는 범위를 넘어서는 아주 작은 숫자나 큰 숫자를 표현할 때 사용되는 타입별도의 데이터 타입으로 지정됨빅인트 타입으로 지정하기 위해서는 일반적인 숫자와 구분하기 위해 숫자를 쓰고 뒤에 소문자 n을 붙이면 됨const number = 123n;console.log(..

Front/JavaScript 2024.07.03

[JavaScript] 변수와 상수

🔋변수란?프로그램의 피요한 값들을 저장해두는 공간공간마다 서로 다른 이름을 붙여서 그 값을 가져와서 연산을 하거나 연산한 결과값을 저장프로그램 안에서 값이 변경될 수 있는 자료 의미를 부여한 어떤 값으로 정의해 두고 그 값을 출력할 수 있음 -> 저장할 수 있는 공간그 값이 고정된 것이 아닌 나중에 원할 때 변경할 수도 있는 그런 저장 공간이름을 정의하고 들어갈 값을 우측에 정의한 후 변수를 선언하고 할당선언된 값을 어디서든지 사용 가능let 키워드 사용🔋상수란?한 번 정해놓으면 변하지 않고 변경할 수 없는 값을 저장하는 공간선언할 때 const 키워드 사용키워드를 작성하고 사용할 상수 이름을 지정하여 뒤에 값을 넣어주는 것을 의미수정을 하려고 해도 수정되지 않음🔋var, let, constJava..

Front/JavaScript 2024.07.02

[CSS3] CSS3 변형과 애니메이션

CSS에서 움직임을 구현할 수 있는 기능은 애니메이션 속성과 변형 속성으로 나뉨HTML 페이지 구성  hover 상태 선택자와 active 상태 선택자를 사용마우스를 태그 위에 올리거나 클릭하면 각각의 스타일 적용 transition-duration 속성 사용구형 브라우저와 호환하려면 벤더 프리픽스를 이용한 transition-duration 속성 사용코드를 실행하면 마우스를 태그 위에 올릴 때, 내릴 때 또는 누를 때 등등 2초 동안 변형 속성이 사용 변형 속성은 다음 스타일 속성과 함께 사용 가능위치 속성 : top, left, bottom, right크기 속성 : width, height박스 속성 : margin, padding테두리 속성 : border-width, border-r..

Front/CSS 2024.07.02

[CSS3] CSS 스타일 속성

🚩 크기 단위%백분율 단위em배수 단위px픽셀- 가장 많이 사용하는 단위- %, em, cm, mm, inch, px - %(퍼센트 단위) = 기본 설정된 크기에서 상대적으로 크기 지정- em(배수 단위) = 배수를 나타내는 단위- px(픽셀) = 절대적으로 크기를 지정할 때 사용🚩 색상 단위#000000HEX 코드 단위RGB(red, green, blue)RGB 색상 단위RGBA(red, green, blue, alpha)RGBA 색상 단위HSL(hue, saturation, lightness)HSL 색상 단위 HSLA(hue, saturation, lightness, alpha)HSLA 색상 단위- 단어로 표현할 수 있는 색상은 한정적🚩 URL 단위background-image: url()url..

Front/CSS 2024.07.02

[JavaScript] JS(자바스크립트)란?

💻  JavaScript (자바스크립트)웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어사용자 인터렉션에 의해 반응하개 만들어 주는 것페이지 전환, 화면 영역 지정, 마우스 입력, 키보드 입력 등 반응할 수 있도록 만들어주는 것브라우저 안에서 동작하는 프로그래밍 언표준 웹 기술동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어💻 JavaScript 특징모든 웹 브라우저에서 작동웹 브라우저에서 실행 결과를 즉시 확인 가능풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램 만들 수 있음다양한 자바스크립트 공개 API 사용 가능다양한 라이브러리와 프레임워크 사용 가능 💻 자바스크립트 실행크롬에..

Front/JavaScript 2024.07.01