예를 들어 radio 버튼이 있고 그것이 checked 되었을 때 색상을 바꿔야 한다고 하면 background-blend-mode 등을 활용하여 설정할 수 있을 것입니다. 그 이유는 css 만을 이용해 특정 element에 원하는 이미지를 삽입하는 방법은 background-image로 제한되기 때문. 하지만 이 방식을 활용했을 때 해당 이미지에 tint를 적용하기 위해 부가적인 코드가 필요하게 되고 코드만 보고 결과 색상을 예측하기 힘들어집니다.
기대 효과
따라서, 벡터 폰트 (font-awesome 등)으로 inner에 font로서 아이콘을 설정하게 되면 그것을 감싸는 element의 color 속성만 컨트롤 하는 것으로 구현을 간소화할 수 있으며, 더 직관적으로 변화를 예측할 수 있을 것 입니다.
논의해야할 점
모든 아이콘을 위 방식으로 진행할 수 없을 수도 있습니다. 특정 아이콘에 대해 사용할 수 있는 폰트가 없을 수 있습니다.
Icon(레스터 or 벡터) 다이나믹 컬러 설정에 대한 방법론
리팩토링을 왜 진행해야 하는가
예를 들어 radio 버튼이 있고 그것이 checked 되었을 때 색상을 바꿔야 한다고 하면
background-blend-mode등을 활용하여 설정할 수 있을 것입니다. 그 이유는 css 만을 이용해 특정 element에 원하는 이미지를 삽입하는 방법은background-image로 제한되기 때문. 하지만 이 방식을 활용했을 때 해당 이미지에 tint를 적용하기 위해 부가적인 코드가 필요하게 되고 코드만 보고 결과 색상을 예측하기 힘들어집니다.기대 효과
따라서, 벡터 폰트 (font-awesome 등)으로 inner에 font로서 아이콘을 설정하게 되면 그것을 감싸는 element의
color속성만 컨트롤 하는 것으로 구현을 간소화할 수 있으며, 더 직관적으로 변화를 예측할 수 있을 것 입니다.논의해야할 점
모든 아이콘을 위 방식으로 진행할 수 없을 수도 있습니다. 특정 아이콘에 대해 사용할 수 있는 폰트가 없을 수 있습니다.