옵시디언 데이터뷰(dataview) - 조건에 따른 행(row) 색상 변경하기

이 글은 [[옵시디언 데이터뷰(dataview) - 조건에 따른 행(row) 색상 변경하기 1]] 페이지의 데이터뷰 구성을 변경하여 이해하기 쉽도록 작성하였습니다.

목표

옵시디언 데이터뷰(Obsidian dataview) 구성 시 강조를 원하는 열에 하이라이트를 표시한다.

코드 및 설명

2개 모두 적용해야 함.

데이터뷰 스크립트

예시 : 데이터뷰 스크립트 블록에 아래 코드를 넣어주세요.

TABLE 
choice(상태="정상", 번호, choice(상태="경고","<span class='custom_dv_yellow'>"+번호+"</span>", "<span class='custom_dv_grayout'>"+번호+"</span>")) as 번호,
상태 
from #dataview-inline-tbl-row-color-2
WHERE file.path!=this.file.path
SORT 번호

설명

choice(상태="정상", 번호, choice(상태="경고","<span class='custom_dv_yellow'>"+번호+"</span>", "<span class='custom_dv_grayout'>"+번호+"</span>")) as 번호
- 번호 열값을 아래의 기준으로 설정한다.
- 상태이 정상일 경우 그냥 표시
- 상태이 경고일 경우 custom_dv_yellow class 설정
- 나머지의 경우 custom_dv_grayout class 설정
from #dataview-inline-tbl-row-color-2 WHERE file.path!=this.file.path` : 태그명’dataview-inline-tbl-row-color-2’ 를 가진 파일들 중 현재 파일만 제외하여 취합한다. ⭢ 결과 리스트를 구성하는 행의 조건
SORT 번호 : 번호 열을 순서대로 정렬한다.

css

아래의 코드를 css 확장자로 Valut 폴더 / .obsidian / Snippet 경로에 저장한다.
설정 > 테마 > css 스니펫 란에서 토글을 켜준다.

 /* Style row that contains .custom_dv_grayout */
table.dataview tr:has(td):has(span):has(.custom_dv_grayout) {
    background-color: #cdcdcd !important; /*연회색 강제*/
}

table.dataview tr:has(td):has(span):has(.custom_dv_yellow) {
    background-color: #fcfcaa !important; /*연노란색 강제*/
}

코드설명

table.dataview tr:has(td):has(span):has(.custom_dv_grayout) : 테이블 행(tr)을 찾는데 이 하위에 custom_dv_grayout 이라는 class명을 가진 span tag가 있어야 한다.
background-color: #cdcdcd !important; : 해당하는 선택자(tr)의 배경색을 #cdcdcd로 강제한다.
참고) 글자색상을 바꿀꺼면 color: #ffffff !important; 식으로 가능

전체 설명

상태=정상
- 아무것도 안함
상태가 ‘정상’ 아니고 ‘경고’
- custom_dv_yellow설정 ⭢ background-color: #fcfcaa !important; ⭢ 노란색 배경
나머지 모든 경우
- custom_dv_grayout 설정 ⭢ background-color: #cdcdcd !important; -> 회색 배경

연관포스트

[[Obsidian Dataview로 인라인 테이블 구성하기]] [[옵시디언 데이터뷰(dataview) - 조건에 따른 행(row) 색상 변경하기 1]]

#obsidian #dataview #dataview-inline-tbl-row-color-2

On This Page