Frontend
-
JavaScript - 객체Frontend/JavaScript 2021. 7. 6. 15:43
- 객체 정렬 방식 특별한 방식으로 정렬 정수 프로퍼티는 자동으로 정렬 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬 let codes = { "49": "독일", "41": "스위스", "44": "영국", // .., "1": "미국" }; for (let code in codes) { alert(code); // 1, 41, 44, 49 } let user = { name: "John", surname: "Smith" }; user.age = 25; // 프로퍼티를 하나 추가합니다. // 정수 프로퍼티가 아닌 프로퍼티는 추가된 순서대로 나열됩니다. for (let prop in user) { alert( prop ); // name, surname, age } - 정수 프로퍼티란? 변형 없이 ..
-
JavaScript - 엄격 모드(strict mode)Frontend/JavaScript 2021. 6. 25. 16:54
ES5에서 기존 기능이 변경되었고, 기존 기능을 변경하였기 때문에 하위 호환성 문제가 발생할 수 있음 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계 'use strict' 라는 특별한 지시자를 사용해 엄격 모드를 활성화 했을 때만 기존 기능의 변경사항이 활성화 - use strict 'use strict' 지시자가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 동작 스크립트 최상단이 아닌 함수 본문 맨 앞에도 가능하며, 해당 함수만 엄격모드로 실행 'use strict'는 반드시 최상단에 위치 use strict의 위에는 주석만 사용 가능 alert("some code"); // 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다. "use st..
-
JavaScript - 함수선언문, 함수표현식Frontend/JavaScript 2021. 6. 25. 13:12
- JavaScript 함수란 ? 기본적인 구성 블록 중의 하나 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차 - 함수 정의(함수 선언) 함수의 이름 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록 중괄호 안에서 함수를 정의하는 자바스크립트 표현 function 함수명(매개변수1, 매개변수2) { return 매개변수1 + 매개변수2; } function square(number) { return number * number; } - 함수 표현식 함수 표현식은 함수명을 지정하거나 지정하지 않을 수 있다. 함수 표현식은 함수를 다른 함수의 매개변수로 전달할 때 편리 const square = function(number) { return number * number }; const x ..
-
SCSS - 데이터 종류Frontend/Sass(SCSS) 2021. 5. 29. 15:16
$number: 1; // .5, 100px, 1em $string: bold; // relative, "./images/a.png" $color: red; // blue, #fff $boolean: true; // false $null: null; $list: orange, royalblue, yellow; $map: ( o: orange, r: royalblue, y: yellow ); 반복문 @each List와 Map 데이터를 반복할 때 사용 for in 문과 유사 $list: orange, royalblue, yellow; $map: ( o: orange, r: royalblue, y: yellow ); // SCSS @each $c in $list { .box { color: $c; } } @..
-
SCSS 문법(3) - 반복문, 함수, 가져오기Frontend/Sass(SCSS) 2021. 5. 29. 14:46
반복문 스타일을 반복적으로 출력 // through: 종료만큼 반복 @for $i from 1 through 3 { .box:nth-child(#{$i}) { width: 100px; } } // to: 종료 직전까지 반복 @for $i from 1 to 3 { .box:nth-child(#{$i}) { width: 100px; } } // SCSS @for $i from 1 through 3 { .box:nth-child(#{$i}) { width: 100px * $i; } } @for $i from 1 to 3 { .box:nth-child(#{$i}) { width: 100px * $i; } } // CSS (Compiled to) .box:nth-child(1) { width: 100px; } ...
-
SCSS 문법(2) - 변수, 연산, 재활용(Mixin)Frontend/Sass(SCSS) 2021. 5. 29. 03:43
변수(Variables) 반복적으로 사용되는 값을 변수로 지정 변수이름 앞에 $추가 ( $변수이름: 속성값; ) 유효범위는 {} 기준 변수가 재할당되면 그 이후에 사용되는 변수는 재할당 된 값으로 사용 (left 속성은 200px이 아닌 300px이 할당됨) // SCSS $globalSize: 100px; //전역변수 .container { $localSize: 200px; //지역변수 positon: fixed; top: $localSize; .item { $localSize: 300px; //재할당 width: $globalSize; height: $globalSize; transform: translateX($localSize); } left: $localSize; } // CSS (Compile..
-
SCSS 문법(1) - 주석, 중첩, 상위선택자 참조, 중첩된 속성Frontend/Sass(SCSS) 2021. 5. 29. 03:01
주석(Comment) // (컴파일되지 않는 주석) /* */ (컴파일 되는 주석) 중첩(Nestring) // SCSS .container { ul { li { font-size: 20px; .name { color: royalblue; } .age { color: orange; } } } } // CSS (Compiled to) .container ul li { font-size: 20px; } .container ul li .name { color: #4169e1; } .container ul li .age { color: orange; } 상위 선택자 참조(&) 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환 // SCSS .btn { position: absolute; &.active { ..
-
Sass(SCSS) 란?Frontend/Sass(SCSS) 2021. 5. 29. 01:52
CSS 전처리기(CSS Preprocessor) 표준CSS를 완전히 호환하는 CSS의 상위집합(Superset) CSS와 거의 같은 문법으로 Sass 기능을 지원 Sass와의 차이점은 {}(중괄호)와 ;(세미콜론)의 유무 // SCSS $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } // Sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color 참고 자료(References) https://sass-lang.co..