렌더링

Rendering이란 브라우저의 뷰포트에 웹 사이트를 출력하는(그림 그려내는) 행위를 말합니다.

---

뷰포트

Viewport란 웹페이지가 출력되는 범위입니다.

---

웹 이미지 비트맵과 벡터

비트맵(Bitmap)

• 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름.
• .jpeg .gif .png
• 정교하고 다양한 색상을 자연스럽게 표현.
• 확대/축소 시 계단 현상, 품질 저하.

벡터(Vector)

• 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지.
• .svg
• 확대/축소에서 자유로움, 용량 변화가 없음.
• 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움.

Material Design(머터리얼 디자인)

• 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)입니다.
• 벡터이미지로 만들기 용이하고 관리하기 좋습니다.

JPG(Joint Photographic coding Experts Group)

JPG는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.

• 손실 압축
• 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 이미지 포맷
• 이미지를 반복적으로 새롭게 저장하는 것은 가급적 지양(손실 압축을 사용하기 때문)

PNG(Portable Network Graphics)

Gif의 대체 포맷으로 개발됨.

• 비손실 압축
• 8비트(256색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
• Alpha Channel 지원(투명도)
• W3C 권장 포맷

GIF(Graphics Interchange Format)

이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장.

• 비손실 압축
• 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
• 8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

WEBP

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.

• 완벽한 손실/비손실 압축 지원
• GIF 같은 애니메이션 지원
• Alpha Channel 지원(손실, 비손실 모두)

SVG

SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷.

• 해상도의 영향에서 자유로움
• CSS와 JS로 제어 가능
• 파일 및 코드 삽입 가능
• 코드로 되어 있어, CSS, JS로 제어 가능
  

---

특수 기호

Backtick, 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

앵글 브래킷, 꺽쇠괄호

<>

---

오픈 소스 라이선스

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

무료 라이선스

Apache License

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능.

MIT License

매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음.

BSD License

BSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스, MIT와 동일 조건.

Beerware

오픈소스 개발자에게 맥주를 사줘야 하는 라이선스.
물론 만날 수 있는 경우..