css

1. 중앙정렬하기

2. 체크박스? 스위치 버튼만들기

   label::before {
         content: '';
         display: block;
         width: 13px;
         height: 13px;
         left: 2px;
         bottom: 2px;
         position: absolute;
         background-color: #fff;
         -webkit-transition: all .4s ease;
         transition: all .4s ease;
         border-radius: 50%;
       }
       #switchBt.theme2+ label::before {
         transform: translateX($transfromXSize);
       }
       #switchBt.theme3+ label::before {
         transform: translateX($transfromXSize *2);
       }
   

3. 그리드 사용

4. js 삼항연산자

   var age = 26;
   var beverage = (age >= 21) ? "Beer" : "Juice";
   

5. sass 믹스인

믹스인(Mixins)

믹스인은 CSS를 묶어서 재사용할 수 있는 모듈로 만들어 줍니다.

@mixin card-view {
  font-size: 22px;
  border: 1px solid grey;
  border-radius: 4px;
}

이렇게 선언한 믹스인은 다음과 같이 가져다 쓸 수 있습니다.

div {
  @include card-view;
}

컴파일하면 아래처럼 바뀌죠.

div {
  font-size: 22px;
  border: 1px solid grey;
  border-radius: 4px;
}

1. sass 미디어 쿼리 작성

   https://leonkong.cc/posts/scss-media-query.html

   _variables.scss

   // Breakpoints
   $breakpoint-mobile: 335px;
   $breakpoint-tablet: 758px;
   $breakpoint-desktop: 1024px;
   

   • _mixin.scss

     @import "./variables";
     

     불러올 때는 언더바나 확장자를 제외해도 정상 작동

   • _mixin.scss

     @import "./variables";
     
     @mixin mobile {
       @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
         @content;
       }
     }
     

   • main.scss

     @import "../../Styles/mixins";
     
     @include mobile {
       .img-card {
         width: 100px;
       }
     }
     

• css cal()
  • +와 - 연산자는 좌우에 공백이 있어야 합니다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율간의 덧셈으로 처리합니다.
  • ` max-width: calc(100% - 40px);` 이렇게 사용해야 한다.

[계산기 계산]

1. js 문자열 바꾸기

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace

• var newStr = str.replace(regexp|substr, newSubstr|function)
  

• console.log(p.replace('dog', 'monkey'));2

1. js 문자열이 숫자인지 검사

   if(isNaN(selectKey)) {
       console.log(selectKey);
     }
   

   숫자가 아니면 True

2. 연산자를 입력했을때 전에 선택한것도 연산자일떄

• 이걸 확인하기 위해 if(lastSelect.match('[x|+|-|/]')) 이러한 방법을 사용
• 그 전에 입력한 연산자를 현재 입력한 연산자로 덮어씌운다.