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

Question

안녕하세요 수업을 듣고 노션에 정리되어있는 자료를 보던 도중 궁금한 부분이 생겨서 질문드립니다.  중첩의 앰퍼샌드 부분에 나와있던 예시인데요 중첩이 깊어지게 되면서 불필요한 선택자들이 사용되었다고 하셨는데 어떤 부분이 불필요한 선택자가 사용된건지 이해가 잘 되지 않습니다.   이 부분에서도 질문의 있어요! map-get으로 h1의 값을 가지고 오면 section h2의 font-size는 45px 맞지 않나요? 수업 영상에서도 45px로 컴파일 되는데 자료에는 19px로 적혀있어서 헷갈려서요.. h2 map-get 라인에 주석처리 되어있는 건 어떤 것에 대한 주석일까요...?

jejucoding · Answer

안녕하세요, 제주코딩베이스캠프입니다 :)   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   잘못 작성된 교안으로 인해 혼란을 드린 점 죄송하며 제보 감사합니다.  해당 부분은 바로 수정하였습니다. 감사합니다.