안녕하세요.엔소프트입니다!! 오늘은 정말 제가 아끼는 팁을 가져왔어요!!! 안녕하세요.엔소프트입니다!! 오늘은 정말 제가 아끼는 팁을 가져왔어요!!!
구글 폰트 아이콘을 사용하게 되면서 정말 아이콘을 사용해서 활용하기 편해졌죠??? 그런데 저희가 아이콘을 span 태그나 ::after, ::before를 사용하지 않고 background 자체에 넣으려다 보니 힘들었던 기억!! 웹디자이너분들만 계시죠? 오늘 이 부분 제가 타파해드릴게요!!!! 구글 폰트 아이콘 css background를 사용한다! 구글 폰트 아이콘을 사용하게 되면서 정말 아이콘을 사용해서 활용하기 편해졌죠??? 그런데 저희가 아이콘을 span 태그나 ::after, ::before를 사용하지 않고 background 자체에 넣으려다 보니 힘들었던 기억!! 웹디자이너분들만 계시죠? 오늘 이 부분 제가 타파해드릴게요!!!! 구글 폰트 아이콘 css background를 사용한다!
1. 먼저 Google의 폰트 사이트에 가서 Icons를 클릭합니다!! 1. 먼저 Google의 폰트 사이트에 가서 Icons를 클릭합니다!!
2. Search 한번 검색해서 찾아볼게요~ 이렇게 아이콘을 클릭하면 오른쪽 옆에 사용할 수 있는 방법이 나옵니다. Web, Android, iOS라고 나오죠?? 저희는 웹에서 쓸 거니까 이렇게 놓고 2. Search 한번 검색해서 찾아볼게요~ 이렇게 아이콘을 클릭하면 오른쪽 옆에 사용할 수 있는 방법이 나옵니다. Web, Android, iOS라고 나오죠?? 우리는 웹에서 사용하기 때문에 이렇게 놓고,
3. 오른쪽에 보시면 이렇게 사용하는 방법을 안내하고 있습니다. 웹디자이너라면 다 아시죠?? 여기서 포인트!!! span 태그를 이용하는 방법, 코드 포인트를 이용하는 방법이 나와 있지만, background에 바로 사용하는 방법은 없습니다 TT코드 포인트를 넣으려면 :after라던가 ::before에서 content를 넣어서 해야 하는데 그게 아니라 정말 background에서 보여주고 싶은데요!! 3. 오른쪽에 보시면 이렇게 사용하는 방법을 안내하고 있습니다. 웹디자이너라면 다 아시죠?? 여기서 포인트!!! span 태그를 이용하는 방법, 코드 포인트를 이용하는 방법이 나와 있지만, background에 바로 사용하는 방법은 없습니다 TT코드 포인트를 넣으려면 :after라던가 ::before에서 content를 넣어서 해야 하는데 그게 아니라 정말 background에서 보여주고 싶은데요!!
인기글
4. 이렇게 사용하세요!!!! 4. 이렇게 사용하세요!!!!
<! DOCTYPE html >< http-Equiv >< meta http-html = “text” 내용; “text=utf-8” >< href = “style sheet” href = “https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD 24,400,000,000,000,000,000,000, >< ttitletitlel:></typartytl:matl’smartypartypartyparty:martygrogrogrogmette:}:>:matl:5T640-580q044-1483t-38252 252-56ZM380-400q0 127.5-52.5T560-52.5T380-760q 0.5252.5T760q -1.52.5T2200.552T780 ></57480Z0 > ></>< >< }</mvtvtvtvtvtvtvtvmboline/mboline/mboline/></>안녕</medditlegmbolnsmbolsmeddit <! DOCTYPE html >< http-Equiv >< meta http-html = “text” 내용; “text=utf-8” >< href = “style sheet” href = “https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD 24,400,000,000,000,000,000,000, >< ttitletitlel:></typartytl:matl’smartypartypartyparty:martygrogrogrogmette:}:>:matl:5T640-580q044-1483t-38252 252-56ZM380-400q0 127.5-52.5T560-52.5T380-760q 0.5252.5T760q -1.52.5T2200.552T780 ></57480Z0 > ></>< >< }</mvtvtvtvtvtvtvtvmboline/mboline/mboline/></>안녕</medditlegmbolnsmbolsmeddit
p 태그에 넣어봤습니다. 백그라운드에 들어갔죠? background를 사용하면서 data:image를 사용해서 불러오는 방식입니다!! 구글 폰트는 아시다시피 svg에서도 다운로드가 가능하고 png에서도 다운로드가 가능하죠? svg에서 다운로드 후 노트패드나 메모장 등에서 오픈하면 p태그에 넣어 보았습니다. 백그라운드에 들어갔죠? background를 사용하면서 data:image를 사용해서 불러오는 방식입니다!! 구글 폰트는 아시다시피 svg에서도 다운로드가 가능하고 png에서도 다운로드가 가능하죠? svg에서 다운로드 후 노트패드나 메모장 등에서 오픈하면,
<g xmlns=”http://www.w3.org/2000/svg “high=”24″ viewBox=”0-960960″ 폭=”24”><path d= “M784-120 532-372-30 24-968q-1090-184.5-75.5T120-580q0-10975.5-184+5T380-840q1090 184.575.5T640-580q0 44-14 83t-38 69l 252-562 ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-750-127.552.5T200-580q0 7552.5 127.5T380-400Z”/><g xmlns=”http://www.w3.org/2000/svg ” 높이=”24″ 뷰박스=”0-960960″ 폭=”24″)<path d= “M784-120 532-372-30.5-75.5T120-580q0-10975.5-184+5T380-840q1090 184.575.5T640-580q0 44-14 83t-38 69l 252-562 ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-750-127.552.5T200-580q0 7552.5 127.5T380-400Z”/</svg>
이렇게 아이콘의 svg가 소스로 나오는데 이것을 넣는 방식입니다!! 오늘 제가 아끼는 팁을 알려드렸습니다 다음 포스팅에서 또 오겠습니다!! 이렇게 아이콘의 svg가 소스로 나오는데 이것을 넣는 방식입니다!! 오늘 제가 아끼는 팁을 알려드렸습니다 다음 포스팅에서 또 오겠습니다!!