프론트엔드 공부한 거 정리하기

자바스크립트에서 값이 가지는 데이터 타입. 특히 변수는 가지는 값에 따라 자료형이 달라질 수 있음. 숫자(Number) : 정수 및 부동소수점 숫자로 일반적인 숫자 외에 (Infinity, -Infinity, NaN 등의 특수 숫자 값 포함) infinity : 어떤 숫자보다 큰 무한대 NaN : Not a Number 계산 중 에러 발생, 정확하지 않은 연산이나 값으로 인한 오류 문자열(String) : 문자로 이루어진 데이터로 '작은 따옴표' "큰 따옴표" `백틱`으로 구분 백틱을 사용하면 ${변수나 연산식 등}을 넣어 문자열로 출력할 수 있음 `숫자`도 `숫자형 문자열`로 분류된다. 논리(Boolean) : true와 false 단 둘의 값을 가지며 논리적인 연산이 필요할 때 주로 사용된다. nul..

화살표 함수 (ES6 이상 사용) 함수 표현식(익명 함수)에서만 사용 가능 this, arguments, new 키워드 (생성자) 사용 어려움 함수 본문이 여러 줄인 경우 {} 사용 권장, {} 사용시 반드시 return 키워드를 통해 반환 실행문이 한 줄일 경우 return은 생략 가능. 변수명 = () => 실행문. // 매개변수가 없는 경우 반드시 () 작성 변수명 = para1 => 실행문. // 매개변수가 하나인 경우 () 생략 가능 변수명 = para1, para2 => { //매개변수가 있는 경우 () 생략 가능 실행문; return 반환값; } 아래의 두 식의 작동 방법은 동일하다. function arrow(a, b) { return a + b; } alert(arrow(3, 7)); /..

함수 function 란? 특정 기능을 실행하기 위한 코드의 집합으로 호출을 통해 재사용 가능 객체 자료형 중 하나이기 때문에 변수 대입 가능 함수는 선언함수와 익명함수로 생성 가능 선언 함수 - 이름을 가진 함수 선언문 선언 함수의 경우 어느 곳에서나 호출 가능 함수명();

for 반복문 조건이 만족되는 동안 반복 실행 for(초기값; 조건식; 증감식) { 실행문 } 1부터 100까지 숫자를 console.log();로 출력 for(let a = 1; a 실행문 -> 증감식 -> 조건식(충족시) -> 실행문 -> 증감식 순으로 진행 증감식으로 인해 a의 숫자가 1씩 증가하며 101이 되는 순간 ..

switch문 특정 값과 비교하여 참인 경우 실행. 복수의 if 조건문을 switch문으로 대체할 수 있음. 하나 이상의 case문을 포함하며 마지막 default문은 생략 가능하다. switch (비교값) { //비교시 엄격한 비교 === case 비교할 값: //이 값과 비교하여 참인 경우 실행 실행문; break; //비교값이 참인 경우 다음으로 넘어가지 않고 구문을 벗어남. case 비교할 값 : 실행문; break; default: //위의 비교값과 일치하는 값이 없는 경우 실행. else와 같은 역할을 하며 생략 가능 실행문; break; //제일 마지막 값이기 때문에 생략 가능 } 1~4 숫자 중 하나를 입력하면 브라우저에 텍스트 표시 사이트 이름을 입력하면 해당 사이트 새창으로 열기 pro..

변수 변수는 데이터를 담은 박스와 같으며 이름을 정해서 그 안에 값을 담아 쓸 수 있다. 키워드를 통해 변수를 선언할 수 있으며 변수를 선언하는 키워드는 let, var가 있다. 둘 다 거의 동일하게 동작하지만 차이점이 있음. 변수라는 이름처럼 키워드를 통해 변수를 선언했다면 값을 할당할 수 있는데 이 값은 변경이 가능하다. 할당할 때마다 새로 할당된 값이 적용되며 그 전 값은 제거된다. 위 처럼 값을 재할당할 수 있는데 var, let의 차이점이 있다. var는 위 코드처럼 같은 변수명으로 재선언, 재할당이 가능하며 let은 재할당은 가능하지만 재선언이 불가능하다. let으로 선언한 변수의 값을 변경하려면 let 키워드를 빼고 작성해야 함. let a; // 변수에 a라는 이름을 붙여 선언 a = 10..

display: grid; 2차원(행row와 열column)의 레이아웃 시스템으로 부모 요소(grid container)와 자식 요소(grid item)으로 구성되어 있다. display: flex; 와 마찬가지로 위 아래 마진 상쇄 현상이 적용되지 않아 마진값만큼 여백이 더 벌어짐. grid-container 속성 grid-template-rows : 행을 제어하는 속성 grid-template-rows는 행을 제어하는 값으로 위에서 아래로 값을 순차적으로 입력하면 해당 행의 높이를 조정할 수 있다. grid-template-rows: 100px 200px 300px 50px; /* 1행 2행 3행 4행의 값 */ grid-container의 높이값이 지정되어 있지 않았을 때 % 단위값을 쓰면 아이템들..

background-clip: ; 요소의 배경이 어디까지 확장될 건지 조정하는 속성. background-clip: border-box : 보더가 위치한 테두리까지 배경 적용. (보더로 가려져있으나 dotted로 체크하면 보임) background-clip: padding-box : 패딩 영역 포함 테두리까지 적용. (보더 테두리 바로 전 패딩 포함한 영역) background-clip: content-box : 패딩 영역 제외한 콘텐츠 영역에만 적용. background-clip: text : 요소 내 텍스트가 있으면 텍스트 내부 영역에만 적용. 텍스트가 있는 영역에 배경을 출력하기 때문에 텍스트 컬러에 투명도를 적용해야 함. -webkit-background-clip: text; 와 함께 사용 ( b..

미디어 쿼리 Media Queries란? 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나 @media [only 또는 not] [미디어유형] [and 혹은 ,] (조건문) {실행문} **** min, max을 사용할 땐 반드시 크기가 작은 순서(min)와 큰(max) 순서대로 작성해야 한다. 미디어쿼리 작성시 뷰포트 값은 필수로 작성해야 한다. 선택자의 우선 순위에 따라 값이 적용되기 때문에 잘 체크해야 함. 기존 css 방식처럼 내부 선언(), 외부 선언(외부.css문서)이 가능하며 기기의 뷰포트 별로 작성시, min(작은 순), max(큰 순)의 크기 순서대로 연결해야 함. 미디어 쿼리 작성 방식 @media screen /* 스크린을 만났..

css변수 사용자 지정 속성 사용자가 정의하는 속성과 값으로 재사용할 수 있는 임의값 공통으로 사용되는 값에 css변수를 설정하여 코드의 반복 사용 줄임 전역 선언 방법 :root { --variable--name: value; } :root { --variable: value; } 지역 선언 방법 dt { --variable-name: value; } 지정된 요소와 하위 요소에서만 적용, 전역 선언된 변수와 이름이 같아도 상관 없으며 해당 지역에서는 지역 선언 변수가 우선 적용 됨. 적용 property: var(--variable--name); property: var(--variable--name, fallback);