Obsidian 파일 탐색기에서 _assets 폴더를 CSS만으로 자동 숨기기 처리하는 기법

Context

Obsidian에서 Custom Attachment Location 플러그인을 사용하면 각 노트 폴더마다 _assets 하위 폴더가 생성된다. 노트 수만큼 _assets 폴더가 쌓이며 파일 탐색기가 복잡해지는 문제가 발생한다.

Technical Solution

• _assets 폴더 식별 → :has() 선택자와 data-path$='_assets' 속성 셀렉터 사용
• 폴더 숨김 처리 → max-height: 4px와 overflow: hidden 조합으로 시각적 축소
• 폴더 표시 처리 → .is-active 클래스가 포함된 경우 max-height: 150px로 확장
• 부드러운 전환 → transition: max-height 500ms ease-in-out으로 애니메이션 적용
• 잘못된 상태 경고 → collapsed 상태이지만 expanded인 폴더를 빨간색 하이라이트

Impact

별도 플러그인 설치 없이 Obsidian Appearance의 CSS Snippets 기능만으로 즉시 적용 가능

Key Takeaway

CSS :has() 선택자는 부모 요소의 자식 상태에 따라 스타일을 동적으로 적용할 수 있어 UI 갱신을 위한 JavaScript 없이도 복잡한 파일 탐색기 동작이 가능하다