노션 수업자료 내용 중에 궁금한 게 있어요!

jemma

投稿した質問数 1

0

안녕하세요, 제주코딩베이스캠프입니다 :)

 

1. 어떤 불필요한 선택자가 사용되었나요?

&는 중첩이 깊어지면 자신의 직계 부모가 아닌 최상위 부모 선택자로부터 참조된다는 특징이 있습니다. 그렇기 때문에 중첩이 깊어지면 불필요한 선택자가 사용되는데요!

아래 빨간 네모 박스 부분을 주목해 주세요! 

 

여기서 .two에 스타일을 설정할 때 아래와 같이 직계 부모인 .one만 참조하여 설정할 수 있는데,

.one .two {
    color: skyblue;
}

 

&을 사용해서 깊은 중첩을 하게 되버리면 아래 교안내용과 같이 불필요하게 많은 선택자들을 참조하게 됩니다.
즉, 여기서 말하는 불필요한 선택자들은 직계 부모가 아닌 .nav, .nav-list, span, a라고 말할 수 있을 것 같습니다.

 

2. 19px이 아닌 45px이 아닌가요? 주석은 무엇을 의미하나요?

45px이 맞습니다! 교안에 잘못 기재되어 있었습니다. ㅠㅠ 이 부분은 바로 수정하였습니다.

 

주석 부분에서 500은 45px이라고 작성해야 하는데 잘못 작성되었습니다. 이 부분도 바로 수정하였습니다.
null은 h3이라는 키가 없기 때문에 null을 반환한다는 의미입니다.

$font-sizes: ("h1": 45px, "h2": 19px, "p": 16px);

section {
    h2 {
        font-size : map-get($font-sizes, "h1"); // 45px
    }
}

map-get($font-size, "h3"); // null

 

잘못 작성된 교안으로 인해 혼란을 드린 점 죄송하며 제보 감사합니다. 

해당 부분은 바로 수정하였습니다.

감사합니다.