WEB개발이야기 2018. 7. 10.
일렉트론(Electron) 소개 및 사용법
일렉트론(Electron)은 Node.js를 기반으로 javascript, html, css를 사용하여 데스크탑 애플리케이션을 만드는 플랫폼입니다. 이것은 GitHub에서 모던 에디터인 Atom 에디터를 만들면서 공개한 오픈소스입니다. 웹개발자의 입장에서 보면 데스크탑 APP을 개발하는데 있어서 진입장벽이 낮을 뿐만아니라 크로스플렛폼까지 지원하여 윈도우즈, Mac OS X, 리눅스 등 다양한 OS에서 동일하게 사용할수 있는 장점이 있어서 인기가 많습니다. 일렉트론(Electron)은 간단하게 생각하면 웹브라우저 안에 Node.js를 포함시킨 것이라고 보시면 됩니다. 그래서 웹브라우저로 화면을 표시하고 Node.js로 OS의 파일시스템 등에 접근하여 작업을 수행 할 수 있게 되는 것입니다. Atom 에디터..
WEB개발이야기 2018. 7. 10.
PhantomJS와 CasperJS 사용법
프론트앤드 개발을 하거나 웹자동화에 관심이 있는 분이라면 PhantomJS와 CasperJS를 많이 들어봤을 것입니다. 저도 이번에 크롤링 공부를 하면서 알게되어 잊어버리지 않기위해 간단하게 정리를 하려고 합니다. PhantomJS (팬텀JS) 팬텀JS는 화면이 없는 브라우저라고 보면 됩니다. 화면이 없는 브라우저를 어따가 써먹지? 라고 생각할 수도 있겠지만 웹프로그램으로 웹자동화를 개발하기에는 더없이 편리한 기능을 제공하고 있습니다. 입력상자에 값을 입력한다던가 마우스로 버튼을 클릭한다던가 특정 값을 확인한다던가 하는 일련의 작업(이벤트)들을 커맨드라인의 명령어나 javascript코드로 처리를 할 수가 있습니다. 예를들면 학교홈페이지에 로그인을 하여 공지사항 페이지로 이동하고 학생들에게만 공지한 공지..
WEB개발이야기 2018. 7. 10.
정기적인 작업을 수행해 주는 스케쥴러들
윈도우즈나 리눅스(유닉스), 또는 Mac OS X 같은 시스템에는 기본적으로 정기적으로 반복작업을 처리해 주는 스케줄러 프로그램들이 내장되어 있습니다. 윈도우즈에서 작업 스케줄러가 있는것 처럼 리눅스나 Mac OS X에는 cron이라는 것이 있습니다. 윈도우즈는 GUI(Graphic User Interface)로 되어 있어 화면을 보고 마우스로 쉽게 설정을 할 수 있는 반면 리눅스는 쉘에서 텍스트 형태로 작성을 해야 하기 때문에 먼저 학습이 필요합니다. 1. 리눅스의 cron(crontab) Max OS X도 유닉스 계통이기 때문에 리눅스와 마찮가지로 cron을 스케쥴러로 사용합니다. 1.1. crontab 명령어 자주 사용하는 crontab의 명령어 입니다. 명령어 설명 crontab -e 예약작업 설..
WEB개발이야기 2018. 7. 10.
nano에디터 소개 및 사용법
윈도우를 사용할 경우는 전용에디터를 사용하면 되는데.. 리눅스나 유닉스 같은 경우 CLI환경에서 간단한 수정을 할 경우는 vi 애디터만큼 편한 것이 없습니다. 다만 vi 에디터가 사용자 친화적이 아니여서 그것을 사용하려면 별도의 학습이 필요하고 사용법을 익혔다고 하더라도 한동안 사용하지 않다가 다시 사용하려면 여간 헷갈린 것이 아닙니다. 그래서 그런 불편한 점을 해소하기 위해서 많이 사용하는 것이 nano 에디터 입니다. nano 에디터는 사용법도 쉬울뿐만 아니라 하단에 단축키들이 설명되어 있어서 별도의 학습이 없더라도 쉽게 사용을 할 수 있습니다. nano에디터가 기본적으로 설치가 되어 있는 경우 그냥 터미널창에서 $ nano 또는 $ nano 명령어를 입력하고 실행시키면 프로그램이 실행됩니다. $ n..
WEB개발이야기/Node.js 2018. 7. 10.
가상머신에 Node.js설치하고 환경설정하기
이전 포스팅에서 VirtualBox와 Vagrant를 소개하고 설치하는 포스팅을 했었습니다. 이번에는 가상머신 위에 간단하게 Node.js를 설치하고 환경설정을 하는 방법을 포스팅하겠습니다. NVM (Node Version Manager) 설치하기 NVM은 Node.js를 버전별로 설치하고 관리할 수 있게 도와주는 툴입니다. 그래서 한 시스템 안에 기존버전의 Node.js를 삭제할 필요없이 여러 버전의 Node.js를 쉽게 설치하고 사용할 수 있게 해 줍니다. 주의 할 점은 NPM을 사용하지 않을 경우 Node.js의 root 폴더는 /usr/local/bin/의 한 곳에 설치가 되지만 NVM을 사용하여 설치한 경우는 사용자 별로 NVM 폴더에 버전별로 설치가 됩니다. 예를들면.. /User/junist..
WEB개발이야기 2018. 7. 10.
VirtualBox와 Vagrant의 기본 사용법
프로그램의 개발환경을 구축할 때 이제는 VirtualBox나 VMware같은 가상머신을 사용하는 것이 보편화 되었습니다. 가상머신 위에서 개발을 할 경우 심적인 부담없이 자유롭게 개발을 할 수가 있습니다. 예를들어 여러가지 오픈소스를 설치하여 사용 하더라도 다른 프로그램과 충돌이 날 것에 대해 걱정을 하지 않아도 되고 혹시라도 시스템이 죽거나 복구가 불가능할 경우에는 가상머신을 제거하고 다시 설치하여 사용하면 되므로 안심하고 개발을 할 수 가 있습니다. 또한 Vagrant를 활용하여 가상머신을 좀더 편하게 사용할 수 도 있습니다. 가상머신 (VirtualBox) 가상머신은 아무 OS도 설치되어 있지 않은 가상의 데스크탑 이라고 보면 됩니다. 그 가상머신에 windows를 설치하던지 리눅스를 설치하던지 M..
WEB개발이야기 2018. 7. 10.
Grunt 소개와 설치방법
Node.js의 탄생으로 인해 javascript진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다. Gruntjs란 무엇인가. Grunt 또는 Gruntjs라고 하며 인터넷을 검색하면 Task기반 빌드 툴이라고 나옵니다. 풀어서 설명을 하면… Node.js를 기반으로 하고있는 무수한 패키지들 중에 프로젝트에서 필요한 패키지들을 설치하고 그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 Tool이라고 보면 됩니다. 마치 Desktop컴퓨터의 `.bat ` 배치파일과..
WEB개발이야기 2018. 7. 10.
Gruntfile의 주요 플러그인들
앞선 포스팅에서 Grunt 소개와 설치방법를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개하고 간략한 설명을 포스팅 하겠습니다. 플러그인 Grunt.js에서 말하는 플러그인과 Node.js에서 말하는 패키지는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다. 플러그인 찾기 대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴에서 확인할 수 있습니다. 먼저 Grunt웹사이트의 플러그인 메뉴로 이동합니다. 원하는 기능의 플러그인을 검색창을 이용하여 검색을 합니다. 검색결과의 플러그인 리스트중에 하나를 선택하여 설치방법을 확인합니다. 찾는 플러그인이 명확하지 않다면 검색결과 중 **다운로드 수가 많은 것** 이나..
WEB개발이야기 2018. 7. 10.
Gruntfile의 구조와 사용법
Gruntjs를 사용한다고 하는것은 gruntfile.js를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다. 개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs를 사용할 수 있을 정도로 어렵지 않습니다. 이전 포스팅에서 Gruntjs의 소개와 설치법을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다. gruntfile.js의 구조와 사용법 gruntfile.js의 가장 기본적인 구조는 아래와 같습니다. 1. 프로젝트의 구성, 2. 사용한 플러그인 로딩, 3. 실행 명령어의 3개의 분류로 구성되어 있으며 각각 영역별로 설명을 하도록 하겠습니..
WEB개발이야기 2018. 7. 10.
웹프로그램 개발 시 필요한 샘플 이미지를 무료로 제공해 주는 사이트
웹사이트를 개발하다 보면 이미지 영역을 잡는 경우가 있습니다. 이때 사용할 수 있는 무의미한 더미 이미지를 무료로 제공해 주는 사이트가 있어 포스팅합니다. 더미 이미지를 제공해 주는 사이트도 있고 이미지의 글자정보만 제공해 주는 사이트도 있습니다. 더미 이미지 제공 placeimg.com placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 사용법은 매우 간단합니다. 웹사이트 : placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. 디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 뿌려줍니다. 아래의 카테고리와 필터 지..
WEB개발이야기 2018. 7. 10.
Atom 에디터의 유용한 패키지 정리
github에서 만든 무료 Atom 에디터에서 기본적으로 설치해야 할 Packages(플러그인)을 정리해 봤습니다. === Packages used Package Website 설명 O sync-settings https://atom.io/packages/sync-settings Atom에디터의 설정을 저장해서 어디에서든 동일한 환경으로 에디팅을 할 수 있게 해줌 O atom-beautify https://atom.io/packages/atom-beautify HTML, CSS, JavaScript, PHP의 코드 정렬 O color-picker https://atom.io/packages/color-picker 에디터에서 바로 컬러값을 보고 선택할 수 있음 O Remote-FTP https://atom..
WEB개발이야기/오픈소스 2018. 7. 10.
주요 오픈소스 라이선스에 대한 핵심 설명
지금은 Opensource의 시대라고 할 수 있을 정도로 Opensource를 많이 사용하고 있는 추세입니다. 때로는 나도 모르는사이에 Opensource를 사용하고 있기도 하구요. Opensource가 자유롭게 사용할 수는 있으나 무료는 뜻은 아닙니다. 그래서 Opensource를 사용하면서 주의해야 할 점에 대해 핵심만 정리해 보도록 하겠습니다. No 라이선스 BSD MIT Apache MPL EPL LGPL2 GPL2 GPL3 AGPL3 1 수정, 배포의 권한허용 O O O O O O O O O 2 배포 시 라이선스 사본 첨부 O O O O O O O O 3 저작권 고지사항 또는 Attribution 고지사항 유지 O O O O O O O O O 4 ★ 배포시 소스코드 제공의무와 범위 File Mo..
WEB개발이야기/Angular 2018. 7. 10.
Angular의 개요
Angular에 대한 세부적인 포스팅을 하기 전에 먼저 간단하게 개요를 정리 합니다. Angular란? 구글에서 만든 open-souce web application SPA(Single Page Application) 개발이 가능 다양한 플랫폼에 맞게 개발 가능 유지보수, 개발 속도 향상 (데이터 바인딩, 템플릿 등의 문법 제공 ) 아키텍쳐 Angular의 구성요소 Angular2를 구성하는 요소는 크게 4가지 입니다. 컴포넌트 (Component) 모듈 (Module) 서비스 (Service) 지시자 (Directive) 컴포넌트 (Component) Angular는 컴포넌트를 중심으로 개발함 컴포넌트는 화면을 구성하기 위한 하나의 단위로 봄 기본적으로 템플릿 + 지시자 + 클래스 조합으로 구성 템플릿..
WEB개발이야기/Angular 2018. 7. 10.
Angular의 개발환경
Angular의 개발환경 Angular를 개발하기위해서 일반적인 개발환경에 대해 포스팅 합니다. Nodejs 설치 타입스크립트 설치 Angular프로젝트 구성 Nodejs 설치 Angular의 기본적인 개발환경은 Nodejs입니다. Nodejs는 자바스크립트 기반으로 서버개발이 가능하고 NPM을 이용하여 패키지관리까지 가능하기 때문에 많이 사용하고 있습니다. 먼저 nodejs홈페이지에 접속하여 최신버전의 설치파일을 다운로드하여 설치 합니다. nodejs는 윈도우 환경 뿐만아니라 리눅스, macOS에서도 설치가 가능합니다. NPM으로 패키지 설치 Nodejs가 설치되었다면 패키지 매니저인 NPM(Node Package Manager)도 자동으로 설치가 되어 있을 것입니다. NPM의 설치된 패키지가 무엇무엇..
WEB개발이야기/Angular 2018. 7. 10.
Angular와 관련된 라이브러리들
Angular만 단독으로 사용하는 것도 가능하겠지만 개발시간을 단축할 수 있게 해주는 여러가지 라이브러리 들이 존재합니다. 먼저 Angular를 공부했다면 자신이 원하는 것을 개발하기 위해 라이브러리들을 활용할 필요가 있습니다. 그리고 이러한 라이브러리들은 대부분 무료로 사용할 수 있습니다. 관련 라이브러리 IONIC 프레임워크 : 모바일 개발용 프레임워크 네이티브 스크립트 : 웹뷰기반이 아닌 네이티브 기반의 UI 개발 리액트 네이티브 : 웹뷰기반이 아닌 네이티브 기반의 UI 개발 Angular 유니버셜 : Angular의 렌더링을 서버에서 처리하게 해줌(검색엔진최적화) 미티어(meteor) : 풀스텍 자바스크립트 플랫폼 Ng-bootstrap라이브러리 : Angular에서 사용가능한 Bootstrap라..
WEB개발이야기/Angular 2018. 7. 10.
Angular에서 사용되는 타입스크립트 문법
타입스크립트에 대한 간단한 문법을 정리하려고 합니다. 타입과 문자열 선언자 var : javascript에서 전통적으로 사용해온 선언자로 모든 타입을 허용 let : typescript에서 특화시킨 선언자로 타입을 지정해야 함 배열타입 배열의 타입을 아래와 같이 설정하며 배열에 값을 입력할때는 push()를 사용함 let fruits: string[] = ["바나나","사과","오렌지"]; let num1:Array = [1,2,3]; let num2:Array = new Array(); num2.push(1); num2.push(2); num2.push(3); 유니언타입 유니언 타입은 2개이상의 타입을 정의하고 그중에 맞는 것이 자동 설정이 되게 함 var unionX: string | number =..
WEB개발이야기/Angular 2018. 7. 10.
Angular CLI에서 사용하는 명령어 정리
CLI란 Command-Line Interface의 약자로 쉽게 설명하면 DOS창에서 명령어를 써서 실행시키는 것을 말합니다. Angular CLI 명령어 Angular에서 사용하는 명령어 정리 주요 명령어 명령어 내용 ng -help CLI 도움말 확인 ng new 프로젝트명 프로젝트 생성 ng test 단위 테스트 실행 ng build 개발용 빌드 ng build -prod 프로덕션용 빌드 ng e2e 종단 테스트(end to end test) ng serve 개발서버 실행 ng serve --port 4201 --live-reload-port 49153 서버포트는 4021번이고 라이브 리로드서버포트는 49153으로 실행 구성요소 추가 명령어 내용 예제 ng g component 컴포넌트명 컴포넌트 ..
WEB개발이야기/Angular 2018. 7. 10.
Angular에서 iframe사용시 unsafe value 에러 해결법
HTML에서 iframe을 사용할 경우 XSS(Cross Site Scripting) 공격에 대한 방어의 목적으로 SOP( Same Oringin Policy) 정책을 걸어놨습니다. iframe을 이용한 XSS공격은 간단히 설명하면 해커가 어떤 게시판에 글을 작성할때 iframe으로 해킹코드가 있는 문서를 불러오도록 해 놓을 경우 해당 게시물을 열어 보는 대부분의 사용자 정보를 탈취할 수 있게 되는 해킹 기법을 말합니다. 하지만 보안이 검증된 youtube 영상을 불러온다던가 하는 경우에는 일시적으로 SOP를 해제 시켜야 하는 경우가 생기는데요. 그 방법에 대해 Angular에서는 pipe를 이용하여 외부 iframe을 불러 올 수 있게 처리 할 수 있습니다. 에러 유형 보통 아래와 같은 에러메시지가 발..
WEB개발이야기/VScode 2018. 7. 10.
VisualStudio Code 에디터의 설치와 유용한 확장프로그램(플러그인)
SublimeText나 Atom에디터등 텍스트기반 에디터가 유행을 하자 MS에서도 Visual Studio를 기반으로 한 텍스트에디터를 출시하였고 다른 에디터들과 마찬가지로 무료로 서비스를 제공하고 있습니다. 저는 Notepadd++, SublimeText, Atom, Brackets, VisualStudioCode 에디터등을 두루두루 써보다가 VisualStudioCode에 정착을 했습니다. 원래는 Notepadd++를 요긴하게 잘 사용해 왔으나 플러그인 등이 부족하고 현재의 유행하는 편리한 기능의 에디터와는 다르기 때문에 좀더 편리한 에디터를 찾고자 했습니다. 그래서 여러가지 에디터들을 사용해 봤는데 SublimeText는 여러가지면에서 뛰어난 에디터이나 무료로 사용하려면 돈내라는 팝업을 견뎌내야하고..
WEB개발이야기/Node.js 2018. 7. 10.
package.json의 종속성을 최신버전으로 업데이트하는 방법
npm이나 yarn으로 패키지를 추가하게 되면 node_modules폴더에 실제 패키지가 설치되면서 package.json파일에 기록을 하게 됩니다. 일반적으로 npm install 패키지명 --save 이런 명령어를 대부분사용할 텐데요. 그럴경우 package.json의 dependencies와 devDependencies에는 "grunt": "^1.0.3" 이런식으로 현재 패키지의 최신 버전이 설치가 됩니다. 이렇게 설치된 package.json 파일에 대해 아무리 명령어로 upgrade를 하더라도 해당 버전보다 높은 버전이 설치되지 않습니다. 만약 하려면 일일이 패키지별로 설치를 따로 해줘야 하는 불편함이 있는데요. 이것을 한방에 업데이트를 시켜주는 패키지가 있습니다. npm-check-update..
WEB개발이야기/Node.js 2018. 7. 10.
node.js로 Youtube 다루기
Youtube가 무엇인지는 따로 설명하지 않아도 대부분의 사람들이 알것이라고 생각합니다. 이 youtube도 구글에서 OpenAPI를 제공하고 있어서 Node.js에서 활용을 할 수 가 있습니다. 동영상을 업로드하거나 업데이트하거나 또는 검색어를 통해 리스트를 받아볼 수도 있습니다. 이런기능을 잘 활용하면 유의미한 APP을 개발할 수 있습니다. 이번 포스팅에서는 간단하게 Youtube Data API를 활용하여 원하는 검색어로 검색을 하는 일련의 과정을 작성하도록 하겠습니다. 0.1. Youtube API 키 발급받기 Youtube API를 사용하기 위해서는 먼저 구글에 해당 API를 사용하겠다고 등록을 하고 Youtube API 키를 발급받아야 합니다. Youtube API뿐만아니라 OpenAPI를 사..
WEB개발이야기/Node.js 2018. 7. 10.
문자코드와 인코딩 변환 방법
문자코드란? 문자코드란 컴퓨터가 사람이 알아볼 수 있는 문자로 표시하기 위해 각 문자에 할당한 고유번호를 말합니다. 초창기 문자를 나타내기 위한 아스키(ASCII)코드는 알파벳, 숫자, 특수 문자 등.. 각 문자에 해당하는 고유번호를 2진수 8비트로 지정하여 표시하였습니다. 2진수 8비트란 2진수인 0과 1을 나타내는 스위치 8개로 고유번호를 할당한 것을 말합니다. 예를 들면 01101100은 A, 01101101은 B… 이런식으로 2의 8제곱( 256 )가지의 문자를 표시 할 수 있습니다. 하지만 아스키코드로 영문 알파벳, 숫자, 특수 문자 등 256가지 이내의 문자는 커버가 가능했지만 다양한 국가의 다양한 언어를 처리하기에는 256가지로는 부족하기 때문에 더 발전된 문자코드의 개발이 필요했습니다. 게..
WEB개발이야기/Node.js 2018. 7. 10.
Node.js의 유용한 모듈 소개
Node.js에서는 475,000개에 달하는 정말 많은 모듈이 존재합니다. 그중에서 제가 사용해 봤던 몇몇 유용한 모듈을 소개할까 합니다. 1. url (표준모듈) url 모듈은 상대URL을 절대URL로 변경 해주는 등 url 사용에 대한 다양한 기능을 제공하고 있습니다. 간단한 기능 API는 아래와 같습니다. url.resolve(from, to) // 상대경로를 절대경로로 변경하여 줍니다. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) // url 문자열(urlStr)을 url 객체로 변환하여 리턴합니다. url.format(urlObj) // urlObj객체를 URL문자열로 변환하여 리턴합니다. 1.1. 설치 표준모듈이라 Node.js에 포..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
CSS로 그럴듯한 버튼효과를 내보자
별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다. 급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다. 미리보기 BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 코드설명 HTML HTML은 기본 버튼을 사용하고 .btn으로 기본속성을 지정하고 .hover로 효과의 형태를 변경하겠습니다. BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 CSS .btn의 설정으로 기본형태를 정의합니다. 아래쪽에 있는 transition과 color속성이 중요하다 할 수 있습니다. .btn { display:block; width:200px; height:40px; line-height:40px; border:1px #3399dd solid;; ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
레이아웃의 다단을 100% 로 맞추기
예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동으로 맞춰지는 javascript 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 .pct 클래스가 자동으로 나머지 ..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
완벽한 CSS3 선택자 총정리
CSS3를 잘 활용하기 위해서는 먼저 선택자를 확실히 알고 넘어가야 합니다. 선택자란 내가 손을 보고자 원하는 HTML테그를 정확히 집어내는 것을 말합니다. 자주 사용하는 선택자의 경우는 잃어버릴 일이 거의 없지만 자주 사용하지 않는 선택자는 잘 생각이 나지 않는경우가 많습니다. 그것을 대비해서 일단 CSS3의 선택자를 정리해 놓으려고 합니다. 제가 잘 활용하려고 정리하는 목적이 크지만 처음보시는 분도 도움이 될 수 있도록 정리해 놓겠습니다. 선택자는 기본 선택자, 속성 선택자, 상태 선택자로 나눌수 있습니다. 기본 선택자 가장 기본이 되는 선택자로 CSS를 다루시는 분이라면 반드시 알아야 하는 선택자 입니다. 서식 설명 CSS버전 * 모든 요소 선택 2 E 태그명이 E인 요소 선택 1 #myIDname..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
무료로 아이콘 폰트 사용하기 - XEICON 편
웹사이트를 개발 시 아이콘을 제작하려고 하는데 딱히 디자이너가 없는경우~, 아이콘을 사용하고 싶은데 라이선스를 구매하기 어려운경우~ 이렇때 고맙게도 무료이면서 간단하게 아이콘을 사용할 수 있는 방법이 있습니다. 대표적으로 폰트어썸이 있지만 우리나라에서도 서비스를 해주는 곳이 있습니다. 바로 XEICON 입니다. XEICON XEICON 홈페이지 바로가기 XEICON은 예전에는 제로보드로 이름을 날렸고 현재는 Xpressengine이라는 브랜드네임으로 서비스를 하고 있는 XE프로젝트에서 Fonts형 아이콘 형태로 무료 서비스를 하고 있는 웹사이트입니다. 이 XE프로젝트는 현재 네이버에서 서포트를 받고 있기 때문에 쉽게 사라지지는 않을 듯 합니다. Fonts형 아이콘을 무료로 제공하고 있는 원조격인 폰트어썸..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
폰트어썸 (Font Awesome) 아이콘 폰트 사용하기
아이콘 폰트인 폰트어썸 (Font Awesome)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 폰트어썸 (Font Awesome) 폰트어썸 (Font Awesome) 홈페이지 바로가기 폰트어썸은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000여개의 star를 받고 있을 정도로 사랑을 받고있습니다. 현재 유료서비스를 시도하고 있긴하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개나 되어서 상당히 인기가 높습니다. 다만 주의 할 점은 GPL라이선스를 따른다는 것입니다. GPL라이선스는…… 설치 방법 설치는 크게 2가..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
나만의 아이콘 폰트(Icon font) 만들기
정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 때에 따라서는 내가 원하는 아이콘을 폰트화 시켜서 사용해야 할 경우도 있습니다. 이번에는 나만의 아이콘 폰트를 만드는 방법에 대해서 정리해 보려고 합니다. 아이콘 폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다. 나만의 아이콘 폰트 만들기 오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 내가 원하는 아이콘을 아이콘 폰트 형태로 만들어서 사용할 수도 있습니다. 이럴경우 필요한 아이콘만 사용할 수 있어서 용량을 줄일 수 있는 잊점이 있습니다. 다만 아이콘 폰트로 만들어야하는 아이콘은 벡터그래픽 파일 형식인 SVG 파일 포멧이어야 합니다. 아이콘 폰트를 만들어..
