[UIUX] css hover을 활용하여 웹에서 SVG 모션처리하는 방법

#UIUX #웹svg #csshover #strokedashoffset #strokedasharray

디자인 소개 및 학습목표

#

디자인소개

웹페이지에 SVG파일을 불러와 마우스 호버효과를 넣을때 선이 그려지도록 만들 것이다.

​

학습목표

1. SVG 파일을 간단하게 이해하자.
2. SVG 파일 다운로드를 받아서 웹에 구현하는 방법을 배운다.
3. css로 svg를 디자인 하는 방법을 배운다.
4. css hover을 이용하여 마우스를 올렸을 때 선이 그려지도록 구현한다.

​

사용하는 언어

HTML

• 간단히 기본적인 틀만 만들겠다.
• svg파일안에 <path>태그가 들어가 있음을 기억하자

​

CSS

• css를 활용하여 svg그림을 꾸며줄 것이다. (fill,stroke활용)
• strokearray, strokeoffset 값을 찾는 방법을 배운다.

​

SVG 파일 다운로드 방법

Fontawesome

웹 폰트 아이콘을 가져올때 사용하는 fontawesome 사이트에서 svg파일을 다운받을 수 있다.

​

fontawesome 사이트에 접속해준 후 (파일 다운은 로그인 필요 x ) 검색창에 원하는 아이콘을 검색해준다.

간지가나는 airbnb 아이콘을 사용해보자.

​

아이콘을 클릭하면, html을 이용하여 웹폰트아이콘을 사용할 수 있는 코드가 나온다. 하지만 우리는 svg파일을 다운받아야 하므로 우측 상단의 다운로드 버튼을 눌러준다.

#

다운로드 받은 SVG파일을 코드편집기에 넣어준다. 넣으면 <SVG>태그가 생성되면서 요상한 코드가 나오는데, 복잡하게 생각할 필요 없이 그냥 이런게 있구나 생각하면된다.

​

SVG파일이 뭔가요?

SVG파일은 벡터기반으로 그려진 그림파일로 이해하면 간단하다. 사진,그림은 보통 비트맵과 벡터로 나뉘는데 어렵게 느껴질 수 있으니 간단하게 기억하면 된다. 비트맵은 우리가 흔히 알고있는 픽셀기반 그림파일이며, 확대시 깨진다. 벡터는 일러스트로 그린 그림이며, 확대해도 깨지지 않는다. 위의 SVG태그에 수많은 숫자들이 벡터 공간의 점이라고 보면 된다.

HTML

                                    <body>
    <main>
        <svg viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224 373.12c-25.24-31.67-40.08-59.43-45-83.18-22.55-88 112.61-88 90.06 0-5.45 24.25-20.29 52-45 83.18zm138.15 73.23c-42.06 18.31-83.67-10.88-119.3-50.47 103.9-130.07 46.11-200-18.85-200-54.92 0-85.16 46.51-73.28 100.5 6.93 29.19 25.23 62.39 54.43 99.5-32.53 36.05-60.55 52.69-85.15 54.92-50 7.43-89.11-41.06-71.3-91.09 15.1-39.16 111.72-231.18 115.87-241.56 15.75-30.07 25.56-57.4 59.38-57.4 32.34 0 43.4 25.94 60.37 59.87 36 70.62 89.35 177.48 114.84 239.09 13.17 33.07-1.37 71.29-37.01 86.64zm47-136.12C280.27 35.93 273.13 32 224 32c-45.52 0-64.87 31.67-84.66 72.79C33.18 317.1 22.89 347.19 22 349.81-3.22 419.14 48.74 480 111.63 480c21.71 0 60.61-6.06 112.37-62.4 58.68 63.78 101.26 62.4 112.37 62.4 62.89.05 114.85-60.86 89.61-130.19.02-3.89-16.82-38.9-16.82-39.58z"/></svg>
    </main>

</body>

간단히 body>main태그를 우선 만들었다. 이후 SVG파일에 들어있는 수많은 코드를 복사해서 main테그 안에 넣어주었다.SVG파일은 따로 <SVG>태그가 생성되는데, 일반적으로 이미지를 넣을 때 <img>태그와 비슷하게 들어간다고 보면된다.

CSS

1.크기조정

                                    main{

    width: 250px;
    height: 250px;

    svg{
        width: 100%;
        height: 100%;}

정말 간단한 내용이다. main테그를 프레임으로 두고 크기를 조정하였다.

웹에서 svg 구현

SVG파일 불러오기

• 처음 파일을 불러오면 선 안의 공간이 채워져있다. 이 부분을 투명하게 만들어 줘야 선만 남게 된다.
• 확대해도 깨지지 않는 것을 알 수 있다. (gif로 표현할 수 없어서 아쉽다...)

​

​

​

​

2.채우기색 조정

                                    main{
   //위를참고하시오
    svg{
       //위를참고하시오
       path{
            fill:blue;
            fill:rgb(223, 167, 220);
            fill:transparent; //중요!!! 투명색
        }

    }

path에 css 넣기

svg태그를 잘 살펴보면 안에 path태그가 있는 것을 알 수 있다(위 참고). path안에 css를 넣어줘야 한다.

svg path fill 적용

색상을 조정하는 테그는 fill테그이다. 정확하게 말하자면 선과 선 사이의 공간을 채우는 것을 의미한다. #코드나 rgb값으로 모든 색깔 구현이 가능하며, transparent를 넣으면 투명해진다(중요).

​

3.테두리 굵기 & 색조정

                                    main{
   //위를참고하시오
    svg{
       //위를참고하시오
       path{
            fill:blue;
            stroke: #000;
            stroke-width: 10;
        }

    }

테두리 색 : stroke / 태두리 굵기 : stroke-width

• 테두리 색은 stroke로 지정이 가능하다. 역시 모든 색을 넣을 수 있다.
• 테두리 굵기는 stroke-width를 사용하여 표현 할 수 있다.0. 단위 까지도 표현이 가능하며 수가 커지면 굵어진다.

​

svg path stroke

​

• 학습목표를 위해 fill을 transparent로 지정하고 stroke-width를 굵게 표현 했다.
• 굵기를 더 두껍게 하면 선 사이 공간이 다 채워지기는 하나 이쁘지 않다.

​

​

화면에 선이 그려지는 stroke-dasharray, stroke-dashoffset

이제 학습 목표 처럼 마우스를 가져다 대면 선이그려지도록 할 것이다.

개념이 어렵다. 그냥 실무 지식만 우선 배워보자.

​

                                    main{
   //위를참고하시오
    svg{
       //위를참고하시오
       path{
            fill:transparent;
            stroke: #000;
            stroke-width: 15;
            stroke-dasharray:0;
        }

    }

우선 stroke- dasharray를 0으로 설정 한 후 웹페이지로 들어간다.

검사- html - main>svg>path테그를 눌려준다.

​

#

#

svg stroke-dasharray

stroke-dasharray속성에 마우스를 대고 키보드 ↑키를 꾹 눌려준다. 처음에는 선 간격이 넓어지다가 다시 처음 상태로 변하는데, 그때의 dasharray값을 찾아준다. 1720이 나왔다.

​

CSS hover효과

                                    main{
   //위를참고하시오
    svg{
       //위를참고하시오
       path{
            fill:transparent;
            stroke: #000;
            stroke-width: 15;
            stroke-dasharray:1720;
            stroke-offset:1720;
            transition:2s;
        }
       &:hover {
       svg path{
       stroke-dashoffset: 0;
      }
   }

 }

여기서 부터는 암기를 하면 좋을 것 같다. 이해하기에는 좀 많이 복잡하다.

​

1. stroke-offset값을 stroke-dasharray와 동일하게 지정한다. // 그럼 화면에는 아무것도 나타나지 않게된다.
2. css hover효과를 걸어, svg파일에 마우스를 갖다대면 stroke-offset 값을 0으로 바뀌게 지정한다.
3. svg에 transition을 꼭 걸어주자

​

빈 화면에 마우스를 가져다 대면 선이 그려지는 것을 볼 수 있다.

#

​

짚어갈 포인트

• stroke-dasharray
• stroke-offset
• svg파일에 대한 이해
• fontawesome활용하기

​

​