뇌 채우기 공간

함수의 작성 방법 function getGrade(score){ if(score ===100){ return 'A'; } else if(score===90){ return 'B'; } else{ return 'F'; } } const grade = getGrade(100); console.log(grade); 화살표 함수 const add = (a, b)=> { return a + b; } const sum = add(1,2); console.log(sum); const add = (a, b)=> a+b; 둘이 같은 뜻이다.

// 표현식 && 표현식 if(true && true){ //둘다 true일 때 true } // 표현식 || 표현식 if(true && false){ //둘 중 하나가 true일때 true } // !표현식 if(!false){ // 표현식이 ! 반대일때 true이면 true } 삼항 연산자 조건? 조건이 참이면 실행되는 표현식: 조건이 거짓이면 실행되는 표현식 let n = 5; console.log(n% 5=== 0? '5의 배수입니다.': '5의 배수가 아닙니다'); switch let n = 5; switch(n%5){ case 0: { console.log('5의 배수입니다.'); break; } default: console.log('default' + n); } break를 써주어야한다. ..

Boolean 타입 true, false Null 값을 가지고 있지만 비어있는 값을 가지고 있다. Undefined 값이 없다는 뜻이다. 이렇게 a와 b를 같냐고 비교해보면 같다고 나온다. 그래서 더욱 정확하게 비교할 수 있도록 ===을 사용해서 값과 타입까지 같은지 비교한다. Number String 더하기를 사용할 수 있다. const a = 'Mark'; const d = `${a} Leeee`; console.log(d, typeof d); 이런 기호를 많이 쓴다. Symbol const a = Symbol(); const b = Symbol(37); const c = Symbol('Mark'); const d = Symbol('Mark'); c 와 d는 다른 것이다.

상수 : const 값을 한번 선언하면 변할 수 없다. 변수 let 값을 계속 변화할 수 있다. const sum = 5 + 10; let result = false; if(sum %3 === 0){ cosole.log('야호3'); result = true; } if(sum %5 === 0){ cosole.log('야호5'); result = true; } console.log(result); 변수와 상수의 유효범위 const, let 블록 스코프 {} 이 안의 영역이 유효하다 { // 이 블럭 안에서는 name은 이 안에서 사용 가능하다 const name = 'Mark'; conosle.log(name); } //이 밖에서는 name을 사용할 수 없다. // 하지만 밖에서 정의한 변수는 안에서는 사..

.video{ max-width: 650px; border: 4px solid red; } .video-ratio{ height: 0; /* padding top은 부모 요소의 가로 요소에 영향을 받는다 */ /* height는 반응형이 안되고 크기를 픽스해버리는 것임 */ padding-top: 56.25%; position: relative; } iframe{ background: black; position: absolute; top:0; left: 0; width: 100%; height: 100%; } padding-top 에 56.25퍼센트는 16:9를 계산해서 나온 수치임 그것이 padding이기 때문에 그 안에 요소가 들어갈 수 없다. 그러므로 iframe에 position : absolu..

width값을 디바이스의 크기로 하겠다, 처음 크기를 확대 축소 없이 1배율로 하겠다. 사용자가 손이나 뭣으로 확대축소를 할 수 있냐? no 최대 크기를 1 최소 크기를 1로 한다.

Sass(SCSS) 완전 정복! | HEROPY Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog Sass: Built-In Modules (sass-lang.com) Sass: Built-In Modules Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call f..

@while 은 조건이 false로 평가될때까지 무한 반복하기 때문에 빠져나갈 조건을 만들어야한다. @while 조건 { // 반복 내용 } $i가 원래 6이었는데 while문에서 $i를 재정의한다. 그래서 while문의 조건에서 false가 될때까지 루프를 돈다. 다른 반복문으로 대체가 가능하기 때문에 권장하지는 않는다.

@each 는 List , Map 데이터를 반복할 때 사용한다. for in 문과 비슷하다. @each $변수 in 데이터 { // 반복 내용 } 리스트에 있는 것들이 순서대로 $fruit에 들어간다. 혹시 매번 반복마다 Index 값이 필요하다면 index() 내장 함수를 사용할 수 있다. Map 데이터 사용 map데이터는 key: value로 값이 저장된다. 위의 코드의 뜻은 .box- 뒤에 key (apple, orange, banana) 가 순서대로 오는 이름을 가진 클래스에 background 이미지명이 value( korea, china, japan) 순서대로 온다는 뜻이다. map에서는 위에 사용한 것 처럼 index()를 사용할 수 없다. 따라서 map을 key와 value따로 따로 리스트..

@for는 스타일을 반복적으로 출력한다. @for $변수 from 시작 through 종료 { } 관례적으로 숫자가 증가하는 변수 이름은 i나 index를 사용한다. from ~through i가 1부터 시작해서 3까지 반복을 한다. 그러면 3번 반복을 한다. through의 1번째 자식은 20px, 2번째 자식은 40px, 3번째 자식은 60px이다 from~to 두번째 코드는 1에서 3 전까지니까 2번반복한다. 주의할 점은 nth-child() 이 안에 괄호에 바로 $i를 넣는게 아니라 문자보관을 하는 표시인 #{}를 사용하여 넣어주어야한다.