· FRONT-END/└ CSS

[ CSS / HTML ] 아이콘 디자인

감자도리22 2024. 4. 18. 19:56

환경 : Visual Studio Code

 

 

[ 이미지 디자인 ]

 

 - 매번 이미지를 활용하여 디자인 할 경우, 용량이 커지고 프로그램이 무거워진다.

 - 이를 개선하기 위해 코드를 활용하여 이미지를 가져올 수 있는 사이트들이 있다. 

 

 - 이 글에서 사용할 사이트는 아래와 같습니다.

    URL 아이콘 : https://fontawesome.com/icons

            애니메이션 : https://fontawesome.com/v6/docs/web/style/animate

[ 전체코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아이콘 디자인</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <link rel="stylesheet" type="text/css" href="test.css">

    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        /*
            글자 색상 디자인
        */
        .creamyPeach { color: #f3a683; }
        .sawtoothAak { color: #f19066; }
        .rosyHighLight { color: #f7d794; }
        .summerTime { color: #f5cd79; }
        .purpleMountainMajesty  { color: #786fa6; }
        .purpleCorallite { color: #574b90; }
        .roguePink { color: #f8a5c2; }
        .flamingoPink { color: #f78fb3; }
        .softBlue { color: #778beb; }
        .cornflower { color: #546de5; }
        .squeaky { color: #63cdda; }
        .blueCuracao { color: #3dc1d3; }
        .brewedMustard { color: #e77f67; }
        .Tigerlily { color: #e15f41; }
        .appleValley { color: #ea8685; }
        .popcelainRose { color: #e66767; }
        .oldGeranium { color: #cf6a87; }
        .deepRose { color: #c44569; }
        .pencilLead { color: #596275; }
        .biscay { color: #303952; }

        /* 마우스를 가져다 댔을 때 움직이도록 설정해보기 */
        /*button > i:hover {
            animation: fa-shake linear 0.15s infinite;
        }

        button > i:not(:hover) {
            animation: fa-shake linear 0.15s none;
        }*/


    </style>
</head>
<body>
    <div class="container w-500">
        <div class="cell center">
            <h1>아이콘 디자인</h1>
        </div>
        <div class="cell">
            <i>i 태그는 이텔릭체 처리를 위한 태그입니다.</i>
        </div>
        <div class="cell">
            <i class="fa-solid fa-user" style="color: #e9a788;"></i>
            <i class="fa-solid fa-plus" style="color: #88bae9;"></i>
            <i class="fa-solid fa-star" style="color: #d4e988;"></i>
            <i class="fa-solid fa-music" style="color: #B197FC;"></i>
            <i class="fa-solid fa-ghost" style="color: #213454;"></i>
        </div>

        <div class="cell">
            <i class="fa-solid fa-ghost fa-2x creamyPeach"></i>
            <i class="fa-solid fa-ghost fa-3x rosyHighLight"></i>
            <i class="fa-solid fa-ghost fa-4x roguePink"></i>
            <i class="fa-solid fa-ghost fa-5x purpleMountainMajesty"></i>
            <i class="fa-solid fa-ghost fa-6x softBlue"></i>
            <i class="fa-solid fa-ghost fa-7x squeaky"></i>
            <i class="fa-solid fa-ghost fa-8x pencilLead"></i>
        </div>

        <div class="cell">
            아이디 <i class="fa-solid fa-asterisk Tigerlily"></i>
        </div>

        <div class="cell">
            <button class="btn positive">
                <i class="fa-solid fa-gear fa-spin"></i>
                설정
            </button>
            <button class="btn negative">
                <i class="fa-solid fa-heart fa-beat"></i>
                좋아요
            </button>
            <button class="btn positive">
                <i class="fa-solid fa-bell fa-shake hover"></i>
                설정
            </button>
        </div>

    </div>
</body>
</html>

 

   - 출력결과

출력 결과

[ 코드 설명 ]

 

 해당 사이트의 이미지를 활용하기 위한 라이브러리 링크를 <head> 태그에 삽입하여 준다. (활용 준비)

<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

 

 

 원하는 디자인의 아이콘을 사이트 내에서 선택하면 코드를 지원해준다. 이 코드를 가져다 활용하면 끝! 추가적인 스타일 지정 등등 다 가능하다. 

   - 예시코드

<i class="fa-solid fa-user" style="color: #e9a788;"></i>

 

 애니메이션 코드 또한 동일하다.  아래의 예시코드에선 fa-beat가 애니메이션 효과를 주는 클래스명이다. 

   - 예시코드

<i class="fa-solid fa-heart fa-beat"></i>

  따라서 클래스명만 알고 있어도 다양하게 조합해서 사용가능!!

 

(추가) 마우스를 가져다 댔을 때만 애니메이션이 작동되도록 설정해보기

/* 마우스를 가져다 댔을 때 움직이도록 설정해보기 */
button > i:hover {
      animation: fa-shake linear 0.15s infinite;
}
button > i:not(:hover) {
      animation: fa-shake linear 0.15s none;
}

 

 

 

 

 

개인 공부 기록용입니다:)

728x90