오픈소스 라이선스

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 ) 앗뜨거


티스토리 툴바