왜 css가 적용 안되는거지??? deep에 대해 알아보자

상황

vuetify 컴포넌트의 디자인을 수정하려고 하는데 수정이 안 될 때가 간혹 있다. 아니 엄청 많다. 왜 그런 문제가 있고 어떻게 해결해야하는지에 대한 내용이 기술.

vuetify 와 같이 번들링된 라이브러리 소스 코드를 수정하는 것은 쉽지 않은 일이다. 이것을 수정하기 위해선 보통 전역 스타일 변경을 통해 변경이 가능하다. 하지만 이렇게 되면 모든 스타일시트에 영향이 가므로 scoped 를 사용하여 선언 한다.

scoped를 사용한 CSS

<style scoped>
.a{
	background-color : red;
}
</style>

• scoped 를 사용하여 배경색을 변경한 모습
• 해당 코드는 현재 파일에만 영향이가고 나머지 파일의 a태그에는 영향을 주지않는다.

그렇다면 이 상황에서 vuetify 의 컴포넌트의 디자인을 수정하게 되면 어떻게 될까?

놀랍게도 적용이 안 되는 경우가 많다.

그렇다면 vuetify의 컴포넌트에 접근하려면 어떻게 해야할까?

v-deep 의 사용

v-deep 을 사용해서 컴포넌트 요소에 접근을 하면 된다.

방식은 3가지 이다.

<style scoped>
	.a >>> .b {}
</style>

<style scoped>
	.a::v-deep .b {}
</style>

<style scoped>
	.a /deep/ .b {}
</style>

• 

  .a >>> .b 와 같은 형태는 일부 CSS 전처리 환경에서 작동되지 않을 수 있으므로 그 외에 방식을 따르는게 올바른 선택이다.

예시

<div v-html="htmlData"/>

<style scoped>
	div::v-deep .red{
		color : red ;
	}
</style>

• v-html 부분의 컬러를 수정할 때 일반적인 방법으로 사용하면 스타일 적용이 안 된다.
• 이 경우 v-deep 을 사용해야 접근이 가능하다.

예시2

간단한 예시를 만들어봤다. 일반적으로 v-data-table의 행 색상을 바꾸려고 하면 정상적으로 바뀌지 않는 문제가 발생되는데 이것을 deep을 활용해서 처리한 예시이다.

::v-deep .v-data-table tbody tr{
  background-color: red;
}
::v-deep .v-data-table tr {
  background-color: red;
}

• 실제 작동하지 않는 코드입니다. 예시로만 봐주세요
• 예시 코드 둘다 같은 동작을 합니다.

deep 적용 전

deep 적용 후

다음과 같이 data-v-00ddd2a3 .v-data-table tbody tr 이 생겨난 것을 볼 수 있다. 기존에 tr에는 아무 CSS가 적용되어 있지 않은 상황에서 v-data-table의 tr 속성에 배경을 빨갛게 하라고 CSS를 덮어 씌운것이다. 그렇게 결과적으로 색상이 빨갛게 변하는 것을 볼 수 있다.

그렇다면 v-data-table의 ... tbody ? tr? 은 어떻게 알아낸 정보인가

어떤 클래스에 적용 시켜야할지 .v-data-table 의 tbody의 tr에 적용 시키기 전에 어디에 적용 시킬지 명확히 알필요가 있다. 그것을 추적하는 방법은 간단하다.

1. 그런다음 html 화면에서 우측 클릭해서 검사 클릭
   

   

2. 요소 탭을 클릭한다.
   

   

3. 현재 선택된 요소가 선택된 것을 확인할 수 있다.
4. 좌측에 표시된 것처럼 태그를 마우스 갖다대면 어떤 요소를 선택했는지 확인 할 수있다. 원하는 요소를 선택한다음 element.style에 속성을 넣어준다. 일반 css 스타일이 입력하듯 넣어주면 변경된 것을 확인할 수 있다.
   

   

5. 그렇게 변경 하면 적용한 style sheet를 볼 수 있다. 그렇다면 이 요소를 역 추적 해서 어떤 클래스에 해당되는지 찾으면 된다.
6. 다음과 같이 거꾸로 위로 올라가보면
   tr... tbody ... table ... v-data-table__wrapper .... v-data-table (... 이후 생략) 이렇게 표시된 것을 확인 할 수 있다.
   

   

7. 즉 이것은 .v-data-table .v-data-table__wrapper .table .tbody .tr 이것으로 볼 수 있다.

<style scoped>
	::deep .v-data-table .v-data-table__wrapper .table .tbody .tr{
		background-color: red;
	}
</style>

1. 이렇가 적용하면 문제없이 색상변경된 것을 볼 수 있다.

이렇게 사용해도 되지만 코드가 너무 길어진것 같지 않은가? 클래스가 너무 각박하지 않은가? 좀 느슨하게 풀어보자

<style scoped>
	::deep .v-data-table .tr{
		background-color: red;
	}
</style>

놀랍게도 동일하게 적용된다.

이전 코드는 v-data-table 안에 v-data-table__wrapper 안에 있는 table 안에있는 tbody 안에있는 tr의 색상을 빨강으로 바꾼다 . 라는 의미를 갖는다면

이 코드는 v-data-table 안에있는 tr의 배경색을 빨강으로 바꾼다 는 의미다.

이전코드는 더더욱 섬세하다고 본다면 현재 코드는 좀 유도리있게 처리한 경우라고 보면된다.
상황에 따라 섬세해야 할 때는 이전코드 처럼 섬세하게 각박하게 조건을 추가해서 적용 시켜주면되고. 그렇게까지 섬세해질 필요가 없다면. 현재 코드처럼 유도리있게 처리해주는 것도 방법이다.

---

출처(참고문헌)

• https://handhand.tistory.com/235

연결문서