월드스토리의 코딩 나라

배열에서 사용가능한 함수함수의 이름함수의 의미변수명.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..

글자 설정을 바꾸는 CSSCSS 지시어의미속성font-weight글자의 두께 지정normal : 기본두께(400)bold : 두껍게(700)bolder : 상위(부모) 요소보다 두껍게lighter : 상위(부모) 요소보다 앏게100~900 : normal과 bold 이외의 두께 지정font-size글자 크기 지정16px : 글자 설정의 defaultpx, em, rem 등의 단위로 지정하기 가능% : 부모 요소의 폰트 크기에 대한 비율smaller : 상위(부모) 요소보다 작은 크기larger : 상위(부모) 요소보다 큰 크기xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기까지 7단계의 크기 지정line-height  한 줄의 높이 지정 숫자 : 요소의 글꼴 크기의 배수로 지정단위..

가상 클래스 선택자1. 사용자의 행동에 따라 변화하는  상황에 따라서 요소를 발생하는 선택자  가상 클래스 선택자의 종류선택자 종류선택자의 의미선택자 쓰는 법ABC : hover 마우스 커서가 올라가 있는 태그 선택a : hover {  color : red;}= a 태그에 마우스가 올라가 있을 때, 글자를 빨간색으로 변경ABC : active 선택자 ABC 요소 위에서 마우스 오른쪽 버튼을 눌렸을 때 발생a : active {   background-color : red;}a 태그를 사용자가 선택했을 때 배경색을 빨간색으로 바꿔라.ABC : focusinput 태그를 클릭 한 뒤, 커서가 깜빡일 떄처럼 포커스가 올라가 있을 때 선택input :focus {  background-color : orang..