동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
홈페이지를 제작할 때 아주 중요한 자원이 아이콘입니다.
그래서 그래픽툴로 제작하거나 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>&#9970; : <b>⛲</b></div>
<div>&#9951; : <b>⛟</b></div> -->
<script>
for (var i = 11000; i < 13000; i++){
document.write("<div>");
document.write("&#" + i + ";");
document.write("<b>&#" + i + ";</b>");
document.write("</div>");
}
</script>
</div>
</body>
</html>등록된 댓글이 없습니다.