📚 공부한 내용

Sass

빌트인 함수

Sass @use "sass:math" @use "sass:map" 내장 함수

• https://sass-lang.com/documentation/modules
• map.has-key: key를 가지고 있는지 검사
• map.get: 값을 가지고 온다.

• @if and @eles
  • javascript의 if문과 동일
• @error
  • javascript의 Error객체와 동일
• @at-root
  • 기존 &__list 대신 @at-root .menu__list
• @each
  • javascript의 for in 반복문과 동일
• Sass list type (array): ,, 공백, ()

🤔 새롭게 배운 내용

flex-basis

.box1 {
    flex-basis: 200px;
}
.box2 {
    width: 200px;
}

flex-basis와 width의 차이?
.box를 포함하고 있는 부모의 flex-direction을 column으로 바꿔주게 되면

.container {
    flex-direction: column;
}

width는 계속 넓이 값만 200px로 지정하는 반면에

flex-basis로 지정할 경우 flex-direction속성 값에 따라서 row일 경우에는 width값을 column일 경우에는 height값을 설정하게 된다.

또한 아이템의 크기가 박스의 크기보다 큰 경우 flex-basis는 설정해준 너비값에 상관없이 콘텐츠 너비에 따라서 늘어난다.
즉, flex-basis는 좀 더 유연한 반면 width는 강제적이다.

flex-basis와 width를 동시에 적용할 경우 flex-basis가 우선순위를 갖게 된다.

벡터 이미지 vs 이미지 max-width? with:100%?

max-width는 원본크기 이상 커지지 않는데 부모 컨테이너에 따라 같이 플렉시블하게 조절 하려면 width를 줘야하는데
비트맵은 원본보다 커지면 해상도 이슈가 있지만 벡터는 해상도 이슈가 있다보니 max-width보다 width를 주는게 유리하다!!