.menu-btn:checked ~ => :checked ~ 이 무엇을 의미하는 지요? 채택완료

질문 1 :: .menu-btn:checked ~ => :checked ~ 이 무엇을 의미하는 지요?

질문 2 :: ~ 의 의미는 또 무엇이죠? 

질문 3 :: .menu-icon:not(.steps) 이 것은 무엇을 의미하나요?

=============================================================

.header .menu-btn {

display: none;

}

.header .menu-btn:checked ~ .menu {

max-height: 240px;

}

.header .menu-btn:checked ~ .menu-icon .navicon {

background: transparent;

}

.header .menu-btn:checked ~ .menu-icon .navicon:before {

transform: rotate(-45deg);

}

.header .menu-btn:checked ~ .menu-icon .navicon:after {

transform: rotate(45deg);

}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {

top: 0;

}