2022.04.04
프론트엔드
HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고,
그것으로 사용자와 상호작용 할 수 있도록 하는 것
즉 웹페이지를 만들어 사용자가에게 보여주는 것프론트엔드 개발기술
- HTML(Hyper Text Markup Language 하이퍼텍스트 마크업 언어)
우리가 보는 **웹페이지가 어떻게 구조화**되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어- CSS(Cascading Style Sheets)
실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 **시각적인 표현(정적)**담당- JS(JavaScript)
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 **동적 처리** 담당
웹의 동작방식
1. 브라우저(크롬, 엣지, 파이어폭스, 오페라, 스윙, 웨일, 사파리)를 연다
2. 통신 프로토콜(communication protocol)은 원거리 통신 장비 사이에서 메세지를 주고 받는 양식 및 규칙의 체계
(대표적으로 http, https, ftp, ssl)
3. 최초 요청(request)이 서버로 들어감
4. 최초 응답(response) 기본적인 html이 응답됨
5. 추가요청이 들어오면 추가응답을 해줌 (css, js, jpg ...)웹 표준
# 웹에서 사용되는 표준 기술이나 규칙
기술이나 규칙은 누가 정하나? W3C에서 제정한다
# W3C 표준화 제정 단계
1. 초안
2. 후보권고안
3. 제안권고안
4. 권고안
# Corss Browsing(크로스 브라우징)이란?
어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법
지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때
정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드웹 이미지
비트맵(Bitmap)
픽셀들이 모여서 만들어짐 rater(.jpeg, .gif, .png) 정교하고 다양한 색상을 자연스럽게 표현 확대/축소시 계단현상, 품질 저하* jpg(jpeg)
손실 압축. 저장을 할때마다 이미지 손실이 되기때문에 조심해야함 표현색상 24비트 약 1600만 색상, 이미지 품질, 용량 쉽게 조절가능 투명도가 지원되지 않기때문에 흰색 영역이 포함되고 싶지 않으면 png로* png
비손실 압축 8비트(256색상),24비트(약 1600만 색상)컬러 Alpha channel 지원(투명도)* gif
이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장(움짤, 애니메이션) 8비트 색상(256) 다양한 색상표현을 할 수는 없음* wepb
jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷 손실/비손실 압축 동시 지원 gif 같은 애니메이션 지원 alpha channel 지원(손실,비손실 모두) 나온지 별로 안됐기 때문에 하위호환성을 꼭 확인해야함백터(Vector)
점, 선, 면 등 수학적 정보의 형태로 이루어진 이미지 정교한 이미지를 표현하기 어려우나 수학적인 정보로 이루어져있기 때문에 확대/축소에서 자유로움 용량 변화가 거의없음 로고, 아이콘 등 material design은 고품질 디지털 경험을 구축할 수 있도록 google에서 만든 디자인 시스템(방식) 주로 확장자가 .svg 색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용