잘 써먹은 CSS 속성들

html { font-size: 62.5%; }

루트 글꼴의 상대크기인 rem을 잘 활용하기위해서 사용함.
루트 글꼴은 16px이라 10px로 바꾸어줌. => 계산 용이

box-shadow

box-shadow: offset-x, offset-y, blur, spread, color순으로 작성.
blur는 뿌얘지고 spread는 펴지는거!

선택자

• > 자식만
• & 부모를 타겟해줌
• :last-child,nth-child 바로 직전에 쓰여진 태그를 기준으로 찾음.

div{
	span:last-child
}

이렇게 선택하면 div내부의 span중 마지막 자식!

• aspect-ratio: width / height: 크기 비율 조정해줌.

텍스트 넘치면 줄이기

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

position: sticky

부모에 overflow-hidden있으면 적용안됨!
또한 부모 높이까지만 따라다니는데, 부모높이에 min-height사용하면 늘어난 길이만큼 따라가서 쭉 따라온다

---

잘 써먹은 SCSS 문법

mix in, for in

@mixin nth-child-range($from, $to) {
  @for $i from $from through $to {
    &:nth-child(#{$i}) {
      display: block;
    }
  }
}

이렇게 원하는 범위를 지정해서 자식을 순회하며 속성을 부여!
사용할땐

 @include nth-child-range(3, 5);
    width: 20rem;
 }

이렇게 @include로받아와서 원하는 값을 넘겨준다!

line-height

줄의 기본 높이를 설정해줌. 그런데, 버튼 내부의 after요소에 line-height엔 작은 문제가 있다.
0으로 설정하면 오히려 붕 떠버림ㅋㅋ
그래서 그냥 flex로 수평수직 정렬 해버렸다~!