초격차 #1.

웹앱의 동작원리

주소창에 페이지 주소 입력  -- 최초 요청 --> 서버 -- 최초 응답 (html) --> 사용자
사용자 -- 추가 요청 --> 서버 -- 추가 응답 (css, js) --> 사용자

웹 표준과 브라우저

• 웹 표준
  웹에서 사용되는 표준 기술이나 규칙, W3C의 표준화 제정 단계인 'REC'에 해당되는 기술

• 크로스 브라우징
  여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술

인터페이스 구조

• 창 (window)
• 탭 (tab)
• 주소창 (address bar)
• 뷰포트 (viewport)
  렌더링되는 영역 (렌더링 : 브라우저의 뷰포트에 웹 사이트를 출력해내는 행위)

웹 이미지

• 비트맵 (bitmap)

  • 픽셀이 모여 만들어진 정보의 집합 (raster image)
  • .jpeg, .gif, .png
  • 정교하고 다양한 색상 자연스럽게 표현
  • 확대, 축소 시 계단 현상, 품질 저하

• 벡터 (vector)

  • 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지
  • .svg
  • 확대, 축소에서 자유로움, 용량 변화가 없음
  • 정교한 이미지 표현이 어려움
  • material image, 로고, 아이콘 등에 사용

• jpg(jpeg)

  • 손실 압축 => 용량이 획기적으로 줆
  • 이미지를 반복적으로 저장하면 손실이 크게 발생
  • 표현할 수 있는 색상과 환경이 다양
  • 용량이 작음

• png

  • 비손실 압축
  • 용량이 비교적 큼
  • alpha channel 지원 => 투명도 지원
  • gif 대체 포맷

• gif

  • 비손실 압축
  • 여러 장의 이미지를 한 개의 파일에 담을 수 있음 => 움짤, 애미메이션
  • 8비트 색상만 지원 => 다양한 색상 표현 X

• webp

  • jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
  • 완벽한 손실/비손실 압축 지원
  • gif와 같은 애니메이션 지원
  • alpha channel 지원 => 투명도 지원 (손실/비손실 모두)
  • IE 지원 불가 (하위호환성 check)

• svg

  • 마크업 언어 (html/xml) 기반의 벡터 그래픽을 표현하는 포맷
  • 해상도의 영향에서 자유로움
  • css/js로 제어 가능
  • 파일 및 코드 삽입 가능
    - svg 이미지의 복잡한 코드를 css/js로 디테일하게 제어하기는 힘듦
    • 색상이나 일부 영역의 추가/제어 혹은 간단한 형태 생성 정도