[ETC] 웹 이미지
웹 이미지
비트맵 vs 벡터
- 필요에 따라서 어떠한 이미지 포맷을 선택하느냐
- 이미지는 일반적으로는 벡터보다는 비트맵이 효과적
- 단순 구조한 아이콘, 로고, Material image등이 벡터로 만들는게 효과적
- Material Design은 고품질 디지털 경험을 구축할 수 있도록 Googl에서 만든 디자인 시스템(방식)
BeatMap
JPG(JPEG)
(Joing Photographic coding Experts Group)
- Full-color 와 Gray-scal의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진아니 예술 분야에서 많이 사용
- 손실 압축방식을 사용(이미지가 손실되면서 압축되는 것) - 용량이 획기적으로 준다
- 반복적으로 저장하는 행위는 X 이미지가 바래진다
PNG
(Portable Network Graphics)
- Gif의 대체 포맷으로 개발됨
- 비손실 압축으로 이미지가 손실되지 X
- 품질은 유지되지만 용량이 비교적 크다
- Alpha Channel 즉 투명한 부분을 지원한다 - 투명한 영역을 지원하기 때문에 원하는 이미지 영역만 화면에 출력되게 만들 수 있다
GIF
(Graphics Interchange Format)
- 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
- 24비트 컬러는 지원하지 X
- 다양한 색상 표현에는 적합하지 않지만 움짤이나 애니메이션 같은 한 장의 이미지를 사용할 때 유용
WEBP
- JPG,PNG,GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
- 나온지 비교적으로 최근이라 지원되는 브라우저를 확인해야 한다 (IE제외 대부분 브라우저는 지원)
Vector
SVG
(Scalable Vector Graphics)
- 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷
- 점과 선과 면에 수학적인 정보들을 가지고 있기 때문에 이미지를 아무리 키워도 정보를 바꾸지 않는 이상 해상도가 영향을 받지 않는다
- 아이콘이나 로고등 이미지나 해상도를 변경해야되는 환경에서 사용
특수 문자 용어
`
Backick, Grave (백틱, 그레이브)
~
Tilde(틸드)
!
Exclamation mark(엑스클러메이션, 느낌표)
@
At sign (앳, 골뱅이)
#
Sharp, Number sign(샵, 넘버, 우물 정)
$
Dollar sign(달러)
%
Percent sign(퍼센트 사인)
^
Caret(캐럿) - 무엇인가에 이상일 때 사용
&
Ampersand(엠퍼샌드)
*
Asterisk(에스터리스크, 별표)
_
Hyphen, Dash(하이픈, 대시, 마이너스)
_
Underscore, Low dash(언덧코어, 로대시, 밑줄)
=
Equals sign(이퀄)
“
Quotation mark(쿼테이션, 큰 따옴표)
‘
Apostrophe(아포스트로피, 작은 따옴표)
:
Colon(콜론)
;
Semicolon(세미콜론)
,
Comma(콤마)
.
Period Dot(피리어드, 닷, 점, 마침표)
?
Question mark(퀘스천 마크)
/ slash(슬래쉬)
|
Vertical bar (버티컬 바)
\
BackSlash(백슬래시, 역 슬래시
()
Parenthesis(퍼렌서시스, 소괄호, 괄호)
{}
Brace(브레이스, 중괄호)
[ ]
Bracket (브래킷, 대괄호)
<>
Angle Bracket(앵글 브래킷, 꺽쇠괄호)
출처: