0110,0111 TIL ALL-CON devLog

새로 알게된 점

• @extend 를 사용해서 특정 선택자를 상속할 수 있다.

-position:fixed는 부모요소가 아닌 브라우저 창을 기준으로 계산한다.

막혔던 점

모달을 특정 위치 밑으로 내려가지 않게 만드는 걸 구현했다.
사실 전에 만들었던 scrollPosition을 활용하는건 똑같았는데 조건이 하나 더 추가되어서 당황했고 어렵게 생각했다.

scroll위치에 따라서 모달을 만들고 css가 변경된 각 조건에 맞는 모달이 필요하다.
position:fixed에 대한 이해가 부족해서 막혔다. 내가 fixed주려고 한 요소의 부모요소에도 fixed를 주고있어서 원하는 요소외의 다른 요소들도 스크롤에 관계없이 위치고정이 되어있었다.

오늘의 문제 코드 ^ㅡ^

#concertModalContainer {
  z-index: 999;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  @include mobile-only() {
    position: fixed;
  }
  @include md() {
    position: fixed;
  }
  @include lg() {
    position: absolute;
  }

처음에 이렇게 써있던 코드를 보고 lg부분은 지워야겠다. 어차피 안써도 똑같이 position:absolute로 먹힐텐데 3줄이나 코드를 쓰다니 ㅇ3ㅇ 하고 지웠다. 까먹고있다가 나중에 와서 보니 자식요소가 안보이고 이상한거다..!!! merge하거나 어떤 변화도 없는데..?!
이것저것 보다가 지웠던 @include lg부분에 position:absolute;를 집어 넣었더니 다시 자식요소가 잘 보였다. concertModalContainer는 다른 파일에서도 사용하지 않는 유일한 id인데...사실 지워도 상관없어야할텐데 이상하다 흑흑 8ㅡ8 왜 지우면 fixed로 작동되었는지 이해할수없다....8ㅡ8 완벽하게는 모르겠지만 일단 SCSS는 확실하게 적어주는 걸 좋아하는 듯하다 헛헛

참고