꺾이지 않는 마음

혼자 원티드 웹 사이트 클론코딩을 진행하다 문제가 발생했다. 문제상황: 나는 아래와 같은 라인 배너를 따라 만들고 있었다. 배너 안에 있는 ">" 모양의 svg 파일을 가져오기 위해 개발자 도구를 켜서 해당 태그를 복사해왔다. 그리고 내 파일에 붙여넣은 후, css에 color: #fff; 를 주었다. 근데.. 적용이 안된다. 옆에 있는 글자는 흰색으로 잘 바뀌었는데 svg 파일의 이미지는 색상 변경이 안된다 ㅠㅠ svg 아이콘은 color 속성이 적용되지 않나보다. 그래서 원티드 사이트에서는 어떻게 흰색으로 바꾸었나 개발자 도구를 열어서 봤더니, fill: currentColor; 라는 css가 쓰여있었다. 본능적으로 감이 왔다. 이거다! 이렇게 svg를 감싸고 있는 부모 요소에 color: #fff;..

웹 페이지에 아이콘을 삽입하는 방법에는 여러 가지가 있다. 구글 material-icons를 활용하는 방법도 있고, jpg, png 등 여러 형식의 이미지 파일을 활용하는 방법도 있다. 본 포스팅에서는 그중 웹 디자인 영역에서 가장 각광 받는 SVG 파일을 활용해보고자 한다. 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. 개인적으로 학습하면서 이번에 SVG 파일을 아이콘으로 HTML 내에 삽입하게 되었는데, 예전에 사용했던 구글 material-icons 활용 방식 보다 훨씬 편리..