frontend 개요
프론트엔드 개발
HTML,CSS,JS를 사용하여 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호 작용할 수 있도록 하는 것.
HTML(구조) : 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당
CSS(스타일) : 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃)을 지정해 콘텐츠를 꾸며주는 시각적인 역할을 담당
JS(동적) : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당
웹 애플리케이션의 동작 원리
통신 프로토콜은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미한다
대표적으로 HTTP, HTTPS, FTP, SSL 등
웹 표준
웹 표준이랑 웹에서 사용되는 표준 기술이나 규칙을 의미
W3C의 표준화 제정 단계의 권고안에 해당하는 기술
크로스 브라우징
크로스 브라우징이란 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작)을 줄 수 있도록 제작하는 것
웹 이미지
비트맵 : 픽셀이 모여 만들어진 정보의 집합, 레스터 이미지라고 부름 .jpeg, .gif, .png
정교하고 다양한 색상을 자연스럽게 표현
확대/축소 시 계단현상, 품질 저하
JPG : full-color와 gray-scale의 압축을 위해 만들어졌으며 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용
손실 압축
표현 색상도 24비트 약 1600만 색상
이미지의 품질과 용량을 쉽게 조절 가능
가장 널리 쓰이는 이미지 포맷
PNG : gif의 대체 포맷으로 개발됨
비손실 압축
8비트(256색상)/ 24비트(1600만 색상) 컬러 이미지 처리
Alpha Channel 지원(투명도)
W3C 권장 포맷
GIF : 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장
비손실 압축
여러 장의 이미지를 한 개의 파일에 담을 수 있음
8비트 색상만 지원
WEBP : 위 모두 대체할 수 있는 구글이 개발한 이미지 포맷
완벽한 손실/비손실 압축 지원
GIF 같은 애니메이션 지원
투명도 지원
벡터 : 점, 선, 면 등 수학적 정보로 이루어진 이미지
확대/축소에서 자유롭다, 용량 변화가 없음 .svg
정교한 이미지를 표현하기 어렵다
SVG
마크업 언어기반의 벡터 그래픽을 표현하는 포맷
해상도의 영향에서 자유로움
CSS와 JS로 제어 가능
파일 및 코드 삽입 가능
특수기호 명칭 살펴보기
그레이브 : `
틸드, 물결 : ~
엑스클러메이션, 느낌표 : !
앳, 골뱅이 : @
샵, 넘버 사인 : #
달러 : $
퍼센트 : %
캐럿 : ^
엠퍼센드 : &
에스터리스크, 별표 : *
하이픈, 대시 : -
언더스코어, 로우 대시 : _
이퀄 : =
쿼테이션, 큰따옴표 : "
세미콜론 : ;
콜론 : :
콤마 : ,
피리어드, 닷 : .
슬래시 : /
역 슬래시 : \
버티컬 바 : |