Posts

Showing posts with the label WEB개발

폰트어썸 (Font Awesome) 아이콘 폰트 사용하기

-
Image
아이콘 폰트인 폰트어썸 (Font Awesome) 을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. 폰트어썸 (Font Awesome) 폰트어썸 (Font Awesome) 홈페이지 바로가기 폰트어썸 은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000 여개의 star 를 받고 있을 정도로 사랑을 받고있습니다. 현재 유료서비스를 시도하고 있긴하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개 나 되어서 상당히 인기가 높습니다. 다만 주의 할 점은 GPL라이선스 를 따른다는 것입니다. GPL라이선스는...... 설치 방법 설치는 크게 2가지로 나누어지는데.. CDN 을 통해서 설치하는 방법과 아이콘 폰트를 다운로드 받아서 설치하는 방법이 있습니다. CDN 설치 가장 간단하게 사용할 수 있는 CDN설치 는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다. 폰트어썸의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad> 태그 영역에 styleseet 를 불러오는 것 처럼 링크를 걸어주면 됩니다. 웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> CDN이란? : CDN은 C ontent D elivery N etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술입니다 (구글검색) 소스제공자가 CDN을 전문으로 서비스
Post a Comment
Read more

아이콘 폰트(Icon font) 자유자제로 사용하기

-
Image
웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘 은 필수로 들어가는 요소입니다. 간단하게는 블릿 에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전에는 이러한 아이콘들을 디자이너에게 만들어 달라고 요청을 하던지 아니면 웹에서 무료로 제공하는 아이콘 이미지들을 찾아서 잘라서 적용하고는 했었는데요. 근래에는 오픈소스 가 발달하면서 이러한 아이콘들을 쉽고 편하게 사용할 수 있게 제공해 주는 다양한 사이트들이 생겨나고 있습니다. 그 중에서도 아이콘들을 폰트와 비슷한 속성으로 만들어서 마치 폰트처럼 아이콘을 사용할 수 있게 제공을 하고 있습니다. 예전에 이런 것을 딩벳 폰트 라고 했었는데.. 이제는 웹폰트 형식으로도 무료 제공하고 있어서 웹사이트에 쉽게 적용할 수가 있습니다. 이 아이콘 폰트는 이미지가 백터 그래픽 형태로 되어 있어서 크기를 늘리든 줄이든 상관없이 선명한 화질을 보장받을 수 있고 색상도 일반 웹폰트처럼 CSS 에서 color 속성으로 변경을 할 수가 있습니다. 다만 아이콘이 폰트형식이기 때문에 단색으로 밖에는 설정할 수 가 없습니다. 아이콘폰트 를 제공하는 곳은 많으나 대표적으로 상업적인 용도로도 사용 가능한 3곳의 웹사이트를 소개할까 합니다. 폰트어썸 (Font Awesome) 폰트어썸 은 현재 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 현재 깃헙에서 51,000 여개의 star 를 받고 있을 정도로 인기가 있습니다. 다양한 형태의 아이콘이 빠르게 업데이트되어 제공되고 있으며 현재 유료서비스도 시도하고 있긴 하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개 나 되어서 일반적으로 사용하기에는 부족함이 없습니다. 전체 라이선스는 GPL 을 따르고 있고 폰트는 SIL , 소스코드는 MIT 를 따르고 있습니다. 자세한 사용방법은 폰트어썸 (Font Awesome) 아이콘 폰트 사용하기 에 포스팅하겠습니다. XEICON 한 시대를 풍미했던 PHP 무료게시판 서
Post a Comment
Read more

이미지 하단에 생기는 이상한 공백 없애기

-
Image
HTML로 레이아웃을 설정하다보면 DIV 태그 안 이나 P 태그 안에 이미지 가 있는 경우 이미지 하단에 약 1~3px정도의 공백 이 생기는 경우를 볼 수 있습니다. 그 공백을 없애려고 이리 찾아보고 저리 찾아봐도 해결이 잘 되지 않는데요. 이것을 없애는 방법을 정리해 보려고 합니다. ▲ 하단에 파란색의 공백이 있음(표시를 위해 백그라운드색을 파란색으로 했음) <div><img src="https://placeimg.com/400/300/any" /></div> 원인 위와 같이 Image 를 DIV 나 Table 에 넣을 경우 하단에 원치않는 공백이 생깁니다. 그 이유는 Image 가 인라인 요소 이기 때문에 그런 것입니다. 인라인 요소의 경우 블록 요소와 달리 보이지 않는 가상의 기준선이 존재를 하는데 기본값으로 vertical-align 의 baseline 에 위치를 하게 됩니다. baseline 은 영문 소문자 로 치자면 아래 삐침이 없는 글자(a, b, c 등등..)의 아랫쪽에 위치하게 됩니다. 그렇기 때문에 아래 삐침이 있는 글자(y, g 등등..)을 고려하면 하단에 1~3px정도의 공백을 유지하게 되는 것입니다. 해결방안 원인을 알았으면 해결책은 쉽게 찾을 수 있습니다. 첫번째 방안 첫번째는 이미지의 vertical-align 을 bottom 으로 하는 것입니다. vertical-align : bottom 은 아래삐침이 있는 글자까지 고려하여 하단으로 정렬하는 것입니다. 그렇게 되면 공백이 없어지게 되겠지요. ▲ vertical-align : bottom 으로 하단에 파란색의 공백이 없어졌음 <div><img src="https://placeimg.com/400/300/any" style="vertical-align: bottom" /></div> 두번쨰 방안 두번쨰는 이미지를 인라인 요소에서 블록
Post a Comment
Read more

HTML5 태그의 블록 요소와 인라인 요소

-
HTML의 태그는 크게 블록 요소(block element) 와 인라인 요소(inline element) 로 나누어 집니다. 이 부분을 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 " 왜 적용이 되지 않지? " 라는 상황이 발생할 수 있습니다. 예를들면.... 인라인 요소는 height 가 적용되지 않는다. 인라인 요소는 width 가 적용되지 않는다. 블록 요소는 vertical-align 이 적용되지 않는다. 블록 요소는 text-align 이 적용되지 않는다. 블록요소 (block element) 블록 요소는 모든 인라인 요소를 포함 할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태 가 되며 width , height , margin , padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블룍 요소 다음에는 줄바꿈 이 이루어 집니다. display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있습니다. div {display:inline} ▲ 모든 DIV태그를 inline요소로 변경함 HTML5의 블록요소 종류 address , article , aside , audio , blockquote , canvas , dd , div , dl , fieldset , figcaption , figure , footer , form , h1 , h2 , h3 , h4 , h5 , h6 , header , hgroup , hr , noscript , ol , output , p , pre , section , table , ul , video 인라인 요쇼 (inline element) 인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수
1 comment
Read more

Gruntfile의 주요 플러그인들

-
Image
앞선 포스팅에서 Grunt 소개와 설치방법 를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개 하고 간략한 설명을 포스팅 하겠습니다. 플러그인 Grunt.js 에서 말하는 플러그인과 Node.js 에서 말하는 패키지 는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다. 플러그인 찾기 대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴 에서 확인할 수 있습니다. 먼저 Grunt웹사이트의 플러그인 메뉴 로 이동합니다. 원하는 기능의 플러그인을 검색창을 이용하여 검색을 합니다. 검색결과의 플러그인 리스트중에 하나를 선택하여 설치방법을 확인합니다. 찾는 플러그인이 명확하지 않다면 검색결과 중 다운로드 수가 많은 것 이나 플러그인 명 앞에 별표( ★ )가 붙은 것을 선택해서 설치하세요. 별표( ★ )가 붙은 것은 Grunt팀 에서 만들었다는 의미이기 때문에 어느정도 공신력이 있다고 볼 수 있습니다. 플러그인 설치하기 검색된 플러그인의 제목을 클릭하면 상세페이지로 넘어 갑니다. Grunt의 플러그인은 Node.js 의 패키지이기때문에 NPM 페이지로 넘어 갑니다. 상세페이지를 보면 영어로 되어있긴 하지만 설치하는 방법과 옵션 설정 방법 등이 자세히 설명되어 있습니다. npm install grunt-contrib-copy --save-dev ▲ 설치는 위와 같이 NPM 을 통해 설치를 하면 됩니다. 설치를 하면 프로젝트 폴더에 node_modules 폴더가 생기고 그안에 플러그인들이 설치가 됩니다. --save-dev 설치옵션에 따라 package.json 의 devDependencies 항목에 해당 플러그인명이 기록 됩니다. 가장 뒤에 -dev 옵션은 개발 시에만 사용하는 플러그인이라는 것을 명시하는 것이고 실제서비스에 사용되는 플러그인이라면 -dev 옵션을 제거 한 --save 옵션만 적용합니다. 그러면 package.jso
1 comment
Read more

Gruntfile의 구조와 사용법

-
Gruntjs 를 사용한다고 하는것은 gruntfile.js 를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js 는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다. 개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs 를 사용할 수 있을 정도로 어렵지 않습니다. 이전 포스팅에서 Gruntjs의 소개와 설치법 을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다. gruntfile.js의 구조와 사용법 gruntfile.js 의 가장 기본적인 구조는 아래와 같습니다. 1. 프로젝트의 구성 , 2. 사용한 플러그인 로딩 , 3. 실행 명령어 의 3개의 분류로 구성되어 있으며 각각 영역별로 설명을 하도록 하겠습니다. module.exports = function(grunt) { // 1. 프로젝트의 구성 grunt.initConfig({ // package.json의 정보를 불러옴 pkg: grunt.file.readJSON('package.json'), // uglify 플러그인(패키지)의 옵션을 정의 함 uglify: { build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // 2. 사용한 플러그인 로딩(먼저 npm으로 설치를 해야 함) grunt.loadNpmTasks('grunt-contrib-uglify'); // 3. 실행 명령어 (명령창에서 grunt 명령으로 실행됨) grunt.registerTask('default', ['uglify']); }; gruntjs사이트에서 발췌 1. 프로젝트의 구성 프
Post a Comment
Read more

Grunt 소개와 설치방법

-
Image
Node js 의 탄생으로 인해 javascript 진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt 라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools 이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다. Gruntjs란 무엇인가. Grunt 또는 Gruntjs 라고 하며 인터넷을 검색하면 Task기반 빌드 툴 이라고 나옵니다. 풀어서 설명을 하면... Node js 를 기반으로 하고있는 무수한 패키지 들 중에 프로젝트에서 필요한 패키지들을 설치하고 그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 Tool 이라고 보면 됩니다. 마치 Desktop컴퓨터의 .bat 배치파일과 동일한 역활을 합니다. Gruntjs 를 사용하기 위해서는 먼저 Node js 가 설치되어 있어야 하고 프로젝트가 지정되어 있어야 합니다. Node js 가 설치되면 npm(node package manager) 도 자동으로 설치가 되는데 이 npm 으로 gruntjs 를 설치하면 됩니다. 프로젝트 지정이란 그냥 프로젝트명의 폴더 생성 이라고 보면됩니다. Grunt 설치 Node js 설치 당연한 이야기겠지만 Node js 를 먼저 설치해야 합니다. Nodejs 는 한글버전도 있기 때문에 설치가 어렵지는 않습니다. Nodejs 는 Windows , macOS , Linux 등 대부분의 OS를 지원하며 설치방법은 해당 홈페이지를 참조하셔서 설치하시면 되고 여기서는 생략하도록 하겠습니다. Windows 사용자라면 그냥 홈페이지에서 설치파일을 다운로드 받아서 설치하면 됩니다. Node js Grunt-cli 설치 Nodejs 가 설치가 되었다면 그 다음으로 grunt-cli 를 설치해야 합니다. grunt-cli 는 grunt Command Line Interface 의 약자로 명령어 창
2 comments
Read more

웹디자이너라면 꼭 알아야 할 Flexbox Layout

-
Image
웹디자인을 하면서 레이아웃을 잡는 방법에 대해서 시대별로 많은 변화가 있었습니다. Web이 나오기 시작한 초창기에는 Table 을 이용하여 화면의 레이아웃을 잡았고 웹표준 , 웹접근성 이 이슈화 되면서 시멘틱한 마크업 이 대세가 되면서 CSS의 DIV 를 이용한 방법으로 레이아웃을 잡았습니다. CSS3 로 버전업이 되면서 레이아웃 구현애 대한 방법으로 Flexbox 가 탄생하게 되었고 2017년 현재 레이아웃을 편리하게 구현하기 위해서는 Flexbox 를 사용하여 구현하는 것이 최선이라 할 수 있습니다. 그래서 웹디자이너 나 Frontend 개발자 라면 꼭 이해를 하고 넘어가야 하는 요소입니다. Flexbox의 브라우저별 지원 현황 브라우저별 Flex 지원은 현재 대부분의 브라우저가 지원하고 있다고 보면 되고 Internet Explorer 나 사파리 브라우저 같은 경우는 prefix 를 사용해서 적용해야 합니다. Internet Explorer : IE10 파이어폭스 : FF28.0 사파리 : 6.1 크롬 : 29.0 오페라 : 12.10 Flexbox의 특징 W3C 에서의 정식 명칭은 CSS Flexible Box Layout Module 이라고 정의 하고 있으며 이름처럼 레이아웃을 유연하게 구현하는 모듈이라고 보면 됩니다. 예전에 레이아웃을 구현하기 위해서는 정식 사용법이 아닌 편볍처럼 복잡하게 구현을 했어야 했던것에 반해 Flexbox 는 쉽게 레이아웃을 구현할 수 있습니다. Flexbox Flexbox 는 Container 와 Item 으로 구성됩니다. Flex의 선언은 Container 의 CSS에 display: flex 로 선언을 해 줍니다. IE10 인 경우는 flex 대신 display: flexbox 로 지정 .container { display: flex } <div class="container"> <div class="i
Post a Comment
Read more

레이아웃의 다단을 100% 로 맞추기

-
예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동으로 맞춰지는 javascript 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 .pct 클래스가 자동으로 나머지 넓이에 대해 값을 지정해 주게 됩니다. HTML 전체 div를 multiColumn으로 감싸 줍니다. 물론 class이름은 바꿀 수 있습니다. 1단, 2단, 4단은 css에서 또는 inline으로 넓이를 지정해 주면 됩니다. 여기에 작성된 샘플은 CSS 파일에서 넓이를 지정해 주었습니다. <div class='multiColumn'> <div>1단</div> <div>2단</div> <div class='pct'>3단</div> <div>4단</div> </div> JAVASCRIPT jquery를 활요해서 HTML문서가 처음 로딩될때와 브라우저 창의 크기를 변경할떄 체크를 해서 .pct의 넓으를 재지정해 줍니다. $(function () { contentLayAutoWidth(); }); $(window).resize(function () { contentLayAutoWidth(); }); /* 레이아웃의 다단 단수를 100%로 채움 */ function content
Post a Comment
Read more

VisualStudio Code 에디터의 설치와 유용한 확장프로그램(플러그인)

-
Image
SublimeText나 Atom에디터등 텍스트기반 에디터가 유행을 하자 MS에서도 Visual Studio를 기반으로 한 텍스트에디터를 출시하였고 다른 에디터들과 마찬가지로 무료로 서비스를 제공하고 있습니다. 저는 Notepadd++, SublimeText, Atom, Brackets, VisualStudioCode 에디터등을 두루두루 써보다가 VisualStudioCode 에 정착을 했습니다. 원래는 Notepadd++를 요긴하게 잘 사용해 왔으나 플러그인 등이 부족하고 현재의 유행하는 편리한 기능의 에디터와는 다르기 때문에 좀더 편리한 에디터를 찾고자 했습니다. 그래서 여러가지 에디터들을 사용해 봤는데 SublimeText는 여러가지면에서 뛰어난 에디터이나 무료로 사용하려면 돈내라는 팝업을 견뎌내야하고 Atom, Brackets등은 아무래도 최적화에서 아직은 부족한지 코딩을 하다보면 가끔씩 딜레이 현상이 존재하여 짜증을 유발시킵니다. 그에 반해 Visual Studio Code 는 딜레이도 심하지 않고 플러그인도 다양하고 업데이트도 자주 하는 등 제가 쓰기에 가장 적당한것 같아 VisualStudioCode 에 일단 정착을 했습니다. 설치하기 VisualStudioCode 줄여서 보통 VSCode 라고 하며 Windows, MacOS, Linux를 지원합니다. Windows의 경우는 늘상 설치하는 것처럼 설치파일을 클릭하여 진행하면 됩니다. 홈페이지 : code.visualstudio 라이선스 : MIT 주요 단축키 Ctrl + Shift + P 또는 F1 : 모든 명령 찾기 및 실행 Ctrl + : 콘솔창 호출 단축키 다운로드(PDF) : keyboard-shortcuts-windows.pdf 주요 확장프로그램(플러그인) Settings Sync Settings Sync 는 여러 장소에서 같은 환경의 VS Code 를 사용할 수 있게 해주는 확장프로그램입니다. 집에 있는 컴퓨터에 설치한 확장프로
Post a Comment
Read more

크롬에서 input, textarea, button에 생기는 파란색 테두리 없애는 방법

-
웹디자인을 하다보면 input 이나 textarea 등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input 이나 textarea 에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline 은 border 와 흡사한 방식으로 css 로 핸들링을 할 수 있습니다. 그래서 그냥 focus 되는 영역의 outline 의 두께를 0 으로 만들면 됩니다. 주로 input 이나 textarea , button 요소에 생기기 때문에 해당 요소의 focus 를 0 으로 처리하면 됩니다. textarea:focus { outline: none; } button:focus { outline: none; } input:focus { outline: none; } 유의 사항 outline 요소는 border 요소와 흡사한데... border 의 경우 두께에 따라 넓이나 높이에 영향을 미치는 반면 outline 는 두께에 상관없이 넓이나 높이에 영향을 미치지 않습니다. 예를들어 전체 1280px 의 넓이 중.. sidebar 영역 의 넒이가 280px 본문영역 의 넓이가 1000px 테두리(border) 의 두께가 1px 이라면.. 전체 넓이 1280px 에 테두리 두께를 더해서 총 넓이는 1284px 가 됩니다. 하지만 outline 으로 테두리를 표시한다면 그냥 1280px 이 됩니다. outline 은 그냥 레이아웃 위에 레이어 로 위치한다고 보면 됩니다. 그렇다고 레이아웃 계산이 쉽다고 outline 을 border 대신 사용하지는 않습니다. outline 은 그냥 참고로 볼 때만 주로 사용되기 때문입
Post a Comment
Read more

스크롤에 따라 배경이미지의 시차가 다르게 움직이는 Parallax_ImageScroll

-
홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 Parallax(시차)라는 이름으로 많이 사용되고 있는데.. jQuery의 플러그인으로 구현된 것이 있어 소개합니다. 홈페이지 : https://github.com/pederan/Parallax-ImageScroll DEMO : http://codepen.io/pederan/full/Hheuy 라이선스 : MIT Install bower로 설치할 경우 bower install Parallax-ImageScroll npm으로 설치할 경우 npm install parallax-imagescroll 일반 사용법 HTML <div class="img-holder" data-image="anImage.jpg"></div> <section><p>Content that "slides" on top of the images</p></section> <div class="img-holder" data-image="anotherImage.jpg">[optional content to be displayed on top of the images]</div> javascript jQuery와 jquery.imageScroll.js를 먼저 임포트한 후 설정값을 지정해 줍니다. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> <script>
Post a Comment
Read more

주요 오픈소스 라이선스에 대한 핵심 설명

-
지금은 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 Module 파생저작물 파생저작물 파생저작물 파생저작물 5 동일 라이선스로만 배포 O O O O O O 6 수정시 수정내용 고지 O O O O O O O 7 명시적 특허 라이선스의 허용 O O O O O 8 특허소송 제기　시 라이선스 종료 O O O O O 수정, 배포의 권한허용 : 거의 대부분의 오픈소스 라이선스는 수정과 배포를 허락합니다. 배포　시 라이선스 사본 첨부 : 배포 시 꼭 원작자의 라이선스 사본을 첨부해야 합니다. 저작권 고지사항 또는 Attribution 고지사항 유지 : 코드의 상단에 삽입되어 있는 원작자의 저작권고지사항을 지우면 않되고 그대로 유지를 해야 합니다. ★ 배포시 소스코드 제공의무와 범위 : 해당 오픈소스를 사용하여 개발할 경우 개발된 소스코드도 사용자에게 제공해야할 의무가 있읍니다. 그러므로 기업체에서 사용시 많은 주의가 필요한 항목입니다. 동일
Post a Comment
Read more

반응형웹에 대한 미디어쿼리의 사용

-
처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고... 삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다. 그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다. mydevice screensiz.es 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport 를 설정해 줘야 합니다. meta viewport 의 width 를 device-width 로 지정하고 initial-scale 을 1 로 설정을 해 줘야 합니다. width=device-width : 화면의 넓이를 디바이스(단말기)의 넓이로 지정 initial-scale=1 : 기본 사이즈를 1로 지정하겠다고 선언 <meta name="viewport" content="width=device-width, initial-scale=1"> 이렇게 설정하면 다양한 크기의 화면에서도 보기에 편한 텍스트 크기와 레이아웃을 유지해 줍니다. 미디어쿼리 지정 기본설정을 했으면 이번에 다양한 크기(해상도)의 디바이스에 따라 CSS 가 다르게 적용될 수 있게 미디어쿼리(Media Query)를 지정해야 합니다. Breakpoints는 부트스트랩(Bootstrap)을 참조하였으며 그에 해당하는 미디어쿼리는 아래와 같이 가로 해상도에 따라 5가지로 구분할 수 있습니다. 반응형 웹개발에 있어서 고려해야 할 점이 있는데 모바일 퍼스트 로 개발을 할 것이냐 하는 것입니다. 모바일 퍼스트 개발은 화면 구현 시 먼저 모바일 화면을 기준으로 디자인(CSS)을 하고 차츰 태블릿 화면, 데스트탑 화면으로 디자인을 구현하는 것을 말합니다. 반응형 웹개발 시 근래의 추세는 모바일 퍼스트 로 개발하는 추세이긴 합니다만 상황에 따라서
Post a Comment
Read more

CSS에서 ellipsis('...')를 처리하는 방법

-
Image
이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '...'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함 text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함 white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능) 멀티라인 글자수 제한 멀티라인에 대해서 글자수를 제한하는 방법은 아래와 같습니다. <p class="txt_post">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다.&nbsp; 비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다. 이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p> .txt_post { overflow: hidden; text-ove
5 comments
Read more

웹프로그램 개발 시 필요한 샘플 이미지를 무료로 제공해 주는 사이트

-
Image
웹사이트를 개발하다 보면 이미지 영역을 잡는 경우가 있습니다. s 이때 사용할 수 있는 무의미한 더미 이미지를 무료로 제공해 주는 사이트가 있어 포스팅합니다. 더미 이미지를 제공해 주는 사이트도 있고 이미지의 글자정보만 제공해 주는 사이트도 있습니다. 더미 이미지 제공 placeimg.com placeimg 는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 사용법은 매우 간단합니다. 웹사이트 : placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. <img src="https://placeimg.com/가로크기/세로크기0/카테고리" /> 디폴트 카테고리는 any 이고 카테고리 구분없이 모든 이미지에서 랜덤으로 뿌려줍니다. 아래의 카테고리와 필터 지정에 따라서 해당 이미지를 랜덤하게 뿌려줍니다. 카테고리종류 : animals, arch, nature, people, tech 필터 종류 : grayscale, sepia <img src="https://placeimg.com/200/100/any" /> <img src="https://placeimg.com/200/100/any/grayscale" /> <img src="https://placeimg.com/200/100/animals/sepia" /> 텍스트 이미지영역 제공 Placehold.it Placehold.it 은 매우 간단하게 이미지영역을 잡아주고 글자를 보여줍니다. 웹사이트 : Placehold.it 기본 사용법은 아래와 같습니다. <img src="http://placehold.it/320x100" /> <img src="http://place
Post a Comment
Read more