21.08.24 노트정리

npm-run-all 옵션

• run-p 병렬실행
• run-s 직렬실행

---

sass Maps (객체로 오해할 수 있음)

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

---

sass @키워드들

• @at-root
• @import
• @use
• @forward
• @if
• @mixin
• @include
• @content
• @extend
• @function
• @for
• @each
• @while

---

margin-left: -50vw; 트릭

• width: 100vw로 인해 body 영역에 가로 스크롤바가 나타난다.
• 이를 헤결하기 위해 루트 요소인 html에 overflow-x: hidden;을 추가해야 한다.

@mixin boxSizeFull($width: 100vw){
  /* width: 100vw로 인해 body 영역에 가로 스크롤바가 나타난다. */
  /* 이를 헤결하기 위해 루트 요소인 html에 overflow-x: hidden;을 추가해야 한다. */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  @content;
}

---

#{} (문자보간)

• 코드의 어디든지 변수 값을 넣을 수 있음

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

---

@mixin responsive($width: max-width){
  #{$width}: 100%;
  height: auto;
}

@mixin responsive($width: max-width){
  max-width: 100%;
  height: auto;
}

---

data-tooltip

• 사용자 정의 속성
• 출력과 관련?

::after {
                    content: attr(data-tooltip);
                    position: relative;
                }

---

inline, inline-block padding 차이

• 둘다 패딩은 먹는다
• inline일때는 부모에게 패딩값을 전달하지 않고
• inline-block일때는 부모에게 패딩값이 전달된다.

---

Grid-template

grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;

• column 먼저 선언하는 이유

• grid-template-areas에서 자동으로 정렬해주기 때문