https://youtu.be/KnfjWpICRg4

체크박스 언제 어떻게 사용하는가?
토글은 언제 어떻게 사용하는가?

https://youtu.be/8QkwpqDmyfw

사용자의 입력을 빠르게 도와주는 폼 설계하기

https://youtu.be/sJd3q1Vdq3Q

Sample Download : http://bitly.kr/1HZeu6


https://www.favicon-generator.org/


#favicon, #파비콘, #photoshop

https://developers.kakao.com/ 1. 카카오 개발자 등록 2. 어플리케이션 등록 3. javascript key 발급받기 4. 샘플 코드에 위도 경도 설정하기 5. 지도 샘플 활용 지도 구현하기 네이버와 달리 카드등록 없이 무료로 사용 가능합니다. 에디터: notepad++ 티스토리 : http://alikerock.tistory.com/ 트위터: #eztoweb

네이버 지도 정책 2018.11.18일 버전 반영 1. 네이버 ncolud 가입, 결제카드 등록(60만회까지는 무료) 2. 어플리케이션 등록 3. client ID 발급받기 4. 샘플 코드에 위도 경도 설정하기 5. 네이버 지도 샘플 활용 지도 구현하기 에디터: notepad++ 티스토리 : http://alikerock.tistory.com/ 트위터: #eztoweb

[설문 공개] 웹디자이너, 웹퍼블리셔 초임 연봉은? 근무시간은? 애로사항은? 설문 결과를 공개합니다.

네이버 MAP API를 사용하면 단순이 그림만 제공하는 지도가 아니라 다양한 효과와 편의 기능을 제공할 수 있다.

우선 아래 링크를 통해 NAVER map Api v3를 사용하기 위해 개발자로 등록한다.

https://developers.naver.com/main/

[ Maps 아이콘 클릭 ]

[ 오픈 API 이용 신청 클릭 ]

오픈 API  이용 신청 : 휴대폰 인증, 이메일 인증, 회사명(가상도 가능) 입력후 신청하기

애플리케이션 이름에서 적당한 이름을 입력하고,  사용API에서 지도(웹)을 선택한다.

Web 설정에 가서 해당 지도를 어느 사이트에서 사용할것인지 지정해야 한다.

애플리케이션 등록하기 / 비로그인 오픈 API / Web  설정 선택

웹서비스 URL 입력 http://주소를 입력

지도가 나올 웹사이트의 주소를 정확히 입력한다.

하단 메뉴중/ 내 어플리케이션

개요 부분의 지도 WEB API 가이드 부분은 script를 복사하고 지도가 출력하고자 하는 html  상단에 추가한다.

지도 weB api 가이드 밑에 가이드 링크를 클릭하여 지도 샘플을 확인한다.

JavaScript v3 클릭

네이버 지도 API V3 사이트 바로가기

네이버 지도 API V3 사이트 바로가기

원하는 예제 선택 (정보창 표시하기 선택)

박스 안의 모든 스크립트 코드를 복사

[ HTML ]

호스팅 서버에 올리고 지도가 나오는지 확인한다.

우선 노트패드++에 설치하기 전에 https://codepen.io/ 사이트에서 미리 zencoding을 확인해보려 한다.

codepen은 기본적으로 zen coding플러그인이 장착되어 있어 빠르게 markup을 할 수 있도록 도와준다.

예를 들어 codepen에서 아래과 같이 입력하고 Tab을 누르면 화면과 같이 자동으로 완성된다.

[ zen coding ]
div.container>p>lorem 을 입력한다.

[ zen coding ]

키보드의 Tab를 누르면 화면과 같이 자동으로 코드를 생성한다.

Notepad++에 zen coding 플러그인 추가하기

메뉴/플러그인/plugin Manger / Show Plugin Manager/

플러그인 매니저 없을 때 설치하기

https://github.com/bruderstein/nppPluginManager/releases

노트패드++ 버전에 맞는 소스 다운로드

x86 (PluginManager_v1.4.9_UNI.zip)

64bit (PluginManager_v1.4.9_x64.zip)

(다운로드 한후 압축을 해제하고 파일을 c\/program files(x86)/notepad++ 폴더에 붙여넣기 한다)

플러그인중 Zen coding을 선택하고 install을 클릭한다.

플러그인 업데이트 경고가 나오면 업데이트를 한후 다시 zencoding 플러그인을 설치해야 한다.

Restart

플러그인중 Zen coding을 선택하고 install을 클릭한다.

설치중

플러그인 설치된 화면

zen coding 사용법

아래와 같이 입력하고 메뉴에서 플러그인/zen coding-python/ expand abbreviation을 선택한다.

단축기 변경하기

기본 단축키는 Ctrl + Alt + Enter인데 좀더 간단한 코드로 변경해볼 수 있다.

설정/ 단축키 설정

Plugin commands의 보면 Expand Abbreviation의 단축키 설정이 나와있다. 해당 칸을 선택하고 Modify를 눌러 수정한다.

충돌이 없는 조합으로 원하는 단축키 설정을 한다. CTRL + shift + Enter로 변경해보았다.

사용법 예시  HTML

zen coding HTML 참조

https://code.google.com/archive/p/zen-coding/wikis/ZenHTMLSelectorsEn.wiki

사용법 예시  CSS

zen coding CSS 참조

https://code.google.com/archive/p/zen-coding/wikis/ZenCSSPropertiesEn.wiki

폰트어썸이 최근 version 5로 업그레이드가 되었습니다. 최근 트랜드인 svg 코드를 활용한 방법으로 확 물갈이가 되어서 version4에 비해 사용법이 좀더 단순하고 편해졌습니다.

https://fontawesome.com

< 포토샵에서 사용하기 >

우선 포토샵에서 사용하는 방법부터 알아보겠습니다.

1. 사이트 접속 폰트 다운로드

사이트에 접속하여 download Free 버튼을 클릭하여 소스 다운로드합니다.

2. 압축을 풀고 use-on-desktop 폴더안의 폰트 설치

다운로드한 파일의 압축을 해제하고 use-on-desktop 폴더안의 폰트를 모두 선택하고 마우스 우클릭후 설치합니다.

3. Gliphs(글리프, 자형) 복사하기

fontawesome.com/icons에서 원하는 아이콘 검색 - 찾기원하는 아이콘을 찾기하고 해당 아이콘을 클릭합니다.

copy Gliphs아이콘을 클릭하여 자형(gliphs, 글리프)를 복사합니다.

4. 포토샵에서 텍스트 입력

포토샵에서 type tool을 선택하고 캔버스에 클릭후 붙여넣기 합니다.

그러면 아직 폰트를 지정하지 않았기 때문에 아래와 같이 나옵니다. 텍스트를 모두 선택(ctrl + all) 합니다.

상단 옵션바에서 폰트를 font라고 입력하여 font Awesom  서체를 선택합니다.

그러면 아래와 같이 아이콘이 나타납니다. 글씨이기 때문에 여타 글씨처럼 자유롭게 디자인시 사용하시면 됩니다.

< HTML 마크업 >

웹페이지에서 구현하는 방법을 보도록 하겠습니다.

1. fontawesome  css 로드

css를 로드하는 방식은 cdn(해당 서버)에서 빌려오는 방법과, 다운로드후 불러오는 방법이 있겠습니다.

아래에서 위에서 다운받는 fontawesome.min.css파일을 css 폴더에 넣고

html에서 css를 불러옵니다.

2. 구현 방법 1 - tag 방식

fontawesome 사이트에 접속하여 원하는 아이콘을 찾은후 아래와 같이 태그를 복사합니다.

복사한 코드를 원하는 곳에 붙여넣기 합니다.

브라우저 화면을 확인하면 아이콘이 나오는 것을 확인 할 수 있습니다.

글씨이기 때문에 css에서 색상, 크기 얼마든지 조절하실 수 있습니다.

[ 브라우저 화면 ]

3. 구현 방법 2 - unicode 방식

fontawesome 사이트에 접속하여 아이콘의  unicode를 복사합니다.

아이콘이 나올자리를 class명 icon으로 하나 만들었습니다. 

[ HTML ]

[ 브라우저 화면 ]

이제 css에서 아래와 같이 해당 요소의 내용뒤에 공간을 만들고 그 공간안에 unicode로 해당 아이콘이 나오도록 하고 폰트를 반드시 지정해야 합니다.

[ CSS ]

[ 브라우저 화면 ]

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(내용검색)을 통해 카메라를 찾습니다. 이번에는 아이콘모양을 선택하는 것이 아니고, &로 시작하는 코드를 세미콜론(;)까지 복사합니다.

마지막으로 유니코드를 이용하여 작성해 보겠습니다.

4-1_Unicode 확인하기

http://fontawesome.io/icons/ 에 접속한후 Search icons에서 camera를 입력하여 검색합니다.

그러면 위와 같이 아이콘이 검색됩니다. 포토샵에서 사용했던 camera-retro 아이콘을 선택합니다.

화면에서 아래와 같이 Unicode 부분의 코드를 복사합니다.

4-2_Html 작성하기

html에 아래와 같이 타이틀을 작성합니다.

4-3_CSS 작성하기

css에서 h1 태그의 내용의 앞부분에 공간을 만들고 해당 공간에 유니코드를 이용하여 작성합니다. 이때 유니코드 앞에 역슬래시( \ )로 시작해야 한다는 것입니다.

그러면 아래와 같이 카메라 아이콘이 제대로 출력됩니다.