웹디자이너에게 유용한 UI/UX, CSS, 컬러, 폰트 사이트 모음집을 소개합니다.

요즘 많이 언급되고 있는 디자인 오픈소스 및 포트폴리오 웹사이트 외에, 씸플의 디자이너 분들의 추천 사이트를 선별하여 공유하겠습니다. 각 타이틀을 클릭하면 해당 링크로 이동합니다.


1

UI/UX

UX Magazine

사용자 경험과 관련된 최신 뉴스와 기사를 받아볼 수 있는 사이트

UX관련 컨퍼런스 정보와 전세계의 UX디자이너 구인구직 현황도 살펴볼 수 있어 해외 취업 트렌드도 파악할 수 있습니다. 모든 글이 영어기 때문에 어려운 부분도 있지만, 최신 트렌드를 읽는 웹디자이너라면 일상이 되어야 할 것 같습니다 :)


Troy Labs

다양한 디바이스 템플릿에서 반응형 웹을 확인 할 수 있는 사이트

삼성, 애플, LG, 구글, 팬택, HTC, 소니 등 초기 모델부터 최신 기종까지 구성되어 매우 편리합니다. 기종을 선택하고 웹사이트 링크만 붙여 넣으면 각 디바이스에서 어떻게 구현되는지 확인할 수 있습니다.


Capptivate

UI애니메이션 패턴 라이브러리 사이트

이제 UI 애니메이션은 앱이나 웹을 구현할 때 배제할 수 없는 중요한 부분이 되었고, 이를 구현할 때에도 공간감이나 가독성을 최대한 고려하는 등에 대한 고민이 필요한 시점이 도래했습니다. Capptivate는 인포그래픽, 인터랙션, 네비게이션, 로딩 페이지 등 카테고리를 나누어 애니메이션 패턴을 확인할 수 있어서 편리합니다.



2

CSS/jQuery


Codrops

다양한 웹디자인 튜토리얼, 레이아웃 모음, jQuery 플러그인을 제공하는 웹사이트

데모뷰로 기능을 확인할 수 있으며, 소스 다운로드를 포함해 수많은 자료를 담고 있어 웹 디자인 및 개발과 프로그래밍에 유용합니다. 라이센스 또한 상업용 등에 제한을 두지 않고 있지만, 재배포시 제한이 있을 수 있습니다.



Awwwards

우수 웹사이트 소개 및 수상작 모음 웹사이트

CSS 기술에 특화된 웹사이트들이 많고, 링크를 타고 이동해 실제 페이지를 살펴볼 수도 있으며 각 부문별 점수를 직접 매길 수도 있습니다. 독특한 시도와 실험적인 인터랙션 웹사이트도 적지 않으니 구경하는 재미가 쏠쏠합니다.



Media Queries

미디어 쿼리를 이용한 사이트 갤러리

모바일, 태블릿, 데스크탑 사이즈의 템플릿을 한눈에 볼 수 있도록 구성되어 있고, 무료로도 받을 수 있습니다. 전부 무료인 것은 아니니, 참고하시길 바랍니다.



SpinKit

스플래시 모음 사이트

8가지의 로딩 애니메이션 효과와 직접 적용할 수 있는 CSS소스도 편리하게 제공하고 있습니다. 종류가 많지 않은 점이 아쉽지만 버튼 및 효과를 최소화한 미니멀리즘을 추구해 굉장히 깔끔한 인상을 주고 있습니다.


스플래시(Splash)와 사용자 경험의 접목


스플래시는 프로그램 시작 시 타이틀 화면이나 로딩 창을 보여줌으로써 사용자에게 어떤 프로그램이 구동 중이고 어떤 상태인지 알려 주는 중요한 역할을 하고 있습니다. 
종종 제품이나 디자인을 접할 때면, 아주 사소한 것들이 제품과 디자인의 완성도를 결정하는 일들에 놀라곤 합니다. 스플래시 화면의 기다림을 놀랍고 재미있는 경험으로 바꾸는 것만으로도 사용자에게 훨씬 좋은 경험을 줄 수 있을 것입니다.

출처 — http://uxd-trend.tistory.com/17

3

디자인 템플릿


DBF

디자인 포트폴리오 자료 모음집

Dribbble과 Behance의 디자인 자료 소스를 한곳에 모아 두어 양쪽 사이트를 가지 않아도 편리하게 디자인 템플릿들을 검색할 수 있는 사이트입니다. 각 이미지별로 여백 없이 시원시원하게 구성되어 있어 한눈에 알아보기 편리합니다.



365PSD

무료 디자인 템플릿 다운로드 사이트

다양한 웹·모바일 GUI, 아이콘 등의 PSD파일을 무료로 다운받을 수 있는 웹사이트로 유명하며, ios 8을 포함한 최신 디자인 트렌드를 반영한 자료도 마음껏 찾아보고 다운받아 이용할 수 있습니다.



One Page Love

원 페이지 웹디자인 템플릿 사이트

2015 웹디자인 트렌드에서 언급했던 것처럼, 내년에도 대세가 될 원 페이지 디자인만을 모아 둔 사이트입니다. 카드형 디자인을 통해 보기 쉽도록 구성해 두었고, 각 디자인 템플릿의 퀄리티가 좋은 편이라 디자인적 영감을 찾는 데 좋은 사이트입니다.


4

그 외, 유용한 사이트


Degraeve

이미지에서 즉시 컬러를 추출해 팔레트를 생성

이미지나 사진에 있는 컬러를 사용하고 싶으나 잡색이나 노이즈 때문에 추출이 어려웠다면, 이제는 이미지만 첨부하면 자동으로 색상이 추출됩니다! 10가지 색을 파일 첨부와 URL 링크 두 가지 방법으로 이용할 수 있습니다.



Granneman

OS별 기본 서체 리스트업 사이트

윈도우, 맥 OS, 리눅스, 안드로이드, ios 등의 기본 서체들이 리스트업되어 있어 편하게 확인해 볼 수 있고, 오퍼레이팅 시스템과 각 OS별 폰트 사이즈 등 상세한 내용 또한 읽을 수 있습니다.



jpegmini

화질변화 없이 jpg파일의 용량을 줄여 주는 사이트입니다.

이미지 최적화(image optimization)가 웹사이트의 로딩시간을 좌우하지만, 고화질 이미지를 사용하자니 로딩 시간이 너무 길고, 용량이 작은 이미지를 쓰자니 화질이 많이 떨어지는 단점이 존재했습니다. 이를 보완해 주는 jpegmini는 화질변화가 거의 없이 용량을 최소 절반 이하로 줄여 주어 매우 편리합니다.

웹용은 무료이지만, 설치용은 구입 후 사용이 가능하니 참고하시길 바랍니다.



씸플 홈페이지 / 페이스북 / 트위터

웹디자이너를 위한 참고 사이트 정리
1. UI/UX


  • UX Magazine — 사용자 경험과 관련된 최신 뉴스와 기사를 받아볼 수 있는 곳
  • Troy Labs — 다양한 디바이스 템플릿에서 반응형 웹을 확인 할 수 있는 곳
  • Capptivate — UI애니메이션 패턴 라이브러리

2. CSS/jQuery


  • Codrops — 다양한 웹디자인 튜토리얼, 레이아웃 모음, jQuery 플러그인을 제공하는 웹
  • Awwwards — 우수 웹사이트 소개 및 수상작 모음집
  • Media Queries — 미디어 쿼리를 이용한 사이트 갤러리
  • SpinKit — 스플래시/로딩 애니메이션 모음집

3. 디자인 템플릿
  • DBF — 디자인 포트폴리오 자료 모음집
  • 365PSD — 무료 디자인 템플릿 다운로드 사이트
  • One Page Love — 원 페이지 웹디자인 템플릿 사이트

4. 그 외, 유용한 사이트


  • Degraeve — 이미지에서 즉시 컬러를 추출해 팔레트 생성
  • Granneman — OS별 기본 서체 리스트업 사이트
  • jpegmini — 화질변화 없이 jpg파일의 용량을 줄여 주는 사이트





출처 : https://cimple.postype.com/post/812/

Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거

http://app.fontastic.me/


아이콘 폰트 쉽게 만드는곳 가입도 완전 쉬움 




Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거

우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다.

웹은 항상 성장하고 있고, 새로운 해결법 역시 계속 성장하고 있습니다. 그러므로, 웹 디자이너와 프론트 엔드 개발자로서 우리의 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다.

우리의 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다.

오늘, 저는 이전엔 알지 못했던 몇 가지의 CSS 방법을 알려드리려고 합니다. 몇몇 수치 단위들은 픽셀이나 em과 비슷하지만 당신은 아마 단 한 번도 들어본 적 없을겁니다. 시작해볼까요.

어쩌면 당신에게 조금 익숙할 수 있는 단위로 시작해보죠. em은 현재의 font-size를 정의합니다. 일례로, body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다.

여기, div에 font-size를 1.2em으로 지정했습니다. 이 예제에서는 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 됩니다. 결과적으로 16.8px의 크기가 됩니다.

그런데 여기 em으로 정의한 폰트 사이즈를 각각의 자식에 선언하면 어떤 일이 생길까요? 같은 CSS를 적용한 동일한 코드를 추가해보았습니다. 각각의 div는 각 부모의 폰트 사이즈를 상속받아 점점 커지게 됩니다.

이것은 어떤 경우엔 바람직하겠지만 대부분의 경우, 단순하게 단일 사이즈로 표현하기도 하지요. 이런 경우 바로 rem 단위를 사용하면 됩니다. rem의 "r"은 바로 "root(최상위)"를 뜻합니다. 최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html태그입니다.

이전 예제에서 만든 복잡한 단계의 세 div는 모두 16.8px의 폰트 사이즈로 표현되었습니다.

rem은 폰트에서만 사용하진 않습니다. 예를 들어, 그리드 시스템이나 rem을 이용한 기본 폰트 사이즈 기반으로 만든 UI 스타일, 그리고 em을 이용해 특정 위치에 특별한 사이즈를 지정할 수도 있습니다. 보다 정확한 폰트 사이즈나 크기 조정을 가능하게 해줄 겁니다.

개념적으로 보면, 이 아이디어는 여러분의 콘텐츠 사이즈를 조절 할 수 있는 인터페이스 전략과 유사합니다. 그러나 모든 경우에 반드시 이런 방법을 따를 필요는 없습니다.

rem (root em) 단위의 호환성은 caniuse.com에서 확인할 수 있습니다.

반응형 웹디자인 기술은 퍼센트 값에 상당히 의존하고 있습니다. 하지만 CSS의 퍼센트 값이 모든 문제를 해결할 좋은 방법은 아니지요. CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받습니다. 만약 너비값과 높이값을 부모 요소의 너비값의 뷰포트에 맞게 사용할 수 있다면 어떨까요? 바로 vh와 vw 단위가 그런 의도에 맞는 단위라는 사실.

vh 요소는 높이값의 100분의 1의 단위입니다. 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 750px이면1vw는 7.5px이 됩니다.

이 규칙에는 무궁무진한 사용방법이 있습니다. 예를 들면, 최대 높이값이나 그의 유사한 높이값의 슬라이드를 제작할때 아주 간단한 CSS만 입력하면 됩니다.

스크린의 너비값에 꽉 차는 헤드라인을 만든다고 상상해보세요. vw로 폰트 사이즈를 지정하면 쉽게 달성할 수 있습니다. 저 사이즈는 브라우저의 너비에 맞춰 변할 것입니다.

뷰포트 vw, vh 단위의 호환성은 caniuse.com에서 확인할 수 있습니다.

vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vminvmax는 너비값과 높이값에따라 최대최소값을 지정할 수 있습니다. 예를 들면 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 됩니다. 너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.

어때요, 이 값들을 사용할 수 있나요?

언제나 스크린에 보여지는 요소를 만든다고 상상해보세요. 높이값과 너비값을 vmin을 사용해 100으로 지정합니다. 예를 들어 터치화면 양 변에 가득차는 정사각형 요소를 만들때는 이렇게 정의하면 됩니다.

만약 커버처럼 뷰포트 화면에 보여야 하는(모든 네 변이 스크린에 꽉 차 있는) 경우에는 같은 값을 vmax로 적용하면 됩니다.

알려드린 이 규칙들을 잘 조합해 활용하면 뷰포트에 맞는 매우 유연한 방식으로 사이즈 조절을 가능하게 할 수 있습니다.

뷰포트 단위: vmin, vmax의 호환성은 caniuse.com에서 확인할 수 있습니다.

ex와 ch 단위는 현태 폰트와 폰트 사이즈에 의존한다는 점에서 em 그리고 rem과 비슷합니다. em과 rem과 다른 점은 이 두 단위가 font-family에 의존한다면 다른 두 단위는 폰트의 특정 수치에 기반한다는 점입니다.

ch 단위, 또는 글꼴 단위는 제로 문자인 0의 너비값의 "고급 척도"로 정의됩니다. 흥미로운 의견은 에릭 마이어의 블로그에서 확인할 수 있습니다. 그러나 기본 컨셉은 monospace 폰트의 N 의 너비값을 부여 받았다는 것이며, width: 40ch;는 40개의 문자열을 포함하고 있다는 뜻입니다. 이 특정 규칙은 점자 레이아웃에 기반하고 있지만, 이 기술의 가능성은 간단한 어플리케이션 그 이상으로 확장할 수 있습니다.

ex 단위의 정의는 "현재 폰트의 x-높이값 또는 em의 절반 값"이라고 할 수 있습니다.x-높이값은 소문자 x의 높이값이기도 합니다. 폰트의 중간 지점을 알아내기 위해 자주 사용하는 방법입니다.

x-높이값; 소문자 x의 높이값 (자세한 것은 웹 타이포그래피의 해부학 링크를 참조하세요)

이 단위는 타이포그래픽에서 세밀한 조정을 할 때 많이 사용합니다. 예를 들어, 위첨자 태그인  sup 에게 position을 relative로 하고 bottom 값을 1ex라고 하면 위로 올릴 수 있습니다. 아래첨자 역시 비슷한 방법으로 아래로 내릴 수 있습니다. 브라우저는 위첨자와 아래첨자의 기본값을 vertical-align으로 정의하고 있지만, 보다 정교한 사용법을 알고 싶다면 아래와 같이 작성할 수 있습니다.

ex는 CSS1부터 있던 단위였고, ch 단위는 아직 찾을 수 없습니다. 에릭 마이어의 블로그에 있는 CSS 단위와 값에서 보다 많은 상세 정보를 볼 수 있습니다.

여러분의 막강한 CSS 도구들의 무한한 확장과 지속되는 개발환경에 계속 눈을 뜨고 지켜보세요 아마 특정 문제를 해결하기 위해 예상치 못한 해결방법으로 이 애매한 특정 단위들을 사용할 수도 있을 것입니다. 새로운 스펙들을 시간을 들여 읽어보세요. cssweekly와 같은 좋은 사이트에도 가입해서 지속적인 뉴스를 업데이트 받아보세요. 그리고 주간 업데이트에 가입하는 거 잊지 마세요. 무료 튜토리얼과 Tuts+의 웹디자인에서 나오는 다양한 자료들을 만날 수 있습니다.


출처 : http://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573


Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거

1 ~ n까지 합을 구하는 원리

관련글: 1부터 n까지의 합 구하기

전에 1 ~ n 까지 합 구하기 문제에 관해서 글을 올렸지만, 내용을 좀 더 보충하고자 합니다.

그럼 1에서 n까지의 합을 구하는 문제에 대해서 처음부터 다시 생각해 보겠습니다.

이 문제 자체의 정의를 그대로 프로그램으로 표현한다고 하면, 1에서 n까지의 수를 카운트해서 전부 더하면 됩니다. 일단 문제의 정의에 가장 충실하면서도, 구현도 비교적 간단합니다.

그러나, n이 10, 100, 1000, 10000 정도까지라면 이 알고리즘에 별다른 문제는 발생하지 않지만, 만일 n이 10억, 100억 단위로 커지게 되면 문제가 발생합니다.

반복적 제어구조를 이용하기 때문에, 그만큼의 숫자를 카운트하려다 보면 알고리즘의 수행성능이 대단히 느려집니다. 그러면, 주어진 문제에 대한 해법을 다른 방식으로 찾아볼 필요가 있습니다.


자, 우선 n = 5 라고 가정하고, 1부터 5까지의 합을 계산해 봅시다.


    1 + 2 + 3 + 4 + 5 = ?


잠깐... 이걸 한번 그래픽으로 표현해 볼까요?
인간의 뇌는 뭔가를 그림으로 표현할때 이해가 잘 되는 법입니다.


   ○
   ○○
   ○○○
   ○○○○
   ○○○○○


앗, 삼각형이 되는군요!

그렇다면, 1 ~ 5의 합계는 결국 삼각형의 넓이라는 것으로도 표현될 수 있을 겁니다.

바로 계산해 봅시다.


   삼각형의 넓이 = 밑변 x 높이 / 2

   → 5 x 5 / 2 = 12.5 (??)


어.. 뭔가 답이 이상하죠? 그야 당연한 결과입니다. 삼각형의 넓이는 사각형의 넓이의 절반이라는 개념에서 나온것입니다. 그러니까, 우선 삼각형을 사각형으로 변환하지 않으면 안됩니다. 그래서 밑변 x 높이를 해주는 것이죠.

그런데, 5 x 5를 하게되면...

   ○○○○○
   ○○
○○○
   ○○○
○○
   ○○○○

   ○○○○○


이런 사각형이 되는 겁니다. 구하고자 하는 삼각형의 2배 넓이를 가지는 사각형을 만들어야 하기 때문에, 제대로 하자면 이렇게 되어야 합니다.

   int sum = 0;

   ○○○○○○
   ○○
○○○○
   ○○○
○○○
   ○○○○
○○
   ○○○○○


자, 그럼 계산해 보죠.


   5 x (5 + 1) / 2 = 15


자, 그럼 이 공식을 일반화 해볼까요?
5라는 숫자 대신, n으로 바꿔주면 됩니다.


   n x (n + 1) / 2


자, 그러면 1 ~ n까지의 합이란 문제에 대해서... 위의 공식만 대입하면 끝나는 겁니다. n이 아무리 큰 숫자가 들어와도 단 한줄의 수식만 처리하면 됩니다. 알고리즘의 속도는 비교할 것이 못됩니다.

제가 여기서 강조하는 싶은 건, 공식이 아니라, 수학적인 사고 방법입니다. 수학은 복잡해 보이는 것을 단순하게 만들어 놓고 계산하는 것입니다. 이것이 바로 '추상화'의 과정입니다. 수학은 이런 추상화의 과정 위에서 비로소 계산을 시작하는 겁니다. 그래서 수학은 숫자의 학문이 아니라, 생각의 학문이라고 합니다.

그리고 또 한가지 말하고 싶은 것은, 문제를 해결하는 관점을 여러 각도에서 생각해 보자는 겁니다. 문제를 풀어나가는 방법은 여러가지가 있을 수 있습니다. 위에서 예를 든 경우도, 반복을 통한 누적계산으로 풀어나가는 방법과, 수식으로 계산하는 방법이 있습니다.


둘다 장단점은 있습니다.


누적계산은 문제의 정의를 가장 충실하게 구현한 것이고, 따라서 더 이해하기도 쉽습니다. 하지만 n이 무한히 커지면 수행속도가 현저히 떨어지는 문제가 있습니다. 반면 수식을 통한 방법은 성능에 있어서는 탁월하지만, 저 공식이 어떤 원리로 나왔는지 모를경우에는 저게 뭐하는 것인지 잘 이해가 안될겁니다. (주석이 안달려 있다면 말이죠)

제가 전에 올렸던 피보나치 수열 구하는 방법도 역시, 문제의 정의에 따라서 충실히 구현한 방법과, 황금분할비를 이용해서 곱셉으로 처리하는 방법이 있었습니다. 세상에 한가지 약으로 만병을 치료할 수 없듯이, 어떤 문제에 대해서도 하나의 알고리즘이 만능으로 적용되지는 않는다고 봅니다. 그때 그때 상황에 따라서 방법을 바꿀 필요도 있는 것입니다.

문제를 바라보는 관점에 따라서 얼마든지 방법은 달라질 수 있습니다.

마지막으로, 한가지 문제를 내보겠습니다.
심심하신 분들은 한번 도전(?)해 보시죠...(^^)


[문제]


위에서 1 ~ n까지의 합을 구하는 공식을 만들었습니다. 그러면 1부터가 아니라, a ~ b까지의 합을 구하는 것은 어떻게해야 할까요? 그리고 1씩 증가하는 수열이 아니라 2나 3 등으로 증가하는 수열에 대해서 공통으로 적용될 수 있는 방법은 무엇일까요?


이에 대한 저의 답안은 아래에 있습니다.




우선 a ~ b까지의 합입니다. 간단히 예제로 나가죠.
 
2 ~ 5 까지의 합을 계산해 보겠습니다.
 
   ○○
   ○○○
   ○○○○
   ○○○○○
 
이번엔 사다리꼴 모양이 됩니다.
그럼 이번에도 역시...
 
   ○○○○○○○
   ○○○○○○○
   ○○○○○○○
   ○○○○○○○
 
자, 그럼 여기서 저 사다리꼴의 면적을 구하려면?
 
밑변의 길이: 2 + 5
높이: 4
 
   (2 + 5) * 4 / 2 = 14
 
자, 그럼 이걸 일반화 해보죠.
 
   2 -> a
   5 -> b
 
음.. 그럼 높이 4는 뭘로?
 
여기서 높이는 수열에서의 원소 갯수로 표현할 수 있습니다. 즉 2 3 4 5 로 된 수열이니까, 4개의 숫자가 있는 건데... 여기서 수열의 길이는 구하는 것은 아주 쉽습니다.
 
   "수열의 마지막 값 - 첫번째 값 + 1"
 
마지막에 +1을 해주는 이유는, b - a만 해버리면, a 자신은 카운트에 포함되어 있지 않게 되기 때문입니다.
 
자, 그럼 이제 일반화 해보죠.
 
   (a + b) * (b - a + 1) / 2
 
이걸 풀이하면, (첫번째 원소 + 마지막 원소) x 원소의 갯수 / 2 가 되는 겁니다.
 
그러면....
 
1씩이 아닌, 임의의 수로 증가하는 등차수열의 경우도 이 식의 틀에서벗어나지 않습니다.
2씩 증가하는 수열로 예를 들어 보죠.
 
   2 4 6 8 10 12
 
   ○○
   ○○○○
   ○○○○○○
   ○○○○○○○○
   ○○○○○○○○○○
   ○○○○○○○○○○○○
 
이것 역시 2배를 해보면....
 
   ○○○○○○○○○○○○○○
   ○○○○○○○○○○○○○○
   ○○○○○○○○○○○○○○
   ○○○○○○○○○○○○○○
   ○○○○○○○○○○○○○○
   ○○○○○○○○○○○○○○
 
이런 모양이 되는데, 그래봐야 결국은...
 
   (첫번째 원소 + 마지막 원소) x 원소갯수 / 2
 
...인 겁니다.
 
즉, 원소갯수만 구할 수 있다면, 몇개씩 증가하든지 상관없다는 것이지요.
 
그럼 이때의 원소 갯수는 어떻게 구할까요.
 
시작값을 a, 증가분을 c라고 할때, a의 n번째 원소를 구하는 식은 이렇게 됩니다.
 
   A(n) = a + c x n
 
그러면, 마지막 원소값 b가 a로부터 몇번(n)째에 위치한 것인지를 알면, 전체 원소의 갯수를 구할 수 있습니다.
 
저 식으로부터 n을 계산해 내면...
 
   b = a + c x n
   → (b - a) / c = n
 
단 여기에는 시작값 a는 카운트에 포함되어 있지 않으므로, + 1을 시켜줘야 합니다.
그래서, 등차수열에서 전체 원소의 갯수는... → (b - a) / c + 1
그래서 최종적으로 나온 식은...
 
   (첫번째 원소 + 마지막 원소) x 원소갯수 / 2 
   → (a + b) x ((b - a) / c + 1) / 2
 
   a: 시작값
   b: 종료값
   c: 증가분
 
가 됩니다.

이것을 스몰토크에서 표현하면...

-----------------------------------------------
Interval>>sum

     ^(self first + self last) * self size / 2
-----------------------------------------------



출처 : http://sizuha-textcube.blogspot.kr/2006/04/1-n%EA%B9%8C%EC%A7%80-%ED%95%A9%EC%9D%84-%EA%B5%AC%ED%95%98%EB%8A%94-%EC%9B%90%EB%A6%AC.html


'프로그래밍 > 알고리즘' 카테고리의 다른 글

[알고리즘] 1 ~ n까지 합을 구하는 원리  (0) 2016.01.05
Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거

 

 

 

 

 

출처 : http://circlash.tistory.com/610

Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거

[ CSS ] flexbox

HTML관련/CSS 2015.12.18 11:10

 

 

 

 

 

출처 : http://ko.learnlayout.com/flexbox.html

 

Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거

오픈소스 라이선스

https://www.olis.or.kr




제 생각을 [Comment]로 추가


번역에 대한 법적 책임 면제에 대한 공지:

다음 Apache License Version 2.0 번역본은 제 개인적인 목적에 의해 번역된 것을 밝힙니다. 이 번역본에 의해 아파치 라이선스의 정확한 법적 조건을 판단하는 것은 그 정확성을 보증할 수 없음을 밝히며, 임의로 사용 후에 발생하는 손해에 대해 저는 책임질 수 없음을 밝힙니다. 정확한 법적 조건을 알기 위해서는 링크를 통해 접근할 수 있는 원문을 참고하시기 바랍니다.

===========================================================================================================


아파치 라이선스
Apache License
2.0판, 2004년 2월
Version 2.0, January 2004
http://www.apache.org/licenses/

사용, 재생산, 배포를 위한 조항 및 조건
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

1. 정의
1. Definitions
.

"라이선스"란 이 문서의 1절부터 9절에 제시되어 있는 사용, 재생산, 배포를 위한 조항 및 조건을 뜻한다.
"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.

"라이선스 허가자"란 라이선스를 허가하는 저작권자 본인 또는 저작권자에 의해 지명된 사람[entity 를 모두 사람이라고 번역했습니다]을 뜻한다.
"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.

"법인"이란 실제 행동하는 사람과 그 사람을 조정하거나 그 사람에 의해 조정당하는 모든 사람들, 그 사람과 공통의 조정하에 있는 모든 사람들의 연합체[회사나 비영리 법인 같은 걸 뜻하는 거겠죠?]를 뜻한다. 여기서 "조정"이란 (i) 직간접적으로 그 사람의 행동 방향을 결정하거나 관리를 하는 권력을 뜻하거나, (ii) 발행주식 중 50% 이상을 소유하고 있거나, (iii) 그 실체로부터 수익을 얻는 소유권이 있음을 뜻한다.
"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.

"라이선스 사용자"란 이 라이선스에 의해 허가된 조항들을 실제 실행하는 개인 또는 법인을 뜻한다.
"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.

"소스" 형태란 소프트웨어 소스 코드, 문서 소스, 구성 파일 등과 같이 수정에 편리한 형태를 뜻한다. 그렇지만 이 세가지 형태로 국한되지는 않는다[including but not limited 를 이렇게 번역했습니다].
"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.

"목적물" 형태란 소스 형태를 기계적으로 변환하거나 번역하여 얻은 임의의 결과물을 뜻한다. 예로는 컴파일된 목적 코드, 생성된 문서, 여타 미디어 타입으로 변환된 형태 등이 있으며 이 세가지 형태로 국한되지는 않는다.
"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.

"창작물"이란 이 라이선스 조건 하에 소스 형태 또는 목적물 형태로 가용하게 된 원작자의 작업물을 뜻한다. 이 라이선스를 아래 첨부에 있는 예에서와 같이 창작물에 포함시키거나 부착하여 라이선스 적용 여부를 표시한다.
"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).

"파생 창작물"이란 소스 형태 또는 목적물 형태로 창작물에 기반하여 편집상 개정하거나, 주석을 추가하거나, 상세화하거나, 기타 전체적으로 볼 때 원저작자의 창작물임을 알 수 있을 정도로 수정한 저작물을 뜻한다[파생 창작물의 범위가 어떤 것인지는 Open Source License 에서 상당히 중요한 개념이죠. 아파치 라이선스에서는 편집상 개정, 주석 추가, 상세화, 원창작물을 식별할 수 있을 정도로 수정된 결과 등이 해당되네요. modification 을 법적 용어로는 개작이라고 표현하던데, 저는 그냥 수정이라고 번역했습니다. 대문자 Work 와 소문자 work를 구분해서 Work 는 창작물 work 는 저작물이라고 번역했습니다. 여기서 Work는 1.정의에서 언급한 창작물을 뜻하기 때문입니다]. 여기서 파생 창작물이란 창작물과 것의 모든 파생 창작물과는 분리된 형태로 존재하는 저작물[독립된 프로세스로 존재하며 창작물의 서비스를 이용하는 경우를 뜻하는 것 같습니다. Affero GPL 인가 하는 것은 이런 경우도 GPL로 공개해야 한다고 하더군요. 아직 확인은 안 해 봤습니다. ^^]과 그 인터페이스에 단순 연결(즉, 이름에 의한 연결)된 저작물[라이브러리 형태의 창작물에 링크만 한 경우를 뜻하는 것 같습니다. GPL과는 다르네요]은 포함하지 않는다.
"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.

"기여물"이란 창작물 원래 버전과 창작물과 그것의 모든 파생 창작물에 대한 수정 또는 추가 사항을 포함한 저작물로서 저작권자가 직접 또는 저작권자에 의해 지명된 개인 또는 법인이 저작권자를 대신하여 창작물에 포함시켜달라고 제출한 것을 뜻한다[대표적인 경우가 버그를 발견해서 이렇게 저렇게 fix 해 달라고 메일을 보낸 경우가 될 것 같습니다. 아래 2. 저작권 라이선스 허가에 따르면 자신이 기여한 소스에 대해서는 자연스럽게 사용권을 허가하게 되는 방식입니다]. 여기서 "제출"이란 전자적 대화, 음성대화, 기록대화 어떤 형태로든 라이선스 허가자 또는 그의 대리자에게 보낸 내용을 뜻한다. 대화 창구의 예로는 창작물에 관해 논의하고 창작물을 개선할 목적으로 라이선스 허가자에 의해 또는 라이선스 허가자를 대신하는 사람에 의해 관리되는 전자 메일링 리스트, 소스 코드 제어 시스템, 이슈 트랙킹 시스템 등이 있으나 이 세 가지에 국한되지는 않는다. 저작권자가 "기여물에 해당되지 않음"이라고 명확하게 표시하거나 그렇게 기록되어 있는 문서는 기여물에 포함되지 않는다[만약 라이선스를 허가하고 싶지 않다면 메일 보낼 때 "Not a Contribution"이라고 딱지를 붙여서 보내야겠네요. 그런데 그럴 거면 아예 메일을 보내질 않지 뭐하려고 "Not a Contribution"이라고 보낼까요 ?].
"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."

"기여자"란 라이선스 허가자에게 기여물을 보내어 그 기여물이 라이선스 허가자에 의해 창작물에 반영되었을 때, 그 기여물을 보낸 개인 또는 법인을 뜻한다. 라이선스 허가자는 기여자에 포함된다[이 개념에 따르면 최초의 원저작자도 기여자가 되는 것이겠죠 ? 그 이후에 이렇게 저렇게 수정을 한 모든 사람들도 기여자가 되는 것이구요].
"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.

2. 저작권 라이선스 허가. 각 기여자는 이 라이선스의 조항 및 조건에 따라 라이선스 이용자에게 소스 형식 또는 목적물 형식으로 창조물과 그것의 모든 파생 창조물을 재생산하고, 그것들의 파생 창조물을 준비하고, 일반인에게 공표하고, 일반인 앞에서 실행하고, 재차 라이선스하고, 배포할 수 있는 저작물 사용 권한을 허가한다[이 조항에 따르면 사용권에는 재생산, 수정, 공표, 실행, sublicense, 배포권이 포함되네요. 근데 sublicense란 뭘 뜻하는거죠 ?]. 이 권한은 영구적이고, 전세계적이며, 독점적이지 않고, 부과금이 없고, 사용료가 없으며, 취소될 수 없다[취소될 수 없다면 이 라이선스였다가 중간에 바뀌었더라도 바뀌기 전 버전을 가지고는 허가된 권한을 계속 사용할 수 있다는 뜻이네요].
2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.

3. 특허 라이선스 허가. 각 기여자는 자신이 제출한 기여물 단독으로 또는 원창작물과 조합된 기여물에 의해 어쩔 수 없이 침해될 수 밖에 없으나 자신에 의해 라이선스 허가가 가능한 특허 청구항에 대해서만 이 라이선스의 조항 및 조건에 따라 라이선스 이용자에게 창작물을 제작하고, 사용하고, 판매를 제안하고, 판매하고, 수입하고, 전송할 수 있는 특허 사용권을 허가한다[모든 기여자의 특허는 자신이 알던 모르던 사용권이 허가되는 것이네요. 혹시 회사 업무의 일부로 기여를 했는데, 자신도 모르게 회사의 특허로 기여를 했다면 그 회사의 특허는 사용권을 허가해 버리게 되는 것이네요]. 이 권한은 영구적이고, 전세계적이며, 독점적이지 않고, 부과금이 없고, 사용료가 없으며, 이 절에서 기술된 경우를 제외하고는 취소될 수 없다. 라이선스 사용자가 창작물 또는 창작물에 포함된 기여물이 직접적으로 또는 기여적으로 특허를 침해했다고 주장하는 어떤 개인 또는 법인과 특허 소송을 시작하면(맞고소 포함), 이 라이선스 하에서 라이선스 사용자에게 허가된 모든 특허 사용권은 소송이 신청된 날로부터 취소된다[어떤 개인 또는 법인이라도 아파치 라이선스를 적용하고 있는 창작물을 사용하고 있는 임의의 한 회사에게 특허 소송을 걸면 바로 사용권이 취소된다는 얘기네요. 그렇다면 그 회사만 영향을 받는 것이겠죠 ? 모든 사람이 적용받는 게 아니라... 이건 법적으로 더 확인해 볼 필요가 있을 것 같네요. 이 조항의 해석에 따라 특허권을 보호 받고 싶은 회사가 일일이 사용하는 사람 또는 법인에게 다 소송을 걸어야 하는 것인지 아니면 한 회사에 대해 소송에서 승소하면 그걸로 끝인지... 일일이 소송을 걸어야 한다고 하더라도 한 번 판결이 나면 웬만한 회사들은 더이상 사용하질 않겠죠? 그리고 사용권이 취소되는 시점도 판결이 난 이후가 아니라 특허 소송이 접수된 시점이라서 아파치 라이선스가 적용된 소스는 사용상에 약간 위험성이 크네요. 어떻게 보면 특허권을 가졌다고 주장하는 회사에게 유리한 조항이군요].
3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.

4. 재배포. 라이선스 사용자는 임의의 미디어에 담긴, 창작물과 함께 그것의 파생 창작물의 복사본을, 수정 여부에 관계 없이, 소스 형태 또는 목적물 형태로 재생산하거나 배포할 수 있다. 단, 다음과 같은 조건을 만족하여야 한다[라이선스 사용자가 재배포를 할 경우, 의무사항을 나열하고 있는 부분이네요. 잘 따라야 하겠지요. 그런데 수정 내용을 공개하라는 말도 없고 재배포시에 반드시 소스 형태로 제공해야 한다는 말도 없네요. 이것도 GPL과는 상당히 다른 점이군요]:
4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:

  1. 라이선스 사용자는 창작물 또는 파생 창작물의 수신자에게 이 라이선스의 복사본을 줘야 한다[라이선스 복사본을 배포해야 하고]; 그리고
    You must give any other recipients of the Work or Derivative Works a copy of this License; and 
  2. 라이선스 사용자는 자신이 수정한 파일들에 알아보기 쉽게 수정하였다는 것을 명시해야 한다[수정 내용은 공개하지 않더라도 수정한 파일들을 알려 줘야 하는군요]; 그리고 
    You must cause any modified files to carry prominent notices stating that You changed the files; and 
  3. 라이선스 사용자는 창작물의 소스 형태에 있던 저작권 공지, 특허 공지, 상표권 공지, 귀속 공지를 파생 창작물의 소스 형태에 그대로 유지한 채로 배포해야 한다. 단, 파생 창작물과 관계 없는 공지는 제외한다[소스 형태로 파생 창작물을 배포할 때는 공지사항을 포함시켜야 한다는 것인가요?]; 그리고
    You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and 
  4. 창작물의 배포본에 "NOTICE" 파일이 포함되어 있다면 라이선스 사용자가 배포하는 모든 파생 창작물에도 그 NOTICE 파일에 담긴 귀속 공지 사본이 읽을 수 있는 형태로 포함되어야 한다[쉽게 말하면 그 NOTICE 파일을 그냥 그대로 놔두면 되겠네요]. 단, 파생 창작물의 어떤 부분에도 관련이 없는 공지는 제외한다. 그 공지는 적어도 다음과 같이 위치 중 한 곳에 위치해야 한다: 1) 파생 창작물의 일부로 배포되는 NOTICE 텍스트 파일안에, 2) 파생 창작물과 함께 배포 되는 소스 또는 문서 안에, 3)파생 창작물에 의해 생성되는 화면 안에 보통 나타나는 제3자 공지사항으로[목적물 형태로 배포하는 경우에는 이렇게 할 수 있겠네요]. NOTICE 파일의 내용은 정보 제공의 목적이므로 라이선스 조건을 변경할 수는 없다. 라이선스 사용자는 자신이 배포하는 파생 창작물 내에 창작물의 NOTICE 파일에 덧붙여 자신만의 귀속 공지를 배포할 수 있으나 그 귀속 공지가 라이선스 조건을 변경해서는 안된다.
    If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.

라이선스 사용자는 자신이 수정한 부분에 자신만의 저작권 선언을 추가하고, 수정 부분의 사용, 재생산, 배포권에 대해 부가적인 또는 이 라이선스와는 다른 조항 및 조건을 기술할 수 있다. 또는 라이선스 사용자의 사용, 재생산, 배포의 조건이 이 라이선스와 호환이 된다면 수정 부분이 아닌 전체 파생 창작물에 대해 부가적인 또는 이 라이선스와는 다른 조항 및 조건을 기술할 수 있다[자신이 변경한 부분에 대해서는 다른 라이선스를 내걸 수 있다는 게 GPL과는 상당히 다른 점이네요. 이상의 재배포 조건을 보건데 GPL보다는 상당히 완화된 의무사항이네요]
You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.

5. 제출된 기여물. 라이선스 사용자가 창작물에 포함시키려는 의도를 가지고 라이선스 허가자에게 제출한 기여물은 명확하게 기여물이 아니라고 기술하지 않았다면 추가적인 조항과 조건 없이 이 라이선스의 조항과 조건하에 놓이게 된다. 이렇다 하더라도 라이선스 사용자가 기여물에 관해 라이선스 허가자와 별도로 맺은 라이선스 합의 조건을 이 조항이 대신하거나 변경하지는 않는다[기여물로 제출하면 당연히 이 라이선스를 따르게 된다는 거죠].
5. Submission of Contributions
. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.

6. Trademarks. 이 라이선스는 라이선스 허가자의 상품명, 등록상표, 서비스 마크, 제품명을 사용할 권한을 부여하지 않는다. 단, 창작물의 시초를 밝히거나 NOTICE 파일을 재생산하기 위해 합리적이고 관습적으로 쓰는 경우에 한해서는 사용할 수 있다[등록 상표를 함부로 쓰면 안되겠군요. 예를 들면 Apache HTTP Server 파생 창작물을 만들고 기여물로 제출하지 않은 채로 Apache 라는 이름을 쓰면 안된다는 것이죠].
6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.

7. 보증 거부. 법에 의해 요구되거나 문서상으로 합의한 경우를 제외하고, 라이선스 허가자는 아무런 보증 없이 창작물의 상태 그대로를 제공한다. 또한, 적법한 권한, 무침해, 거래 적합성, 특정 목적 부합성을 보증하지도 않는다. 라이선스 사용자는 자신이 직접 창작물 사용 및 배포의 적합성을 판단하여야 하고, 이 라이선스 하에서 허가된 권한을 실행하는데 있어 관련된 위험이 있을 수 있다는 걸 인지하여야 한다[어떠한 보장도 못하니 알아서 판단해서 쓰라는 얘기군요. 심지어는 다른 사람의 권리를 침해하지 않았다는 것도 보증하지 못한다네요. You use this at your own risk. 이것만 보면 정말 겁나는 얘기죠].
7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.

8. 법적 책임의 한계. 어떤 사건, 어떤 법률적 이론 하에서도, 직무 태만을 포함한 불법 행위, 계약, 또는 다른 형태로든, 관련 법률이 강제하거나 기여자가 문서로 합의하지 않는 한, 기여자는 라이선스 사용자의 손해에 대한 책임을 지지 않는다. 그 손해가 직접적이던, 간접적이던, 특별한 손해이던, 우연한 손해이던, 창작물의 사용으로 인한 손해, 창작물의 사용 불가로 인한 손해, 이 라이선스로 인한 손해 등과 같이 인과적인 손해이던지 상관없이 책임을 지지 않는다. 그러한 손해의 예로는 선의의 손실로 인한 손해, 업무의 중단에 의한 손해, 컴퓨터 고장 또는 오동작으로 인한 손해, 기타 모든 상업적인 손해등이 있으며, 이것들만으로 제한되진 않는다. 기여자가 이러한 손해의 가능성에 대해 조언을 받았다고 하더라도 이 조항은 그대로 적용된다.
8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.

9. 보증 또는 책임의 추가. 창작물과 그것들의 파생 창작물을 재배포할 때, 라이선스 사용자는 소정의 수수료를 받고 지원, 보증, 손해배상 책임, 기타 이 라이선스와 일치하는 법적 책임 및 권한을 받아들일 수 있다. 그러나, 그러한 책임을 받아들임에 있어 라이선스 사용자는 오로지 자신의 책임하에 받아들여야 하며, 이로 인해 야기되는 법적 책임 또는 지불 청구 등에 대해 기여자를 대신하여 배상금을 지불하고, 기여자를 보호하고, 각 기여자가 손해를 입지않도록 하는데 동의하여야 한다[7.항 8.항에 따르면 기여자들은 어떤 책임도 지지 않기 때문에 이항을 통해 보증 또는 책임을 짐으로써 비즈니스를 영위하는 경우를 명시적으로 허용하고 있네요. 이렇게 되면 오픈 소스 사업을 하는 사람도 나올 수 있고, 기여자들은 안심하고 기여를 할 수 있으니 누이 좋고 매부 좋고네요 ^^]
9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.

조항 및 조건의 끝
END OF TERMS AND CONDITIONS 

첨부: 자신의 창작물에 아파치 라이선스를 적용하는 방법
APPENDIX: How to apply the Apache License to your work

자신의 창작물에 아파치 라이선스를 적용하려면 다음의 틀을 갖는 공지에서 대괄호를 둘러 쌓인 부분을 자신을 식별할 수 있는 정보로 대치해야 한다(대괄호 자체는 포함해서는 안된다). 파일 형식에 따라서는 적절한 코멘트 형식으로 둘러 싸야 한다[예를 들자면, C/C++ 소스 코드에 포함하는 경우에는 /* */ 이런 걸로 둘러 쌓아라는 말이겠죠]. 파일 이름, 클래스 이름, 목적 기술은 제3자의 아카이브 안에서도 쉽게 확인할 수 있도록 인쇄할 때 저작권 공지와 동일한 페이지에 나타나도록 할 것을 추천한다.
To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.

Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.


출처 : http://yesarang.tistory.com/272

Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거

Interactive SVG Workspace by Belle Epoque

Custom SVG elements can be combined together into an <svg> tag to make hard-coded illustrations for the web. This example from Belle Epoque is a fully interactive studio workspace.

Try clicking on the bicycle, the light switch, or even drawing the shades. Each interaction is managed through JavaScript but the illustration is 100% HTML/CSS code.


Sparkle Trail by Jack Rugile

Here’s an interested re-creation of a Dribbble shot made by Ramiro Galan. The trailing sparkle effect is notably harmonious with the original shot, but the coolest part is how everything was recreated using Canvas and JavaScript.


Icon Hover Glow by Chris Colouryum

One of the simplest things you can do with SVG is a toggle animation. This lightbulb icon fits the metaphor nicely with an on/off animation style. Also note how the JS code is only for cross-browser support – the animation itself relies solely on HTML and CSS3.


If you’re looking for a quick tutorial for getting started with inline SVG, you should have a look at this tutorial, and if you’re looking for some tools to help boost your SVG workflow, check out this round-up.


Rotating Petals by Bailh

Abstract design ideas tend to be the most interesting but the least useful in real-world situations. I still really dig this paper pattern built on Snap.svg. It offers a weird yet significant learning curve with SVG elements like ellipse andlinearGradient.


Simple Animated Icons by Simurai

CSS masking with SVGs can be very similar to Photoshop if you learn to do it right. This code snippet runs on custom SVG files with background gradients. The only downside is that CSS masks have poor browser support – but hopefully this will improve in time.


Elastic Material Design Sidebar by Nikolay Talanov

Mobile apps are renowned for their touch/tap effects that websites haven’t needed until touchscreen Internet. With SVGs you can create a touch/drag animation right in the browser, and this elastic menu plays the part nicely.


Vector Map Point by Adam Girton

Just a simple vector icon map of California with a beacon pinpointing home. California’s shape is actually built using SVG coordinates in HTML while the marker is pure CSS animation.


Responsive Graph by Andrew Weeks

Regular images can be made responsive but they often resize based on fixed dimensions. This graph can be stretchy, and even reposition data points to fit better on a small X/Y axis. Very cool use of SVGs for the responsive web.


CSS3 + SVG Animation by lionelB

A simple little airplane floating amongst the clouds. Not exactly useful for every web project but still quite inspiring to see what’s possible using only SVG & CSS.


Glossy Shine Effect by Vincent De Oliveira

This logo effect relies on a PNG image for the graphic but uses SVG/CSS masking for the shine. No JavaScript or external libraries needed – just pure CSS animation which is damn impressive.


Burger Menu Animation by Kyle Henwood

This is perhaps my favorite 3-bar hamburger icon animation effect. It uses two different SVGs with internal paths manipulated by JS and CSS classes.

Browser support is still a bit wonky but it could make a fine staple animation for future website interfaces.


SVG Typography Experiment by Chris Wright

A little experiment that shows how modern Webkit/IE browser engines can actually curve text along an SVG path. For all intents and purposes you’d be better off using a static image in any real project. But this is still very cool and worth considering for abstract typographic ideas.


Fullscreen Navigation by Anas Ashraf

Fullscreen dropdown menus can be found on many websites, often agencies or large creative studios. This particular code snippet uses a custom SVG for the 3-bar icon attached with a sweet animated effect.


Moving Mask by John Grishin

Masking is a tricky subject with spotty support but this example doesn’t use the typical CSS properties. Instead John uses JavaScript to manipulate paths based on which areas are touching within the diamond shape. Quite unique and fun to play with, too!


Canvas Circle Loader by Jack Rugile

Here’s a weird loader animation that resembles a polygraph mixed with a submarine radar. The content is housed inside a canvas element with JavaScript doing all the heavy lifting.


Tuts+ logoIf you’re looking to get started with CSS animation, Tuts+ have some handy courses that will get you going in no time: CSS Animation in the Real Worldand Scroll-Based CSS Animations.
They also have a great course for getting started with SVG for web design.


Depth of Field Effect by Vaughan Curd

Photographs can be manipulated in Photoshop but never dynamically for the web. This depth of field effect uses everything from SVG filters to JavaScript manipulation with an HTML <map> tag.


Dancing Robot by Val Head

It’s the simple things in life that bring joy and this dancing robot is full of jubilation. Each limb is built with a different SVG file which animates based on a CSS class.


Social Sharing Bar by Max West

3D browser effects are becoming more popular with a growing number of 3D JavaScript libraries. This social sharing bar uses an SVG with CSS3 perspective transforms. Quick, clean, and quite congenial.


Animated Map Directions by Max Boll

I’ve never seen this technique in a real website but it could be super helpful to delineate office locations or to create dynamic driving directions. The animated line is built using SVG coordinates which could be updated dynamically via JavaScript.


LCD Clock by Christian Hanvey

Believe it or not this entire clock was built using SVG elements. The polygon element is used since most of the shapes require 3 or more sides. Plus the time is surprisingly accurate based on JavaScript date/time methods.


CSS/JS/Canvas Night Scene by Jack Rugile

Parallax design goes hand-in-hand with SVGs and canvas elements. This minimalist scene was built using a few SVG icons surrounded by an outer canvas. It’s made to stretch and fit into enormous window sizes because the patterns are all vector-based.


SVG Letter Sprite by nahuelsotelo

Just another typographic experiment relying on SVGs for effects and scalability. The first letter of each word is contained inside an SVG sprite sheet. It requires very little code and runs surprisingly smooth in most browsers.


Shooting Plusses by Jack Rugile

Minimalist effects are common for testing simple features like these spouting plus signs. This requires only a single canvas element with ~100 lines of JavaScript. Everything from the plusses to the water hose animation is controlled via JavaScript.


UI Demo Animation by Lloyd Wheeler

Landing pages often rely on videos to describe how a product works. This SVG-based UI animation could be a wonderful alternative if you prefer minimalist design. The monitor icon is made with base64 SVG/XML code and animated with CSS3, but you could achieve the same effect with SVG files and JavaScript animation too.


SVG Weather Icons by Noah Blon

I can’t help but marvel at the beauty of this weather iconset. It’s based off Adam Whitcroft’s Climacons but each icon includes an extra CSS animation. The HTML is rather lengthy since each icon is hard-coded with XML/SVG but there’s still a lot to be learned by studying the techniques used in this snippet.


출처 : http://marketblog.envato.com/web-design/snippets-canvas-svg/


Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거

New Header Johan van Tongeren

A full header crafted with Open Sans & Squada One – definitely a unique touch. This header was designed for Johan van Tongeren’s new website. The logotype letters feature a striped shadow and the nav links expand in size through animated hover effects.


Star Wars Scrolling Text Scott Bram

George Lucas has unleashed an incredible force in the world of cinema with ripples leading into many other creative fields. This code snippet replicates the Star Wars intro text as it scrolls upwards at a slant away from the viewer.


Opening Type Bernardo

Perhaps the coolest aspect of this paper cutout effect is that it’s created with less than 100 lines of CSS. Each letter uses CSS3 transforms to skew the letter while rotating in 3-D along X/Y/Z axes.


Stylish Blockquote Stephen Greig

Here’s an interesting snippet that focuses on techniques found in traditional graphic design. Pseudo classes are used to manipulate the blockquote text and append CSS styles onto particular letters in the quote. Very cool style to spruce up a static webpage.


3D CSS Typography Noah Blon

With CSS3 transforms we can manipulate just about any text or page element with ease. Browser support is increasing and transforms have grown to allow for fully-encompassed animations like this 3D rotating block of text.


The Leonardo Blake Johnson

Quite an interesting logo concept for pure typographic font manipulation. The outer letters are cut off at 45° using CSS borders. In production this may work better as a PNG but for pushing CSS boundaries this is truly an impressive feat to behold.


’80s Typography David Parker

The ’80s are still alive and well in this CodePen snippet by David Parker. All 5 text effects come straight out of 1980s graphic design relying on nothing more than pure CSS3.


Curly Brace Divider Lauren Herda

Horizontal Rules have been apart of HTML for years – but CSS3 allows more fanciful effects to bring HR elements into the modern age of UI design. For example, this HR snippet is styled into a large curly brace using custom CSS3 background properties.


Exploring Type Robot

Just a few interesting drop shadow effects tied onto large lettering. Border divisions are added alongside letters and positioned at exactly 50% height.


Knockout Text Crisman Noble

This is one neat CSS style that forces a background image to show through letters on the page. I should note this effect will only work in Webkit browsers, so use it sparingly or in case test studies.


Diagonal-Dashed Shadow Lucas Bebber

Here’s another dynamic CSS text shadow using diagonal dashes for the pattern. They’re animated to jitter using CSS3 and they can even apply to borders located on top & bottom of the text.


CSS3 Logotype Nate Scott

Some real simple logo-esque typography with stencil borders. The text is styled as if to mimic a BBQ joint with big letters and similar drop shadows.


Creative Resume Sara Soueidan

This one-of-a-kind typographic resume relies on more traditional graphic design principles. Font color varies based on location to designate areas of the page to different skills. It’s a very cool idea that could be used on a real project with a bit of tweaking.


4 Text Shadow Effects Jorge Epuñan

We’ve seen a few text shadows in other pens but this snippet offers 4 unique CSS styles for creating text shadows. You’ll find a “flat” long shadow, 3D shadow, inset shadow & retro thin line shadow.


Geek Badge Rachel Nabors

At first this may not seem like much but it’s actually a ribbon comprised of nothing but HTML/CSS. The skewed text & rotated container were both created with dynamic CSS3 properties.


SCSS Tight Underline Mr. Pirrera

Typical CSS underlines will span the entirety of a word and maintain location based on line-height. This snippet generates a thin background image which falls behind letters, thus creating an underline that doesn’t cut through descenders.


Masked Text Shadow Daniel Riemer

Here’s an interesting CSS shadow that relies on masking to create the effect. CSS masks are not fully supported in most browsers, but they can be very powerful when used correctly.


Text Filling with Water xiaodong

When first finding this pen I thought it had to be using JavaScript. Believe it or not this animated water effect is created exclusively with CSS by replacing background images through CSS animation keyframes.


The Correct Pronounciation Daniel Burrows

Here we’ve got a very cool typeface stacked with an interesting drop shadow. But my favorite part of this snippet is the rotated section symbol(§) used as an aesthetic divider. It just goes to show you really can build anything with some creative ingenuity.


Skewed Typeface Kurt Emch

Comic book text is often bold, lengthy, and skewed in some direction. This code snippet uses the font Bangers in combination with CSS3 to create a proportionally skewed superhero-style text effect.


Circular Text Badge Jack Armley

This entire page was created using no images or any JavaScript. The rounded text, circular badge, and textured BGs were all created with pure CSS3.


Dotted Text Shadow Travis Benton

Another unique text shadow that uses dots like you’d find on a dot matrix printer. The dot pattern is generated through base64 code so there are no external images at all.


Colored 3D Effect Brian Guerrero

3D glasses can make digital pictures look weird and colorful in 3D. Well this CSS effect recreates the 3D look, sans glasses.

The shadows are combined into one property so we have 2 different shadows rendered onto the same text.


Text Perspective Nathaniel Watson

Here’s another interesting 3D effect reliant on pure CSS3 transforms. The perspective transform property is powerful when used under the right conditions.


Multi-Colored 3D Type Carlos Centeno

An interesting and vastly creative snippet: square block-case letters aligned together with uniquely colored text shadows. I have no idea how long it took to write the code for this text effect, but it looks magnificent.

Closing

Some of these snippets may prove useful in future projects while others may never be replicable in a professional setting. CodePen is just a fun place for developers to explore languages and see what’s possible in the world of frontend development. Feel free to mess around with any of these code snippets and see what else you can create.



출처 : http://marketblog.envato.com/web-design/css3-typography-code-snippets/?ref=webdesignernews.com


Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거
출처 : http://www.foxcg.com/21#.VVQvYPntlBc






Posted by 앗뜨거워 ( @bok3937 ) 앗뜨거