| ETC 23 [ Design Style Guide ] 스타일 가이드 제작하기, 웹디자인을 위한 포토샵 에티켓 (0) | 2019.10.27 |
|---|---|
| ETC 22 [ Web design guide ] 웹디자인 가이드 - 트렌드에 맞는 웹사이트 개발하기 (0) | 2019.10.27 |
| ETC 18 [ 웹마스터 도구 ] 사이트 검색 잘되게 하기, 구글 통계 설정하기, 네이버 구글 웹마스터 도구 (0) | 2019.07.01 |
| ETC 17 [ 체크박스 vs 토글 ] checkbox vs toggle 스위치 어떻게 다른가? (0) | 2019.06.05 |
| ETC 16 [ 폼 설계하기 ] 효율적인 폼 설계하기, 라벨명, 필수, 선택 구분, 정렬 (0) | 2019.06.05 |
폰트 어썸은 iconic font로써 unicode를 기반으로 아이콘 모양을 만드는 것으로 기본적으로 글씨 속성이 있으므로 색상, 크기등을 변경하기 쉽고 크기 또한 작아 많이 사용하는 추세입니다.
1. 포토샵에서 사용하기 (첫번째)
사용방법 첫번째 - 포토샵에서 폰트어썸 폰트를 이용하여 아이콘 사용하기
1-1_폰트 어썸 폰트를 다운로드 하여 설치합니다.
fontawesome.io 사이트에 접속하여 download 버튼을 통해 폰트를 다운로합니다.
No thanks, just download 버튼을 클릭하여 다운로드 합니다.
다운로드를 하고 압축을 풀면 아래와 같이 fonts 폴더에 otf, ttf 파일이 있습니다. ttf 파일만 설치해도 포토샵에서 해당 폰트를 사용할 수 있습니다.
해당파일에 마우스 우클릭후 설치하여 컴퓨터에 설치합니다.
1-2_원하는 아이콘 모양을 찾습니다.
http://fontawesome.io/cheatsheet/ 주소로 이동후 CTRL + F(내용검색)을 통해 camera를 입력하여 fa-camera-retro아이콘을 찾겠습니다. 아이콘을 찾았으면 아이콘 모양을 마우스로 드래그하여 선택을 한후 CTRL + C (복사)합니다.
1-3_포토샵을 실행하고 새문서를 만듭니다.
새문서를 만들고 Type 툴을 선택한후 캔버스에 클릭한후 CTRL+V(붙여넣기)합니다.
그러면 아래화면과 같이 카메라모양이 나오지 않고 네모로 나옵니다.
해당글씨의 폰트를 지정하지 않았기 때문에 그렇습니다.
type레이어를 더블클릭하여 글씨가 모두 선택되게한 후 폰트설정하는 곳에 font만 입력해도 fontawesome이라는 폰트이름이 나옵니다. 그러면 해당 폰트를 선택합니다. 그렇게 하면 아래와 같이 해당 카메라가 나옵니다.
이렇게 디자인을 하시면 해당 아이콘은 폰트(글씨)이기 때문에 타입툴에서 크기 색상 등을 자유롭게 수정하실 수 있고, 이미지가 아니기 때문에 픽셀이 깨지는 현상도 없습니다.
해당 아이콘을 폰트어썸으로 사용하시면 추후 코딩할때 해당 아이콘폰트는 그림으로 저장하실 필요가 없어집니다.
2. HTML 코드로 구현하기(두번째)
이제 포토샵 디자인을 보고 카메라 아이콘이 FONTAWESOME을 사용한 것을 확인했습니다. 그러면 HTML 구조 작성할때 아주 편하게 해당 아이콘을 구현할 수 있습니다.
포토샵에서 작성했던 카메라 아이콘을 HTML에 구현해보도록 하겠습니다.
2-1_폰트어썸의 css 세트 불러오기
폰트어썸의 폰트아이콘을 사용하려면 폰트어썸에서 제공하는 css를 로드해줘야합니다.
로드하는 방식은 폰트를 설치하기 위해 다운로드했던 파일에서 직접 로드하는 방법과 CDN 서버에서 빌려오는 방법이 있습니다.
우선 직접 로드하는 방법을 먼저 보겠습니다.
다운로드한 css 파일을 css폴더 안쪽으로 이동하겠습니다.
font-awesome 압축해제한 폴더에서 css 폴더안의 minified(압축버전)을 복사하여 예제의 css 폴더 안쪽으로 옮기겠습니다.
HTML에서 head와 head 사이에 아래와 같이 입력하여 해당 css 파일을 로드합니다.
또는 CDN 서버에서 빌려오려면 아래와 같이 폰트어썸 사이트에서 주소를 복사하여 사용합니다.
https://www.bootstrapcdn.com/fontawesome/ 에 접속하여 폰트어썸의 CDN 주소를 복사하여 사용합니다.
자 이제 폰트 어썸을 사용할 준비가 되었습니다.
2-2_카메라 아이콘의 클래스명 확인하기
http://fontawesome.io/icons/ 에 접속한후 Search icons에서 camera를 입력하여 검색합니다.
그러면 위와 같이 아이콘이 검색됩니다. 포토샵에서 사용했던 camera-retro 아이콘을 선택합니다.
화면에서 아래와 같이 i태그를 시작하는 태그를 드래그하여 선택합니다.
2-3_HTML 작성하기
코드를 복사했으면 html에 본문에 해당 코드를 붙여넣기 합니다.
브라우저화면에서 확인하시면 해당아이콘이 나오는 것을 확인할 수 있습니다.
2-4_CSS로 해당 아이콘의 색상 크기 변경하기
이제 해당 아이콘은 글씨이기 때문에 CSS에서 글씨 속성을 변경하는 것처럼 편하게 설정할 수 있다.
색상과 크기를 바꿔 보겠습니다.
3. HTML 코드로 구현하기(세번째)
태그에 entitycode를 입력하고 폰트를 fontawesome 으로 지정하기
이번에는 html 카메라 아이콘의 &로 시작하는 entitycode를 입력하고 css에서 해당 코드의 스타일을 지정하는 방법으로 아이콘을 구현해보겠습니다.
3-1_코드 확인하고 복사하기
http://fontawesome.io/cheatsheet/ 에서 다시 CRTL+F(내용검색)을 통해 카메라를 찾습니다. 이번에는 아이콘모양을 선택하는 것이 아니고, &로 시작하는 코드를 세미콜론(;)까지 복사합니다.
3-2_HTML 본문에 붙여넣기
html 본문에 아래와 같이 구분할수 있는 태그를 작성하고 안에 복사한 코드를 붙여넣기 합니다. 저는 span태그로 작성해보겠습니다. css에서 불러오기 쉽도록 class명은 camera로 지정하겠습니다.
html를 작성하고 화면에서 확인해보면 아래와 같이 폰트가 적용되지 않은 상태로 출력이 됩니다.
CSS에서 아래와 같이 해당 요소의 스타일을 설정하는데 핵심은 폰트를 지정해야 한다는 것입니다.
폰트를 지정하면 브라우저화면에 아래와 같이 설정한 아이콘의 모양이 제대로 출력됩니다.
4. Unicode(유니코드)로 구현하기(네번째)
마지막으로 유니코드를 이용하여 작성해 보겠습니다.
4-1_Unicode 확인하기
http://fontawesome.io/icons/ 에 접속한후 Search icons에서 camera를 입력하여 검색합니다.
그러면 위와 같이 아이콘이 검색됩니다. 포토샵에서 사용했던 camera-retro 아이콘을 선택합니다.
화면에서 아래와 같이 Unicode 부분의 코드를 복사합니다.
4-2_Html 작성하기
html에 아래와 같이 타이틀을 작성합니다.
4-3_CSS 작성하기
css에서 h1 태그의 내용의 앞부분에 공간을 만들고 해당 공간에 유니코드를 이용하여 작성합니다. 이때 유니코드 앞에 역슬래시( \ )로 시작해야 한다는 것입니다.
그러면 아래와 같이 카메라 아이콘이 제대로 출력됩니다.
| [ Map API ] 네이버 지도 API를 웹에 구현하자. (0) | 2019.01.08 |
|---|---|
| [설문 공개] 웹디자이너, 웹퍼블리셔 초임 연봉은? 근무시간은? 애로사항은? 설문 결과를 공개합니다. (0) | 2018.12.10 |
| 네이버 지도(naver map API) 웹페이지에 구현하기 (0) | 2018.03.22 |
| notepad++에 젠코딩 zen-coding 플러그인 설치하기 (0) | 2018.03.22 |
| fontawesom version 5 사용방법 3가지 (0) | 2018.03.16 |
