WEB개발

  • 무료로 아이콘 폰트 사용하기 – XEICON 편

    웹사이트를 개발 시 아이콘을 제작하려고 하는데 딱히 디자이너가 없는경우~, 아이콘을 사용하고 싶은데 라이선스를 구매하기 어려운경우~ 이렇때 고맙게도 무료이면서 간단하게 아이콘을 사용할 수 있는 방법이 있습니다. 대표적으로 폰트어썸이 있지만 우리나라에서도 서비스를 해주는 곳이 있습니다. 바로 XEICON 입니다. XEICON XEICON 홈페이지 바로가기 XEICON은 예전에는 제로보드로 이름을 날렸고 현재는 Xpressengine이라는 브랜드네임으로 서비스를 하고 있는 XE프로젝트에서 Fonts형 아이콘 형태로 […]

  • 완벽한 CSS3 선택자 총정리

    CSS3를 잘 활용하기 위해서는 먼저 선택자를 확실히 알고 넘어가야 합니다. 선택자란 내가 손을 보고자 원하는 HTML테그를 정확히 집어내는 것을 말합니다. 자주 사용하는 선택자의 경우는 잃어버릴 일이 거의 없지만 자주 사용하지 않는 선택자는 잘 생각이 나지 않는경우가 많습니다. 그것을 대비해서 일단 CSS3의 선택자를 정리해 놓으려고 합니다. 제가 잘 활용하려고 정리하는 목적이 크지만 처음보시는 분도 도움이 될 […]

  • CSS3로 타이틀바 꾸미기 5가지

    HTML과 CSS로 탬플릿 디자인을 할때 타이틀 제목으로 사용할 태그에 대해서 미리 꾸며 놓는 경우가 있습니다. 저같은 경우는 블로그를 작성할때 Markdown으로 작성을 하는데 Headline 테그에 미리 CSS로 꾸며 놓으면 쉽고 빠르게 아름다운 글 모양을 나타낼 수 있습니다. 보통 h1 ~ h6 사이의 테그를 크기와 두께 라인 등을 이용하여 꾸밉니다. 아래에 정보를 남기니 참조해서 사용하시면 됩니다. h1 […]

  • git이란 무엇인가?

    git은 개발자에게는 없어서는 안될 버전관리시스템입니다. SVN이 중앙집중식 버전관리 시스템이라면 git은 분산 버전관리 시스템이라 할 수 있습니다. 이번 포스팅에서는 git에 대한 전체적인 개념에 대해서 작성하려고 합니다. 버전관리시스템이란? https://git-scm.com/book/ko/v2를 찾아보면… 버전 관리 시스템은 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. 라고 정의를 하고 있습니다. 소스코드뿐만이 아니라 그래픽 파일까지도 버전관리를 할 […]

  • git사용법과 명령어

    git은 개발자에게는 없어서는 안될 버전관리시스템입니다. SVN이 중앙집중식 버전관리 시스템이라면 git은 분산 버전관리 시스템이라 할 수 있습니다. 경우에 따라 다르겠지만 예전에는 SVN을 많이 사용하던것을 현재는 분산 버전관리 시스템이 git으로 많이 넘어온 상태입니다. 로컬컴퓨터에서만 사용할 경우에는 git만 설치하여 사용하면 되지만 원격저장소를 통해서 여러사람과 사용하기 위해서는 git서버가 있어야 합니다. git서버로 대표적인 사이트는 우리가 흔히 알고 있는 github가 있고 […]

  • 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 […]

  • 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); 유니언타입 […]

  • Angular의 개발환경

    Angular의 개발환경 Angular를 개발하기위해서 일반적인 개발환경에 대해 포스팅 합니다. Nodejs 설치 타입스크립트 설치 Angular프로젝트 구성 Nodejs 설치 Angular의 기본적인 개발환경은 Nodejs입니다. Nodejs는 자바스크립트 기반으로 서버개발이 가능하고 NPM을 이용하여 패키지관리까지 가능하기 때문에 많이 사용하고 있습니다. 먼저 nodejs홈페이지에 접속하여 최신버전의 설치파일을 다운로드하여 설치 합니다. nodejs는 윈도우 환경 뿐만아니라 리눅스, macOS에서도 설치가 가능합니다. NPM으로 패키지 설치 Nodejs가 설치되었다면 […]

  • Angular와 관련된 라이브러리들

    Angular만 단독으로 사용하는 것도 가능하겠지만 개발시간을 단축할 수 있게 해주는 여러가지 라이브러리 들이 존재합니다. 먼저 Angular를 공부했다면 자신이 원하는 것을 개발하기 위해 라이브러리들을 활용할 필요가 있습니다. 그리고 이러한 라이브러리들은 대부분 무료로 사용할 수 있습니다. 관련 라이브러리 IONIC 프레임워크 : 모바일 개발용 프레임워크 네이티브 스크립트 : 웹뷰기반이 아닌 네이티브 기반의 UI 개발 리액트 네이티브 : 웹뷰기반이 […]

  • Angular의 개요

    Angular에 대한 세부적인 포스팅을 하기 전에 먼저 간단하게 개요를 정리 합니다. Angular란? 구글에서 만든 open-souce web application SPA(Single Page Application) 개발이 가능 다양한 플랫폼에 맞게 개발 가능 유지보수, 개발 속도 향상 (데이터 바인딩, 템플릿 등의 문법 제공 ) 아키텍쳐 Angular의 구성요소 Angular2를 구성하는 요소는 크게 4가지 입니다. 컴포넌트 (Component) 모듈 (Module) 서비스 (Service) 지시자 (Directive) […]