10. @zineeworld
페이지 내에 반복적으로 링크 연결되는 부분에 > 아이콘이 사용
기존 아이콘폰트를 사용해왔던 방식 그대로 <span class=“glyph-ui-chevron-right”></span>을 적어준다.
적용방법
반복적으로 적어주지 않고
좀 더 단순하고 쉽게 사용할 수는 없을까?
16. @zineeworld
접근3) SVG 코드를 활용 해볼까?
1. <img src=“icon.svg”> 이미지 파일로 사용한다.
1. 벡터 이미지여서 크기에는 제약이 없으나 색상을 변경하려면 다른 파일이 필요하다.
2. HTML 코드 안에 <svg ~~~~></svg> 를 넣는다.
1. 1번 방법보다는 하나의 코드로 색상 값을 변경하기는 용이하다. (fill=“color값”)
2. <span class=“glyph-ui-chevron-right”></span> 보다 훨-씬 더 긴 코드를 매번 넣어야 한다.
3. svg 코드에 변경이 생기면 사용하고 있는 모든 곳을 찾아 바꿔줘야 한다.
4. 아이콘 색상을 컨트롤 하는 건 스타일 파일로 통일되어야 하는데,
이 방식을 쓰면 html 코드 상의 수정이 필요하다.
3. CSS로 배경이미지 속성에 svg 코드를 넣는다.
1. background-image: url(data:image/svg+xml, svg코드);
2. 색상 관리를 스타일 파일 한 곳에서 제어가 가능하다.
SVG 아이콘을 사용하는 방법
17. @zineeworld
접근3) SVG 코드를 활용 해볼까?
1.SVG 코드를 background-image 에 넣기
1. IE 대응을 위해 SVG 코드를 Data URI 로 변환하기
2. 변환한 Data URI 값을 배경이미지에 넣기
2.Sass를 통해 색상 변환이 용이한 function 만들기
1. Data URI 에는 hex 값을 넣을 수 없다?
2. rgba의 알파값에 0.999를 주자
3.SVG 코드를 배경이미지로 활용한 아이콘 완성!