[CSS] data-attribute를 값으로 사용하기 - data-color이 인식이 안 돼요!

  attr( )을 활용하면 다른 attritube와 마찬가지로 data-attribute에 담긴 값을 가져올 수 있다. 그러나 이전에 data-attribute를 소개하는 포스트(링크)에서 해당 방법은 content를 제외한 경우에는 사용을 지양해야 한다고 언급했다. 분명 값은 가져올 수 있는데 왜 사용하면 안 된다고 하는 것일까?

 

  문제의 원인은 attr( )가 가져오는 값은 string이라는 점이다. 따라서 content를 제외한 경우에는 값을 가져와도 쓸모가 없다. 예를 들어서 color을 지정해주기 위해서 "#FFFFFF"라는 값을 data-attribute로 전달해줘도 이것은 헥스 코드가 아닌 문자열로 인식되기 때문에 색상이 적용되지 못한다. 마찬가지로 10, 5px, 3rem, 100vw와 같은 단위들을 전달해줘도 적용되지 못하며 background-image에서도 URL이 아니기 때문에 사용할 수 없다.

 

  즉, 안타깝게도 data-attribute와 javascript를 활용하여 dynamic하게 css값을 지정해주는 것은 content를 제외하고 불가능하다. 따라서 스타일 관련된 내용을 CSS에서 한 번에 처리해줄 수 있다면 좋겠지만 부득이하게도 해당 방법이 불가능하기 때문에 필요한 경우 javascript에서 그냥 style을 바로 지정해주도록 하자.