-
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
미해결
노션 수업자료 내용 중에 궁금한 게 있어요!
22.03.21 09:53 작성 조회수 210
1
안녕하세요 수업을 듣고 노션에 정리되어있는 자료를 보던 도중 궁금한 부분이 생겨서 질문드립니다.
중첩의 앰퍼샌드 부분에 나와있던 예시인데요
중첩이 깊어지게 되면서 불필요한 선택자들이 사용되었다고 하셨는데 어떤 부분이 불필요한 선택자가 사용된건지 이해가 잘 되지 않습니다.
이 부분에서도 질문의 있어요!
map-get으로 h1의 값을 가지고 오면 section h2의 font-size는 45px 맞지 않나요?
수업 영상에서도 45px로 컴파일 되는데 자료에는 19px로 적혀있어서 헷갈려서요..
h2 map-get 라인에 주석처리 되어있는 건 어떤 것에 대한 주석일까요...?
답변을 작성해보세요.
0
제주코딩베이스캠프
지식공유자2022.04.01
안녕하세요, 제주코딩베이스캠프입니다 :)
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
잘못 작성된 교안으로 인해 혼란을 드린 점 죄송하며 제보 감사합니다.
해당 부분은 바로 수정하였습니다.
감사합니다.
답변 1