월드스토리의 코딩 나라

문자열에서 사용 가능한 메소드내장메소드메소드의 의미length문자열의 길이를 반환toUpperCase()문자열 전체를 대문자로 변경toLowerCase()문자열 전체를 소문자로 변경indexOf("")몇번째 인덱스인지 숫자로 반환slice(start, end)start 인덱스부터 end-1 인덱스까지의 값을 빼냄replace(문자열1, 문자열2)문자열의 특정 값을 찾아 제일 먼저 나온 녀석을 문자열2로 변경함replaceAll(문자열1, 문자열2)문자열1을 전부찾아서 문자열 2로 바꿔줌repeat(n)문자열에 대해 n번 반복trim()문자열의 양끝 공백 없애기split()매개변수로 들어온 문자열을 문자 단위로 쪼개서 배열로 만듬

1. 연산자의 개념연산자는 코드에서 값을 계산하거나 평가하는 데 사용됩니다. 대표적인 예로는 산술 연산자, 할당 연산자, 비교 연산자 등이  존재합니다..참고 문서: MDN 자바스크립트 연산자2. 값과 표현식리터럴 (Literal)리터럴은 코드에서 값을 나타내는 표기법입니다.숫자 리터럴: 1, 123문자열 리터럴: 'hello', "world"템플릿 리터럴: 안녕, ${name}함수 리터럴: function() {}표현식 (Expression)값으로 평가될 수 있는 코드를 의미합니다.let b; // 선언문b = 2; // 표현식, 할당문let a = b = 2; // 표현식console.log(a); // 2 출력 3. 산술 연산자 (Arithmetic Operators)산술 연산..

배열에서 사용가능한 함수함수의 이름함수의 의미변수명.length함수의 길이를 찾음변수명.push(추가할 값)배열에 값을 추가함변수명.pop()배열에서 제일 앞 값을 빼냄변수명.unshift(추가할 값)배열의 맨 앞에 값을 추가한다.변수명.shift()배열의 맨 앞 값을 제거한다.변수명.indexOf(찾을값)배열에 특정값이 있는지 여부를 확인(true로 표시)변수명.includes(찾을 값)배열에 특정 단어를 포함하는 변수값이 있는지 여부확인typeof 변수명해당 변수가 어떤 자료형인지 찾음(배열은 object)변수명.reverse();배열의 순서를 뒤집음(원본 배열도 변환되니 주의할 것)arr.join() join 안의 문자열을 기준으로 문자열로 병합 Object  메소드 체이닝 • 각각의 메소드를 연결..

개발언어 표기법표기법 이름사용방법kebab-casethe-quick(언어 사이에 -을 붙이는 방식)snake_casethe_quick(언어 사이에 _(언더바)를 붙이는 방식camelCase첫번째 단어의 앞글자는 소문자로 붙임PascalCaseTheQuick(단어의 앞글자는 모두 대문자)  개발언어의 타입강한 타입의 언어타입 검사를 통과하지 못한다면 실행을 못함String, int, double 등 타입이 개발자가 쉽게 알게끔 정의됨약한 타입의 언어런타임에서 타입 오류가 발생하더라도 실행이 막히지 않음타입이 여러 종류인 값들이 상관없이 지정됨

JavaScript웹 페이지에서 복잡한 기능을 구현할 수 있도록 만들어진 프로그래밍 언어 JavaScript 태그의 사용방식태그의 사용방식사용 방법장단점내장 방식간단하게 조작 가능특정 페이지에서만 작동하는 기능인 경우, 따로 파일을 만들지 않는 게 경제적일 수 있을 것이다.링크 방식JS 코드의 양이 많다면 다른 파일에서 관리하는 것이 용이함.같은 기능을 다른 페이지에서도 사용한다면 JS 파일에 링크만 걸어서 표현하는 게 경제적임Head 태그 내부, Body 태그 내부, Head와 body 사이 등 head 태그가 열린 이후라면 어디든 가능  JavaScript의 변수 변수 종류변수의 특정var선언 단계와 초기화가 동시에 이루어지며 아무것도 할당하지 않으면 자동으로 undefined가 할당됨중복 선언 가능..

반응형1. 동일한 웹페이지를 보여주나 디바이스의 크기에 따라 레이아웃을 다르게 보여줌2. 모바일로 웹 사이트를 접속하는 경우가 많으므로 반응형은 매우 중요한 기술임 적응형사용자가 모바일 환경인지, PC 환경인지에 따라 다른 웹 페이지를 보여줌.  Viewport 반응형 웹을 디자인하기 위하여 기준으로 삼는 지표를 의미함기기마다 화면 사이즈가 다르기에 기기에 맞춰서 디자인하기 위한 크기 요소디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공함 @media(미디어 쿼리)   용어 정리의미코드 상의 예시미디어 유형All(전부)/print(인쇄)/Screen(전부)screen크기 규칙min(최소 뷰포트 넓이)max(최대 뷰포트 넓이)지정 기준을 결정min-width, min-heightBreakp..

transform 특정 상황에서만 태그의 상태를 바꾸고 싶을 때 사용하는 CSS 2D 변환 함수CSS 용어용어의 의미 translate(x,y) x축(옆)으로 x만큼, y축(아래)으로 y만큼 이동 translateX(x), translateY(y) 특정 축으로 변수 만큼 이동 scaleX(x), scaleY(y) 특정 축으로 변수 만큼 키움 scale(x,y) x축(width)으로 얼마, y축(height)만큼 크기를 키움 skew(x,y)x축으로 얼마, y축으로 얼마 만큼 기울임skewX, skewY특정 축으로 얼마만큼 기울임matrix(n, n, n, n, n,n)2차원 변환효과rolate(degree)태그를  degree만큼 시계 방향으로 회전3D 변환 함수CSS 용어용어의 의미tran..

요소의 배치 CSS 용어용어의 의미상태position: relative;요소 자신을 기준으로 배치position: absolute;위치 상 부모 요소를 기준으로 배치(부모 요소는 relative인 요소, 둘다 static이라면 메인 페이지를 반영)display 속성이 block으로 변경됨position: fixed;뷰포트를 기준으로 배치display 속성이 block으로 변경됨z-index요소의 배치 순서를 결정auto : default(부모 요소와 동일한 쌓임)숫자 : 숫자가 높을 수록 위에 쌓임 배경 이미지 CSS 용어의미사용법background-color태그의 색상을 지정함default : transparent(투명함)색상값을 넣으면 된다.linear-gradient() : 여러개의 색깔을 그라이데..

요소를 숨기는 3가지 방법 CSS 용어의미사용법opacity투명하게 만든다.모습만 숨기는 것으로 속성도 남고 자리도 차지함opacity : 0;visibility표시상태를 뜻함자리는 차지하고, 모습과 속성만 숨김주로  디자인을 바꾸기 어려운 file 태그를 디자인할 때 사용함visibility : hidden;display그냥 존재 자체를 없애놓는 방법주로 모달창을 만들어 놓을 때 사용display: none

태그의 크기를 지정하는 약어 CSS 용어의미속성width, height요소의 가로/세로 너비auto : 브라우저가 자동으로 너비 계산단위 : px, em, vw 등 단위로 지정max-width, max-height요소가 커질 수 있는 최대 가로/세로none : default(최대 너비 제한 없음)auto : 브라우저가 자동으로 계산단위 : px, em, vw 등 단위로 지정min-width, min-height요소가 작아질 수 있는 최소 가로/세로0: default(최대 너비 제한 없음)auto : 브라우저가 자동으로 계산단위 : px, em, vw 등 단위로 지정Calc()사용자가 원하는 크기 값을 계산하여 사용하기 위해 사용하는 값EX) width : Calc(100vh - 20vw)box-sizei..