Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하기
Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다. 간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용합니다.
CDN 이용하기
HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
4.7.0은 Font Awesome 버전으로, 숫자를 변경해서 원하는 버전을 사용할 수 있습니다.
다운로드 받아 사용하기
Font Awesome v4.7.0 홈페이지에서 다운로드를 클릭합니다.
새 창이 뜨면 밑에 있는 [No thanks, just download Font Awesome 4]를 클릭하면 다운로드가 됩니다.
압축을 풀면 여러 폴더와 파일이 있는데, 서버에 업로드해야 하는 파일은 css 폴더 안의 font-awesome.min.css 파일과 fonts 폴더에 안에 있는 모든 파일입니다.
폴더 구조를 유지한 채 업로드한다면 그대로 사용하면 되고, 폴더 구조를 다르게 해서 업로드해야 한다면 font-awesome.min.css 파일을 열고 @font-face에 있는 font 파일까지의 경로를 수정해줘야 합니다.
업로드 한 후 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. (경로는 적절히 수정합니다.)
<link rel="stylesheet" href="path/css/font-awesome.min.css">
아이콘 넣기
HTML 문서에
<i class="fa fa-xxx"></i>
처럼 생긴 코드를 넣으면 아이콘이 나옵니다.
예를 들어
<i class="fa fa-search"></i>
를 넣으면 돋보기 모양의 아이콘이 나옵니다.
코드는 Font Awesome 홈페이지의 아이콘 목록에서 찾을 수 있습니다.
원하는 아이콘을 클릭하면 확대된 아이콘과 코드를 볼 수 있습니다.
아이콘의 클래스 값은 아이콘 이름을 그대로 사용합니다. 예를 들어 아이콘 이름이 ban이라면
<i class="fa fa-ban"></i>
이 되고, 아이콘 이름이 home이라면
<i class="fa fa-home"></i>
이 됩니다.
Font Awesome은 폰트이므로, 글자를 꾸미는 것과 같은 방식으로 아이콘을 꾸밀 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Coding Factory</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
.a {
margin: 70px 0px;
text-align: center;
font-size: 140px;
color: #2196F3;
}
</style>
</head>
<body>
<p class="a"><i class="fa fa-bullhorn"></i></p>
</body>
</html>
Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before { content: "\f105"; } 기본 마커 없애기 순서 ...
Mixin 정의하기 Mixin은 다음과 같은 형식으로 정의합니다. @mixin mixin-name { // code } 인자를 포함하여 다음과 같이 정의할 수도 있습니다. @mixin mixin-name( $arg1, $arg2, ... ) { // code } Mixin 사용하기 Mixin을 사용할 때는 다음과 같이 합니다. @include mixin-name; 인자가 있는 mixin이라면 다음과 같이 합니다. @include mixin-name( value1, value2, ... ); 예제 1 가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다. SCSS @mixin jb ...
MathJax / 홈페이지에 수식 출력하게 해주는 스크립트
MathJax는 홈페이지에 수식을 표현할 수 있게 해주는 오픈소스 자바스크립트입니다. 다음의 스크립트만 HTML 문서에 추가하면 수식을 넣을 수 있습니다. <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: } }); </script> <script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 수식 입력은 LaTeX나 MathML 등으로 합니다. LaTeX으로 수식을 나타낸 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
크롬 개발자 도구(F12) 몇 초 후 사라지는 문제 해결 방법
웹 개발을 할 때 크롬 개발자 도구를 많이 사용한다. 잘 사용하고 있었는데, 문제가 생겼다. 개발자 도구 실행 후 몇 초가 지나면 사라지는 것이다. 이런 문제가 발생하면 컴퓨터의 최근 변경 사항을 살펴보게 되는데... 원인은 AhnLab Safe Transaction. 금융 업무때문에 설치를 하였는데, 상시 실행되면서 차단을 하는 것이었다. 해결 방법은 AhnLab Safe Transaction을 제거하거나, 자동 시작을 ...
웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법
웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다. 각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 ...
아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법
아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...
대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...
SASS / 변환 스타일 - nested, expanded, compact, compressed
변환 스타일 SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다. nested expanded compact compressed 다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다. ul { font-family: Georgia; color: #333333; li { display: inline-block; } } nested sass style.scss:style.css --style nested 기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul ...
CSS에서 주석은 /*와 */로 만듭니다. SASS에서는 CSS 주석 외에 한 줄 주석인 //를 지원합니다. 컴파일 했을 때 CSS 주석은 그대로 남아 있지만 한 줄 주석은 사라집니다. SASS /* CSS Comment */ // Line Commnet p { color: red; /* CSS Comment */ padding: 20px; // Line Comment } CSS /* CSS Comment */ p { color: red; ...
코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...