Frontend - 개요

각각의 역할

• HTML (Hyper Text Markup Language) : 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당
• CSS (Cascading Style Sheets) : 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당
• JS(Java Script) : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당

웹앱의 동작 방식

웹 표준과 브라우저

• 웹 표준 : 웹에서 사용되는 표준 기술이나 규칙, W3C의 표준화 제정 단계의 ‘권고안(REC)’에 해당되는 기술
• 크로스 브라우징 (cross browsing) : 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법.

용어

• Viewport : 하나의 웹 페이지가 출력(rendering)되는 전체 영역을 의미

웹에서 사용하는 이미지

• raster : 픽셀이 모여서 만들어진 정보의 집합(비트맵), 레스터 이미지 라고 부름(ex : .jpeg, .gif, .png). 정교하고 다양한 색상을 자연스럽게 표현. 확대/축소 시 계단 현상, 품질 저하.
  • JPG : Full-color와 Gray-scale의 압축을 위해 만들어졌다. 암축률이 훌륭해 사진이나 예술 분야에서 많이 사용한다.
  • PNG : Gif의 대체 포맷으로 개발됨. 비손실 압축
  • GIF : 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장. 여러 장의 이미지를 한 개의 파일에 담을 수 있음. 8bit만 지원
  • WEBP : JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷. 완벽한 손실/비손실 압축 지원. GIF 같은 애니메이션 지원. Alpha Channel 지원(손실, 비손실 모두)
• vector : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(shape)로 이루어진 이미지.(.svg) 확대/축소에서 자유로움, 용량 변화가 없음. 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움. 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷. 해상도의 영향에서 자유롭다. CSS와 JS로 제어 가능하다. 파일 및 코드 삽입이 가능하다.