Summary

• About HTML, CSS, JS
• Web Images (Bitmap, Vector)

Notes

1. FrontEnd

HTML, CSS, JS를 사용해 데이터를 GUI로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 한다.

• Business Logic
  웹 페이지가 동작하는데 필요한, 핵심 데이터 처리 수행 알고리즘

2. HTML, CSS, JS

• HTML
  제목, 문단, 표, 이미지, 동영상 등 웹의 구조 담당

• CSS
  실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 컨텐츠를 꾸며주는 시각적, 정적 표현 담당

• JS
  컨텐츠를 바꾸고 움직이는 등 동적 처리 담당

3. 웹 표준 W3C

• Cross Browsing
  브라우저에 관계 없이 동일한 사용자 경험을 제공하는 기술

• Browser Interface
  Window, Tab, Address bar, Viewport(랜더링 되는 영역)

4. Web Images

4-1. Bitmap

픽셀이 모여 만들어진 정보의 집합. Raster 이미지라고도 한다(.jpeg .gif .png).
정교하고 다양한 색상 표현, 확대, 축소 시 계단 현상, 품질 저하의 특징이 있다.

JPG(JPEG)

• Joint Photographic coding Experts Group
• Full-color, Gray-scale의 압축을 위해 만들어졌다
• 뛰어난 압축률, 용량 조절 용이
• 손실 압축(반복 저장은 피할 것)
• 뛰어난 표현 색상도(24bit, 1600만 색상)

PNG (W3C 권장 포맷)

• Portable Network Graphics
• GIF의 대체 포맷으로 개발되었다
• 비손실 압축
• 8bit(256색상), 24bit(1600만 색상) 모두 지원
• Alpha Channel 지원(투명도). 사용할 이미지의 주변 하얀 부분 투명화

GIF

• Graphics Interchange Format
• 이미지 파일 내에 이미지 및 문자열 정보 저장
• 여러 장의 이미지를 1개 파일에 담을 수 있다(움짤, 애니메이션)
• 비손실 압축
• 8bit 색상 지원(다양한 색상 표현에는 부적합)

WEBP (IE 지원 불가)

• JPG, PNG, GIF를 모두 대체할 수 있는 이미지 포맷(구글 개발)
• 손실, 비손실 압축 모두 지원
• GIF와 같은 애니메이션 지원
• Alpha Channel 지원(손실, 비손실 모두)

4-2. Vector

점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지(.svg).
정교한 이미지(인물, 풍경) 표현이 어렵다. 확대, 축소에서 자유롭고 용량 변화가 없다.

SVG

• Scalable Vector Graphics
• 마크업 언어 기반의 벡터 그래픽 표현
• 해상도의 영향에서 자유로움
• CSS, JS로 제어 가능 (파일 및 코드 삽입 가능)

5. HTML 문서 포맷

5-1. DOCTYPE

• Document Type Definitioin
• 문서의 HTML 버전을 지정

5-2. html

• HTML 문서의 시작과 끝을 표기

5-3. head

• 브라우저가 해석할 제목, 설명, 참고 파일 위치 등 화면에 보이지 않는 정보 작성

5-4. body

• 문서의 구조를 나타내는 범위
• 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 등 화면에 보여지는 정보를 작성