UI 프로젝트발행일 2022. 7. 25.원본 https://blog.naver.com/jword_/222828597553 ↗

fontawesome svg파일 웹상에 구현하기 (9)

fontawesome svg파일 웹상에 구현하기 (9) — #fontawesome #svg파일 웹사이트 디자인 소개 및 학습목표 디자인소개 패스트 캠퍼스 "최성일"강...

#SVG UI#Naver Blog

#fontawesome #svg파일

웹사이트 디자인 소개 및 학습목표

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리한 글입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

처음부터 끝까지 하나 하나 손코딩 하는 모습을 보여드릴 것이며. 이전글을 보고오시면 더욱 이해가 빠릅니다.

학습목표

fontawesome의 아이콘 svg파일을 웹상에 구현한다.
svg fill, path로 속성 변경하기

사용되는언어

HTML

svg파일 웹상에 옮기기

CSS

fill 속성 이용하여 투명하게 만들기
stroke/ stroke-width 속성 이용하여 테두리 굵기 조정하기

HTML

<div class="bg"> <svg viewBox="0 0 512 512"><path d="M481.9 270.1C490.9 279.1 496 291.3 496 304C496 316.7 490.9 328.9 481.9 337.9C472.9 346.9 460.7 352 448 352H64C51.27 352 39.06 346.9 30.06 337.9C21.06 328.9 16 316.7 16 304C16 291.3 21.06 279.1 30.06 270.1C39.06 261.1 51.27 256 64 256H448C460.7 256 472.9 261.1 481.9 270.1zM475.3 388.7C478.3 391.7 480 395.8 480 400V416C480 432.1 473.3 449.3 461.3 461.3C449.3 473.3 432.1 480 416 480H96C79.03 480 62.75 473.3 50.75 461.3C38.74 449.3 32 432.1 32 416V400C32 395.8 33.69 391.7 36.69 388.7C39.69 385.7 43.76 384 48 384H464C468.2 384 472.3 385.7 475.3 388.7zM50.39 220.8C45.93 218.6 42.03 215.5 38.97 211.6C35.91 207.7 33.79 203.2 32.75 198.4C31.71 193.5 31.8 188.5 32.99 183.7C54.98 97.02 146.5 32 256 32C365.5 32 457 97.02 479 183.7C480.2 188.5 480.3 193.5 479.2 198.4C478.2 203.2 476.1 207.7 473 211.6C469.1 215.5 466.1 218.6 461.6 220.8C457.2 222.9 452.3 224 447.3 224H64.67C59.73 224 54.84 222.9 50.39 220.8zM372.7 116.7C369.7 119.7 368 123.8 368 128C368 131.2 368.9 134.3 370.7 136.9C372.5 139.5 374.1 141.6 377.9 142.8C380.8 143.1 384 144.3 387.1 143.7C390.2 143.1 393.1 141.6 395.3 139.3C397.6 137.1 399.1 134.2 399.7 131.1C400.3 128 399.1 124.8 398.8 121.9C397.6 118.1 395.5 116.5 392.9 114.7C390.3 112.9 387.2 111.1 384 111.1C379.8 111.1 375.7 113.7 372.7 116.7V116.7zM244.7 84.69C241.7 87.69 240 91.76 240 96C240 99.16 240.9 102.3 242.7 104.9C244.5 107.5 246.1 109.6 249.9 110.8C252.8 111.1 256 112.3 259.1 111.7C262.2 111.1 265.1 109.6 267.3 107.3C269.6 105.1 271.1 102.2 271.7 99.12C272.3 96.02 271.1 92.8 270.8 89.88C269.6 86.95 267.5 84.45 264.9 82.7C262.3 80.94 259.2 79.1 256 79.1C251.8 79.1 247.7 81.69 244.7 84.69V84.69zM116.7 116.7C113.7 119.7 112 123.8 112 128C112 131.2 112.9 134.3 114.7 136.9C116.5 139.5 118.1 141.6 121.9 142.8C124.8 143.1 128 144.3 131.1 143.7C134.2 143.1 137.1 141.6 139.3 139.3C141.6 137.1 143.1 134.2 143.7 131.1C144.3 128 143.1 124.8 142.8 121.9C141.6 118.1 139.5 116.5 136.9 114.7C134.3 112.9 131.2 111.1 128 111.1C123.8 111.1 119.7 113.7 116.7 116.7L116.7 116.7z"/></svg> </div>

SVG파일 웹상에 옮기기위 링크를 통해 SVG파일을 웹에 구현하는 방법을 익힐 수 있다. html>main>.panel>li>.bg>svg로 넣으면 된다.모든 아이콘을 웹에 옮겨준다.아래와 같은 화면이 나오면 성공이다.

CSS

SVG

. svg{ width: 100%; height: 100%; position: absolute; right :-20vw; top: -22vh; }	.svg 우선 크기와 위치를 조정해주자.width:100%, height:100% //딱 괜찮은 크기이다.right와 top 속성을 주어 영역 밖으로 옮겨주자.

<path> 속성 조정하기

path{ fill: transparent; stroke:#111 ; stroke-width: 3px; }	path속성 조정하기fill: transparent; //아이콘 투명하게stroke: #111; //아이콘 선 색깔 넣기stroke-width: 3px; //아이콘 선 굵기 추가하기

복습

짚어갈 포인트

SVG 웹상에 구현하기
css fill, stroke, stroke-width 속성 기억하기