CSS nesting (CSS 중첩)

CSS nesting

: 선택기를 계속 이어서 작성 가능. 그룹으로 묶을 수 있는 장점이 있다.

.top-bar {
	height: 80px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    
	.con {
		height: 100%;
		display: flex;
    }
}

@media 쿼리 중첩 : max-width, min-width 없이 직관적으로 작성 가능

.top-bar {
	height: 80px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    
	.con {
		height: 100%;
		display: flex;
        
        @media (width <= 920px) {
		padding-inline: 1rem;
		}
    }
}

---

※ 클래스명 붙일 때 주의사항

크게 감싸는 것들은 클래스명 뒤에 wrap, box 붙이기 ( 메뉴 nav, div 등 )