[패스트캠퍼스 네카라쿠배 2기 도전] 웹에서 사용하는 이미지, 기호, 라이선스

1. 비트맵과 벡터 이미지 

: 이미지 (그래픽)은 크게 비트맵과 벡터로 구분된다 

 

1)비트맵 

: 픽셀이 모여 만들어진 정보의 집합, 레스터 이미지라고도 부른다 

픽셀 단위로 화면에 렌더링합니다 (렌더링: 컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 한다) 

우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 ex. jpg, png, gif

=> 작게 만든 화면을 크게 확대하면 픽셀의 형태로 떨어진다 (계단현상, 품질 저하) 

=> 대신 용량 관리가 용이하다

 

2)벡터 

: 수학적 정보의 형태들이 만들어내는 결고마ㅜㄹ 

이미지가 가지고 있는 점, 선, 면의 위치(좌표) 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더한다 

=> 확대, 축소해소 해상도가 달라지지 않음 

=> 이에 따른 용량 변화도 없다, 정교한 이미지를 표현하기 어렵다

 

2. 비트맵

1) JPEG 

: 압축률이 훌륭해 사진, 예술 분야에서 많이 사용됨 

-손실 압축 : 손실이 일어나지만 효율적으로 압축된다 

   - 그러므로 여러번 원본을 저장하면 손실이 여러 차례 일어난다 

-표현 색상도 : 24비트 , 색상 매우 다양, 뛰어나 고해상도 표시장치에 적합 

-이미지의 품질과 용량을 쉽게 조절 가능 

-가장 널리 쓰이는 이미지 포맷 

- 높은 압축률 : 적은 용량만 사용해야 할 때 jpg 사용하기 

 

2)png 

:gif 대체 포맷 

-비손실 압축: 손실이 없기 때문에 효율적으로 압축되지는 않음 

-8비트, 24비트의 컬러 이미지를 지원한다 

- alpha channel 지원 (투명한 부분을 지원한다 ) 

- W3c 권장 포맷 

=> 투명도 필요하면 쓰기 

 

3) gif 

이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있다 

-비손실 압축 

-8비트 컬러만 지원 

-여러 장의 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션) 

=> 애니메이션 쓰고 싶으면 쓰기 

 

ex. 용량이 매우 크다 - 줄이고 싶다: jpg 

투명도 필요하다 : png 

애니메이션이 필요하다 : gif 

 

4)  WEBP 

모두 대체 가능한 구글이 개발한 이미지 포맷 

완벽한 손실/비손실 압축 지원 

GIF 같은 애니메이션 지원 

투명도 지원 

=> 완벽하지만 지원 브라우저가 (can I use라는 사이트를 보며 ) 별로 없다 

 

5)SVG

마크업 언어 기반의 벡터 그래픽을 표현하는 포맷 

벡터 기반 이미지(ex. 이미지) 에 익숙하지 않으면 다루기 까다로움

- 코드 혹은 파일로 사용 가능 

- 해상도의 영향에서 자유로움 

- css로 styling 가능 

- js로 event handling 가능 

 

3. 특수 문자 용어 정리 

*출처 : https://heropy.blog/2019/04/24/html-css-starter/

입문자에게 추천하는 HTML, CSS 첫걸음

기호영어(발음)한글

`	Grave(그레이브)	-
~	Tilde(틸드)	물결표시
!	Exclamation(엑스클러메이션) mark	느낌표
@	At(엣) sign	골뱅이
#	Number(넘버) sign, Sharp(샵)	샵, 우물 정
$	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(앵글 브래킷)	꺽쇠괄호

더 모르는 명칭들을 html entity list을 찾아서 보기 

 

[오픈소스, 라이선스]

오픈소스 : 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것 

- 우리가 다 만들기 어렵기 때문에 참고해 활용하기 좋음 

- 하지만 다 무료는 아니다 그러므로 라이선스를 찾아봐야 한다. 

apache license 

- 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스 

-개인적 / 상업적 이용, 배포, 수정, 특허 신청 가능 

 

MIT license 

- MIT에서 SW 학생들을 위해 개발한 라이선스 

- 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 된다. 

- 나머지 사용에 대한 제약이 없기 때문에 인기 많음 

 

BSD license

버클리 캘리포니아 대학에서 개발 라이선스 

라이선스 표시(누가 만들었는지)만 지켜주면 됨.(사용할 때 알아서 포함되어 있음) 

 

Beerware 

오픈소스 개발자에게 맥주를 사줘야 하는 라이선스 

만날 수 있으면. 사실상 공짜