반응형 웹디자인 (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 |
