댓글 목록

HTML Native icons

페이지 정보

작성자 운영자 작성일 18-10-10 00:00 조회 1,224 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

홈페이지를 제작할 때 아주 중요한 자원이 아이콘입니다.

그래서 그래픽툴로 제작하거나 font-awesome같은 유용한 외부 라이브러리들이 제공됩니다.

이미지를 사용하거나 자바스크립트 외부 라이브러리를 사용하게 되면 아무래도 트래픽 문제가 발생합니다.

아이콘이라 많은 트래픽이 발생하지 않겠지만 그래도 누적되면 부담이 되기도 합니다.


순수 HTML로 이 문제를 해결할 수 있습니다.

https://www.w3schools.com/charsets/ref_utf_symbols.asp 


html에서는 html entity를 이용하여 다양한 심볼(통화, 화살표, 수학기호, ...)들을 표현할 수 있습니다.


동영상강좌에 사용된 전체 소스

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML Native icons...</title>
    <style>
    #icons > div{
        display:inline-block;
        border: 1px solid #bbb;
        padding: 15px;
        text-align: center;

    }
    #icons > div >b{
        display:block;
        font-size:60px;
        color:red;
    }
    </style>
</head>
<body>
    <div id="icons">
        <!-- <div>&amp;#9970; : <b>&#9970;</b></div>
        <div>&amp;#9951; : <b>&#9951;</b></div> -->
        <script>
        for (var i = 11000; i < 13000; i++){
            document.write("<div>");
            document.write("&amp;#" + i + ";");
            document.write("<b>&#" + i + ";</b>");
            document.write("</div>");
        }
        </script>
    </div>
</body>
</html>




댓글목록 0

등록된 댓글이 없습니다.