프론트엔드 개발
HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고,
그것으로 사용자와 상호작용할 수 있도록 하는 것
HTML(Hyper Text Markup Language)
페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당
CSS (Cascading Style Sheets)
실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당
JavaScript
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당
웹 애플리케이션의 동작원리
통신 프로토콜(Communication Protocol, 통신 규약)텍스트
컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계
대표적으로 HTTP, HTTPS, FTP, SSL 등이 있음
웹 표준과 브라우저
웹 표준
웹 표준(Web Standard)이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미
W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술
W3C의 표준화 제정단계
1. 초안(WD)
2. 후보권고안(CR)
3. 제안권고안(PR)
4. 권고안(REC)
크로스 브라우징
크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저(크롬, 파이어폭스...)에서,
동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법
뷰포트(Viewport)
웹 페이지가 출력되는 영역
웹에서 사용하는 이미지
비트맵(Bitmap)
픽셀이 모여 만들어진 정보의 집합, 레스터(Raster)이미지라고도 부름
ex) .jpeg, .gif, .png
- 정교하고 다양한 색상을 자연스럽게 표현
- 확대/축소 시 계단 현상, 품질 저하
JPG(JPEG)
JPG은 Full-color와 Gray-scale의 압축을 위해 만들어졌으며,
압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.
- 손실 압축(저장시마다 압축 => 용량이 작아지나 이미지 손실 위험 존재)
- 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
- 이미지의 품질과 용량을 쉽게 조절 가능
- 가장 널리 쓰이는 이미지 포맷
PNG
PNG는 Gif의 대체 포맷으로 개발됨.
- 비손실 압축 (이미지 품질 보존에는 용이하나 jpg에 비해 용량이 클 수 있음)
- 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
- Alpha Channel 지원 (투명도)
- W3C 권장 포맷
GIF
GIF는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장.
- 비손실 압축
- 여러 장의 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션)
- 8비트 색상만 지원 (다양한 색상 표현에는 적합하지 않음)
WEBP
JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.
- 완벽한 손실/비손실 압축 지원
- GIF 같은 애니메이션 지원
- Alpha Channel 지원 (손실, 비손실 모두)
- IE 지원 불가
벡터(Vector)
점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지
ex) .svg
- 확대/축소에서 자유로움, 용량 변화가 없음
- 정교한 이미지(인물, 풍경사진 등의)를 표현하기 어려움
SVG
SVG는 마크업 언어(HTML/XML)기반의 벡터 그래픽을 표현하는 포맷.
- 해상도의 영향에서 자유로움 (아이콘, 로고 등에 사용)
- CSS와 JS로 제어 가능
- 파일 및 코드 삽입 가능 (색상, 일부 영역의 추가/제거, 간단한 형태 생성 정도로 가볍게 사용함)
특수 기호
: 백틱 그레이브
~ : 틸드, 물결 표시
! : 엑스클러메이션, 느낌표
@ : 앳, 골뱅이
# : 샵, 넘버, 우물 정
$ : 달러
% : 퍼센트
^ : 캐럿 (~이상임을 표현)
& : 엠퍼센드
* : 에스터리스크, 별표
- : 하이픈, 대시, 마이너스
_ : 언더스코어, 로대시, 밑줄
= : 이퀄, 동등
" : 쿼테이션, 큰 따옴표
' : 아포스트로피, 작은 따옴표
: : 콜론
; : 세미콜론
, : 콤마, 쉼표
. : 피리어드, 닷, 점, 마침표
? : 퀘스천, 물음표
/ : 슬래시
| : 버티컬 바
\ : 백슬리시, 역 슬래시
() : 퍼렌서시스, 소괄호, 괄호
{} : 브레이스, 중괄호
[] : 브래킷, 대괄호
<> : 앵글 브래킷, 꺽쇠괄호
오픈소스 라이선스
- 오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를,
누구나 접근해서 열람할 수 있도록 공개하는 것. - 저작권 확인 필요
Apache License
- 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스
- 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능
MIT License
- MIT에서 소프트웨어 학생들을 위해 개발한 라이선스
- 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음
- 대부분의 프로젝트에서는 자동으로 오픈소스가 같이 빌드되므로 따로 관리할 필요없음
BSD License
- 버클리 캘리포니아대학에서 개발한 라이선스
- MIT와 동일조건
Beerware
- 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스 (만나게 되면..)
