소낙눈 0

#0 : 내용 요약

다크 모드가 활성화되었을 때의 요소를 대상으로 하는 룰셋(=규칙집합)을 만들고 싶다면

기존에 사용하던 선택자 앞에 html.darkmode 나 .darkmode 를 그대로(띄어쓰기 포함) 추가하세요.

즉, 기존에 사용하던 선택자가 A 일 때, html.darkmode A 꼴로 사용하면 다크 모드를 위한 구문이 됩니다.

원리 #1 : 클래스 변화 확인

트게더는 다크 모드와 라이트 모드를 클래스 속성을 통해 구분합니다.

CIFT : 개발자 도구 둘러보기에서 설명한 개발자 도구를 사용해 파악해봅시다.

먼저 라이트 모드 상태에서 개발자 도구를 열고 요소 탭에 진입하여 페이지 트리를 확인합니다.

페이지 트리 가장 상단의 〈html〉 부분을 보면 라이트 모드 상태에서는 class의 뒷부분이 비어 있습니다.

이후 페이지 맨 아래의 모드 전환 버튼을 통해 다크 모드로 전환한 뒤 페이지 트리에서 〈html〉 부분의 변화를 확인합니다.

〈html〉 태그의 〈class〉 속성에 〈darkmode〉라는 속성값이 들어갔습니다. 도움!

이를 통해 〈다크 모드가 되면〉 → 〈html〉의 〈class〉가 〈darkmode〉로 지정된다는 사실을 확인했습니다.

원리 #2 : 다크 모드와 관련성 확인

그런데 다크 모드 상태의 〈요소〉와 방금 확인한 〈html〉은 서로 같지 않습니다.

따라서 이들 사이에 관련성이 없다면 〈html〉의 class가 변하든 말든 〈요소〉에는 그 영향이 미치지 않겠죠.

그렇기에 우리는 두 친구가 무슨 관계인지 확인해보아야 합니다.

CIFT : 개발자 도구와 페이지 검사에서 소개한 요소 검사 기능으로 화면 상의 요소를 아무거나 하나 선택합니다.

그리고 요소 탭의 페이지 트리로 돌아가보면 선택된 요소가 강조 처리(=하이라이트)되어 있습니다.

트리에서 〈하이라이트된 요소〉를 기준으로 위로 올라가보면 가장 상단에 〈html ···〉이 있습니다.

다른 요소에 여러 번 해 보셔도 결과는 같습니다.

이를 통해 화면에 보이는 〈요소〉들은 전부 〈html〉이 그 상위에 존재함(=조상)을 확인했습니다.

원리 #3 : 선택자 시작

이제 관련성을 파악했으니 선택자를 만들 수 있습니다.

라이트 모드와 다크 모드 상태의 차이점은 html의 class였습니다.

따라서 선택자들 중 class의 값을 통해 요소를 선택해 주는 클래스 선택자를 사용해 봅시다.

클래스 선택자는 .클래스명 형태로 작성합니다.

즉 원하는 클래스명(=class 값) 앞에 〈온점〉을 결합하는 방식으로 사용합니다.

우리는 〈darkmode〉라는 값을 이용할 것이므로 .darkmode 라고 작성하면 됩니다.

이 선택자는 《〈darkmode〉라는 〈클래스 속성(값)〉을 가지는 〈모든 요소〉》라고 해석하면 됩니다.

만약 〈특정 클래스 속성〉을 가지는 〈특정 요소〉를 선택하고자 한다면

해당 《〈특정 요소〉의 선택자》 바로 뒤에 공백 없이 .클래스명 을 붙여 주면 됩니다.

이에 따라 《〈darkmode라는 클래스 속성〉을 가지는 〈html〉》을 선택하려면 html.darkmode 로 작성하면 됩니다.

원리 #4 : 다른 요소 선택자와 결합

그런데 우리는 앞서 말했듯 〈html〉을 선택하려는 것이 아니라 다크 모드일 때의 〈요소〉를 선택해야 합니다.

즉 《〈darkmode라는 클래스 속성〉을 가지는 〈html〉》을 상위 요소로 가지는 〈요소〉를 선택해야 하죠.

그렇기에 우리는 결합자를 통해 요소 선택을 위해 사용되는 경로 요소 간의 관계를 지정해 주어야 합니다.

정리하자면 〈다크 모드의 html〉과 〈선택하려는 요소〉가 서로 무슨 관계인지 알려주는 결합자가 필요하다는 뜻입니다.

물론 관계는 앞서 확인했듯 〈html〉이 상위 요소이고 〈요소〉가 하위 요소입니다.

MDN 문서 : 결합자 목록에서 사용 가능한 결합자들을 확인할 수 있습니다.

이들 중 상 · 하위와 관련 없는 열과 형제 관계를 뺀 〈자손 결합자〉와 〈자식 결합자〉 중 무엇을 사용해야 할 지 골라 봅시다.

#4-A : 자식 결합자

자식 결합자를 사용하려면 우리의 상황에서 〈html〉이 그 〈하위 요소〉의 부모(=바로 윗 세대 요소)여야 합니다.

그러나 트리의 최상위에 〈html〉이 있는 건 맞지만 그게 바로 윗 세대 요소임을 보장하는 건 아닙니다.

즉 〈선택하고자 하는 하위 요소〉의 부모가 〈html〉이 아닐 수 있습니다.

따라서 자식 결합자를 사용하면 안 됩니다.

#4-B : 자손 결합자

자손 결합자를 사용하려면 우리의 상황에서 〈html〉이 그 〈하위 요소〉의 조상(=윗 세대 요소)이어야 합니다.

그런데 〈html〉이 어떠한 〈요소〉의 조상이라는 건 아까 트리를 보고 확인한 사실입니다.

따라서 자손 결합자는 사용할 수 있습니다.

그럼 이제 다 되었습니다.

html.darkmode(=다크 모드 상태의 html) 과 〈요소 선택자〉를 《〈자손 결합자〉인 〈공백〉》으로 이어 주면 됩니다.

따라서 최종적으로 html.darkmode 선택자 { ··· } 형태의 구문을 얻을 수 있습니다.

〈기존에 사용하던 요소 선택자〉가 있다면 위 구문의 〈선택자〉 자리에 그대로 넣어주면 되겠죠.

이 경우 하단의 주의점을 확인한 뒤 사용하세요.

#5 : 마무리

이제 사용 예시와 함께 주의할 점을 같이 확인해보겠습니다.

#right-search-form {

    background: #fff;

    color: #000;

}

기존에 사용하던 구문이 이렇게 생겼다면

html.darkmode #right-search-form {

    background: #000;

    color: #fff;

}

이렇게 다크 모드에 대응하기 위한 구문을 별도로 만들어 주면(=추가해 주면) 됩니다.

기존의 구문을 대체하지 마세요.

다크 모드 선택자를 추가한 html.darkmode 선택자 { ··· } 꼴의 구문은 다크 모드를 위한 구문입니다.

만약 A { ··· } 꼴의 기존 구문을 html.darkmode A { ··· } 꼴로 통째로 바꿔 버린다면 

〈라이트 모드 상태〉의 A에 적용될 구문이 사라져 버립니다.

라이트 모드와 다크 모드의 요소 모두를 대상으로 구문을 작성하고자 한다면

반드시 아래와 같이 선택자 목록을 사용해 두 상태의 요소를 일괄 선택하여 사용하거나 (=동일한 선언 블럭을 갖음)

A,

html.darkmode A {

    background: #000;

    color: #FFF;

}

각각 개별 구문(=룰셋)으로 만들어 사용해야 합니다. (=서로 다른 선언 블럭을 가질 수 있음)

B {

    background: #FFF;

}

html.darkmode B {

    background: #000;

}