Local Disk (C:)

웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하나로 대체함으로써 좀 더 깔끔한 웹페이지 구축도 가능합니다. 웹사이트에 픽토그램(그림문자)을 쉽게 넣는 방법이 있습니다. 바로 웹 아이콘 폰트를 사용하는 것인데요. 웹 아이콘 폰트는 여러 종류가 있으나 그 중에서 Font Awesome가 제일 유명합니다.  Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리 입니다. 이번 포스팅에서는  Font Awesome의 사용법에 대해 다뤄보려 합니다. Font Awesome 공식 사이트 Font-Awesome의 장점 1.  Html Font 속성이 모두 사용 가능하다. Font-Awesome은 이미지가 아닌 폰트이기 때문에 HTML의 Font-style을 적용할 수 있습니다. 이것은 굉장히 큰 장점인데요. 가령 Font-Awesome이 이미지였다고 생각해봅시다. 그럼 크기를 변경시킬때마다 이미지의 크기도 늘려야하고, 색을 변경시킬때마다 이미지의 색상도 변경해주어야 할 것입니다. 하지만 Font-Awesome은 그럴 필요가 없습니다. 간단하게 소스 몇줄만 추가해주면 크기도 늘릴 수 있고 색상도 변경할 수 있죠. < i class = "fa fa-lock" aria-hidden = "true" style = "color:#2353a5;font-size:100px;" > </ i > 2.  CSS를 적용시킬 수 있다. Font-Awesome에는 Css를 적용시켜 웹사이트만의 고유한 스타일로 응용할 수 있습니다. 일반적으로 크기나 색상 그림자효과와 같은것을 Css로 통일시켜 사용합니다. < style type = "text/css" > .pinkstyle { color : #f68181 ; font-size : 50px ;

  블로그나 웹페이의 특정한 위치로 이동하는 링크를 넣는 방법은, 이동하고자 하는 위치에 이름을 붙여 지정하는 일과 그 지정한 이름이 있는 위치로 가는 링크를 거는 일 두 가지로 나누어 생각할 수 있다. 1) 위치 지정하기 HTML 편집창에서, 아래와 같이 이름(name)을 붙인 <a>태그를 원하는 위치에 넣어 주면 된다.  "~~"부분은 이동할 목표지점에 붙인 임의의 이름이며, 숫자와 알파벳으로 적어 주면 된다. 여기서는 장미꽃 그림으로 가도록 하려고 이름을 쉽게 "jangmi"라고 붙였다. <a name="jangmi"> 2) 지정한 위치로 가는 링커 걸기 지정한 위치로 가는 링크는 두 가지를 생각할 수 있다. 하나는 링크와 같은 페이지 안의 특정한 위치로 가는 것이고, 둘은 다른 페이지 또는 다른 사이트의 특정한 페이지의 특정한 위치로 가는 것이다. (1) 같은 페이지 안에서 이동할 때 같은 페이지 안의 특정한 위치로 가고자 할 때는 아래와 같이 <a> 태그의 이동할 위치 참조(href)에 #과 위치를 지정한 이름을 붙여 쓰면 된다. 아래는 같은 페이지 안에서 이름(name)이 jangmi로 붙여진 위치로 이동하는 태그 모양이다. <a href="#jangmi">장미 구경하세요</a> (2) 다른 페이지 또는 다른 사이트의 특정 페이지의 특정 위치로 이동할 때 위의 같은 페이지 안에서 이동할 때와 다른 점은 사이트나 페이지의 주소(URL)를 함께 적어 주는 것 뿐이다. <a href="이동할 페이지의 주소(URL)#jangmi">장미 구경하세요</a> 실제 적용한 모습 구글 블로그의 다이나믹 템플릿에서는 이 기능이 제대로 작동하지 않는다. 구글 블로그의 다른 템플릿에서는 아래의 참고1과 같은 문제점과 해결방법이 있으므로 가능하다.   실제 적용한 예제 페이지 보기  >> 참고1: 구