Google Web Fonts [구글 웹폰트]
Google Web Fonts [구글 웹폰트]
1996년 : CSS 1.0
1998년 : CSS 2.0 - 제작자의 외부 스타일시티에 폰트 적용을 위한 @font-face 포함
1998년 : CSS 2.1 - 저작권 등의 문제로 @font-face를 CSS에서 제거
2002년 : CSS 3 - @font-face를 새로운 폰트 모듈로써 다시 포함.
☞ 구글 폰트 사이트 : https://fonts.google.com/ (Internet explorer를 제외한 Chrome, Edge, Firefox, Safari로 접속)
01. ex) 폰트명의 우측의 + 버튼(1)을 클릭합니다. 그러면 화면 하단에 (2)가 나타나는데 클릭.
02. (3) 클릭하면 폰트를 다운로드 할 수 있습니다.
(4) 임베드 방식, 커스터마이징 선택
(5) 적용방식 선택
standard : <link href="https://fonts.googleapis.com/css?family=Jua|Nanum+Gothic" rel="stylesheet">
@import :
<style>
@import url('https://fonts.googleapis.com/css?family=Jua|Nanum+Gothic');
</style>
(6) 스타일시트(CSS) 폰트 사용법 : font-family: 'Jua', sans-serif;
03. 적용결과 소스예시 ;
'Web Design > web design general' 카테고리의 다른 글
| Code Editors - 코딩을 위한 멋진 에디터 프로그램 (0) | 2018.04.18 |
|---|---|
| 웹폰트 (web font) 사용하기 (1) - CDN (0) | 2018.04.16 |
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
Code Editors - 코딩을 위한 멋진 에디터 프로그램
Code Editors - 코딩을 위한 멋진 에디터 프로그램
01. Brackets (http://brackets.io/) [PC / Mac : 무료] ★★★★★
02. Sublime Text [PC / Mac : 무료] ( http://www.sublimetext.com/ ) ★★★★★
03. Dreamweaver [PC / Mac : 유료] ( https://www.adobe.com/products/dreamweaver.html ) ★★★★★
04. Atom [PC / Mac : 무료] ( https://atom.io ) ★★★★★
05. Bluefish [PC / Mac : 무료] ( https://sourceforge.net/projects/bluefish/ )
06. CoffeeCup [PC : 무료] ( https://www.coffeecup.com/free-editor/ )
07. Notepad++ [PC : 무료] ( https://notepad-plus-plus.org/ )
08. BBEdit [Mac : 유료] ( https://www.barebones.com/ )
08. Coda [Mac : 유료] ( https://panic.com/coda/ )
'Web Design > web design general' 카테고리의 다른 글
| Google Web Fonts [구글 웹폰트] (0) | 2018.04.18 |
|---|---|
| 웹폰트 (web font) 사용하기 (1) - CDN (0) | 2018.04.16 |
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
웹폰트 (web font) 사용하기 (1) - CDN
웹폰트 (web font) 사용하기 (1) - CDN 사용
눈누 상업용 무료 한글폰트
http://noonnu.cc/
01. 사용하고자 하는 폰트를 클릭합니다.
02. A부분의 웹폰트로 사용하기를 복사해 style.css 또는 웹페이지의 <style></style> 안에 붙여넣기를 합니다.
03. 적용하고자 하는 태그에 다음과 같이 삽입합니다.
ex) p { font-family : 'Godo' font-size : 15px; }
고도체 웹폰트 예시보기 [GO]
'Web Design > web design general' 카테고리의 다른 글
| Google Web Fonts [구글 웹폰트] (0) | 2018.04.18 |
|---|---|
| Code Editors - 코딩을 위한 멋진 에디터 프로그램 (0) | 2018.04.18 |
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery )
☞ 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery )
http://datatables.net
01. 두 개의 파일을 html 페이지 <head></head> 부분에 삽입
CSS : //cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
JS : //cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
ex) CDN
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css ">
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
Server 설치시
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
다운로드 :
02. 아래의 function을 호출 - body에 삽입
$(document).ready( function () { $('#myTable').DataTable();} );ex) <script type="text/javascript">
$(document).ready( function () {
$('#myTable').DataTable(); } );</script>
#myTable - 꾸밀 테이블 id
Styling - table
'Web Design > web design general' 카테고리의 다른 글
| Code Editors - 코딩을 위한 멋진 에디터 프로그램 (0) | 2018.04.18 |
|---|---|
| 웹폰트 (web font) 사용하기 (1) - CDN (0) | 2018.04.16 |
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
| 반응형 웹디자인 (Responsive web design )을 위한 Grid system (0) | 2015.06.24 |
SVG 관련 유용한 사이트
SVG 관련 유용한 사이트 :: SVG 아이콘 or 폰트를 다운로드 또는 링크로 사용가능한 사이트
'Web Design > web design general' 카테고리의 다른 글
| 웹폰트 (web font) 사용하기 (1) - CDN (0) | 2018.04.16 |
|---|---|
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
| 반응형 웹디자인 (Responsive web design )을 위한 Grid system (0) | 2015.06.24 |
| SVG (Scalable Vector Graphics) (0) | 2015.06.24 |
APNG (Animated Portable Network Graphics) & PNG
APNG (Animated Portable Network Graphics)
구글이 안드로이드를 위한 ‘크롬’ 59버전을 업데이트한다고 2017년 6월6일(현지시간) 블로그를 통해 전했다.
크롬 59버전은 APNG라고 하는 애니메이션 PNG를 지원하게 됐다. APNG는 GIF와 유사하지만 24비트 이미지와 8비트 투명도를 지원해 GIF보다 개선된 품질을 보이는 파일이다.
APNG(Animated Portable Network Graphics)는 PNG를 확장한 이미지 파일 포맷으로, Stuart Parmenter와 Vladimir Vukicevic가 제안했다. 이 포맷은 GIF와 비슷한 방법으로 애니메이션을 구현하면서 기존 PNG 파일과의 하위 호환성을 유지했기 때문에 GIF보다 더 높은 품질을 보여 준다. PNG 기반의 애니메이션 파일 포맷으로 MNG도 있지만, APNG는 MNG보다 구현이 간단하고 호환성이 유지된다는 장점이 있다.
APNG 파일의 첫 프레임은 일반적인 PNG 스트림으로 저장되기 때문에, APNG를 해석할 수 없는 기존 PNG 디코더들도 APNG 파일의 첫 프레임을 보여 줄 수 있다. 나머지 프레임들과 애니메이션 정보들은 별도의 스트림으로 저장된다.
2013년 기준으로 libpng를 사용한 APNG 구현이 있지만, 대부분의 이미지 라이브러리, 뷰어, 편집기에서 APNG를 지원하지 않기 때문에 아직 대중적으로 사용되지는 않고 있다.
- 출처 : 위키백과
○ 브라우저별 APNG 지원 현황
PNG 8, PNG 24 (PNG - Portable Network Graphics)
PNG 파일을 일명 '핑'이라고도 부르기도 한다.
01.익스플로러 4.0부터 지원이 된 웹에서 최상의 비트맵 이미지를 구현하는 파일 포맷
02.png 포맷은 gif와 jpg 포맷의 단점들을 보완해 gif 의 단색 투명 이미지, 그리고 부드러운 투명 이미지 표현 가능하며 사진과 같은 true color 이미지도 손상을 최소화하여 표현이 가능한 파일 포맷
03.파일 용량은 화질 조정이 가능한 jpg에 비하면 다소 크지만, 문자가 들어갔거나 이미지가 좀 날카로운 부분이 많다고 하면 png 파일로 저장하는 편이 훨씬 더 깨끗한 화질을 표현하는 겻이 가능
04.PNG-8 은 GIF 와 깉이 256 색상을 지원하고 단색 투명도를 지원하고 PNG 24에 비해 용량이 당연히 적다
05.PNG-24 는 png-8 에 비해 용량은 크지만, 부드러운 반투명 이미지와 트루 컬러를 지원하는 큰 장점
06.모든 브라우저 지원
○ 브라우저별 PNG 지원 현황
'Web Design > web design general' 카테고리의 다른 글
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
|---|---|
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| 반응형 웹디자인 (Responsive web design )을 위한 Grid system (0) | 2015.06.24 |
| SVG (Scalable Vector Graphics) (0) | 2015.06.24 |
| All about Favicon 파비콘 (favicon) (0) | 2015.06.24 |
반응형 웹디자인 (Responsive web design )을 위한 Grid system
반응형 웹디자인 (Responsive web design )을 위한 Column을 자동생성해 주는 포토샵 익스텐션을 소개 합니다.
1) 익스텐션 다운로드 ( http://guideguide.me )
2) Adobe Extension Manager CS6를 실행합니다.
3)
4)
'Web Design > web design general' 카테고리의 다른 글
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
|---|---|
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
| SVG (Scalable Vector Graphics) (0) | 2015.06.24 |
| All about Favicon 파비콘 (favicon) (0) | 2015.06.24 |
SVG (Scalable Vector Graphics)
SVG :
SVG는 ‘Scalable Vector Graphics’의 약자로 웹 상에서 2차원 벡터 그래픽을 표현하기 위한 XML파일 형식의 마크업 언어입니다. 별도의 플러그 인이나 뷰어 없이도 그래프, 차트와 같은 작고 간단한 그래픽 요소부터 애니메이션화된 일러스트와 같이 크고 복잡한 것에 이르기까지 이미지의 왜곡이나 손상 없이 고화질의 그래픽 효과를 웹 상에서 구현할 수 있습니다.
벡터 그래픽 구현방식은 Adobe의 Flash와 유사하지만 SVG가 갖는 가장 큰 특징은 독자적인 기술에만 의존하는 Flash와는 달리 W3C의 권고안을 따르는 개방형 표준 파일로 CSS, DOM 및 SMIL등과 같은 다른 W3C 표준에서 작동할 수 있도록 설계되어 있다는 점입니다. 즉, 어떠한 문서편집기로도 생성할 수 있고 편집이 가능합니다.
또한 래스터 이미지 포맷(JPEG와 GIF 등)과 비교했을 시, 다양한 해상도에서 고품질로 출력할 수 있으며, 이미지 품질의 저하 없이 확대 및 축소할 수 있습니다. 1600만 이상의 색상 값을 지원하며 마크업 언어이기에 색인을 달 수 있고 명령어를 쓸 수 있으며, 구글과 같은 검색엔진에서 검색이 가능합니다.
SVG 홈페이지 삽입 방법 :
<embed src="logo.svg" type="image/svg+xml" width="77" height="77" />
or
<object type="image/svg+xml" data="logo.svg">현재 브라우저는 SVG를 지원하지 않습니다.</object>
or
<iframe src="logo.svg">이 브라우저는 아이프레임을 지원하지 않습니다.</iframe>
or
<img src="logo.svg" alt="로고" height="77" width="77">
SVG 브라우저별 지원 현황 :
유용한 관련 사이트 : https://svgontheweb.com/ko/
'Web Design > web design general' 카테고리의 다른 글
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
|---|---|
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
| 반응형 웹디자인 (Responsive web design )을 위한 Grid system (0) | 2015.06.24 |
| All about Favicon 파비콘 (favicon) (0) | 2015.06.24 |
All about Favicon 파비콘 (favicon)
파비콘 (favicon) :
즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 주소창에 조그만 아이콘으로 표시되어 있다. 아이콘 에디터로 16x16 크기의 적당한 아이콘을 만든 후 그 이름을 favicon.ico로 한 다음 웹 사이트의 루트 디렉터리에 업로드
파비콘(favicon) 제작 :
파비콘(favicon)의 적용 :
<header></header> 사이에 <link rel="shortcut icon" href="favicon.ico"> 삽입
'Web Design > web design general' 카테고리의 다른 글
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
|---|---|
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
| 반응형 웹디자인 (Responsive web design )을 위한 Grid system (0) | 2015.06.24 |
| SVG (Scalable Vector Graphics) (0) | 2015.06.24 |
