fullstack-study

# 템플릿 리터널, 함수, 내장함수 # 템플릿 리터널 백틱(`)을 사용let test='hi';let output = `철수 ${hi}`console.log( output ) 함수 생성방법파라미터정의하기반환값익명함수즉시실행함수 # 함수함수는 하나의 단위로 실행할 수 있도록 명령문을 그룹 한 것입니다.동일한 코드가 여러 곳에서 반복되는 것을 방지하려면 함수를 사용하여 해당 코드를 래핑하고 재사용할 수 있습니다. 1) 함수 생성하는 방법함수 선언식함수 표현식 함수 정의function 함수이름() { 실행문;} 함수 호출함수는 정의 후 함수를 호출해야 실행됩니다.함수명(); 함수 선언식함수는 funciton 예약어와 함수이름 abc 함수 블록{}으로 되어 있습니다.function abc() { consol..

for문 while문 do ~ while문break문 continue문 + 반복문종류설명예for지정된 횟수만큼 반복for (let i = 0; i while조건이 참인 동안 반복while (count do...while일단 한번 실행하고 조건을 검사do { count++; } while (count for...in객체의 속성(키)을 반복for (let key in obj) { console.log(key); }for...of반복 가능한 객체(배열 등)의 값을 반복for (let item of arr) { console.log(item); } + 분기문종류설명예break반복문이나 switch를 즉시 종료for (...) { if (x > 5) break; }continue이번 반복만 건너뛰고 다음 반복..

if문if ~ else문if ~ else if ~ else if ~ else 문 삼항연산자switch ~ case # 단일 if문 기본적인 조건문은 if문입니다. if문은 만약에 ~ 해라를 의미 합니다. if (조건) { 코드;}조건이 만족됐을 때 실행시킬 코드가 { } 코드 블록이라고 합니다.만약에 조건이 true 가 된다면 코드가 실행되는 것이고, false 가 된다면 코드가 실행되지고 {} 밖의 코드로 진행 ex1)const a = 1;if (a ex2) let age = 18; // 변수를 age 다음과 같이 선언하고 초기화합니다 18. if (age >= 18) { console.log('가입 가능합니다.');}age >= 18이기 때문에 명령문 true내부의 코드가 if실행되어 ..

# 연산자 산술연산자관계(비교)연산자대입연산자논리연산자증감연산자       1) 산술 연산자+ , - , * , / , % 덧셈 연산자(+)더하기 연산자는 두 값의 합을 반환합니다. 예를 들어, 다음은 더하기 연산자를 사용하여 두 숫자의 합을 계산합니다.let sum = 10 + 20;console.log(sum); // 30 빼기 연산자(-)빼기 연산자( -)는 한 숫자에서 다른 숫자를 뺍니다.let result = 30 - 10;console.log(result); // 20 곱셈 연산자(*) 곱셈 연산자는 두 숫자를 곱하여 단일 값을 반환합니다. let result = 2 * 3;console.log(result); 나누기 연산자(/)나누기 연산자는 첫 번째 값을 두 번째 값으로 나눕니다let re..

# javascript 란 JavaScript는 원래 웹 페이지 요소와 상호 작용하도록 설계된 프로그래밍 언어입니다. ECMAScript는 핵심 기능을 제공합니다.DOM( 문서 개체 모델)은 웹 페이지의 요소와 상호 작용하기 위한 인터페이스를 제공합니다.BOM( 브라우저 개체 모델)은 웹 브라우저와 상호 작용하기 위한 브라우저 API를 제공합니다. JavaScript를 사용하면 웹 페이지에 대화형 기능을 추가할 수 있습니다. 일반적으로 HTML 및 CSS와 함께 JavaScript를 사용하여 양식 확인, 대화형 지도 생성, 애니메이션 차트 표시 등 웹페이지 기능을 향상합니다. 웹 페이지가 로드되면, 즉 HTML과 CSS가 다운로드된 후 웹 브라우저의 JavaScript 엔진이 JavaScript 코드를..

설명문 : 키워드 입력 - 작성자 입력 - ​ 검색 엔진 all : 기본값. 'index,follow'를 지정한 것과 같음. none : 'noindex, nofollow'를 지정한 것과 같음. index : 그 페이지를 수집대상 follow : 그 페이지를 포함해 링크가 걸린 곳을 수집대상 noindex : 그 페이지를 수집대상에서 제외 nofollow : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않음 ​ 네이버 01) 오픈그래픽, 카카오톡이나 여러 소셜에서 링크를 보여줄 경우 그에 대한 상세 설정 ---------------- ​ 02) 트위터에 대응한 설정 특성을 지정 ---------------- # 파비콘 사이트1 사이트2 ​즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(..

filter이미지 필터 효과mdngradient그라디언트mdnobject-fit나 요소 크기mdnmix-blend-mode mdn # gradientmdn바로가기선형 그라디언트linear gradient : directionbackground: linear-gradient(진행방향, 색상지정점 1, 색상지정점 2,...)background: linear-gradient(방향, 시작색상, 종료색상)value: to top , to left , to right , to bottom, to right bottombacktgorund: linear-gradient(to right bottom, pink, yellow ) linear gradient : anglebackground: linear-gradient..

속성설명mdntransform변형바로가기transition효과바로가기animation애니메이션바로가기@keyframes애니메이션바로가기 transform메소드설명단위translate(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.px, %, em 등translateX(n)요소의 위치를 X축으로 x만큼 이동시킨다.px, %, em 등translateY(n)요소의 위치를 Y축으로 y만큼 이동시킨다.px, %, em 등scale(x,y)요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.0과 양수scaleX(n)요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.0과 양수scaleY(n)요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.0과 양수skew(x-angle,y-..

# position position 속성 - position 속성의 속성값: static, fixed, relative, absolute - 텍스트 이미지 표 등의 요소를 웹 문서에 배치할 때 사용 속성값의 특징을 확인하는 조건 - 부모 자식 간에 발생하는 마진 병합 현상 유무 - top, right, bottom, left 속성 적용 유무 - 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모의 높이에 영향을 주는지 유무 구분 속성 설명 정적 위치 설정 position:static 각종 요소를 웹 문서의 흐름에 따라 배치 상대 위치 설정 position:reletive 웹문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치 절대 위치 설정 position:absolute 전체 페이지..

# flex flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다. flex-box 바로가기 flex 연습 사이트 바로가기 Flexbox 레이아웃은 flex item의 복수의 자식 요소와 이들을 포함하는 flex-container 부모 요소로 구성 주 축(main-axis) : 기준축 / 교차 축(cross-axis) : 교차축 # Flex Container 속성 설명 display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 flex-direction Flex Items의 주축를 ..