01. 첫 인사 및 강의 개요
프론트 엔드 개발 ?
- HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것.
02. HTML, CSS, 그리고 JS
HTML( Hyper Text Markup Language) - 기획자
- 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.
CSS(Cascading Style Sheets) - 디자이너
- 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시간적인 표현(정적)을 담당
JS(JavsScript) - 개발자
- 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당
+ 제작된 웹사이트(웹 애플리케이션, 웹앱) 를 제품(Product)이라고 부르기도 함.
03. 웹앱의 동작원리
통신프로토콜(Communication Protocol, 통신규약)은 컴퓨터나 원거리통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미한다.
대표적으로 HTTP, HTTPS, FTP, SSL 등이 있다.
주소창에 페이지주소 입력 > 1. 최초 요청(Request) > 서버 > 2. 최초 응답(Response) > 렌더링(Rendering) - 사용자 컴퓨터 브라우저 > 추가요청 > 서버 > 추가 응답 (CSS, JS, JPG...)
* 웹사이트를 개발할 우리의 컴퓨터 환경을 '로컬(Local)개발 환경'이라고 부른다.
04. 웹표준과 브라우저
웹 표준
웹표준(Web Standard)이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미, W3C의 표준화 제정 단계의 권고안(REC)에 해당하는 기술
* W3C의 표준화 제정단계는 크게 다음과 같이 4단계를 가짐.
1) 초안(Working Draft, WD)
2) 후보권고안(Candidate Recommendation, CR)
3) 제안권고안(Proposed Recommendation, PR)
4) 권고안(W3C Recommendation, REC)
* 브라우저 공급업체(Browser Vendors) - 예) Chrome, Microsoft Edge
크로스 브라우징
크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법
예) 크롬, 엣지, 파이어폭스, 오페라, 스윙, 웨일, IE(서비스종료), 사파리
05. 웹에서 사용하는 이미지
웹 이미지
비트맵(Bitmap)과 벡터(Vector)
- 비트맵 : 픽셀이 모여 만들어진 정보의 집합, 레스터(Rester)이미지라고도 부름 예) .jpg, .png
정교하고 다양한 색상을 자연스럽게 표현, 확대/축소 시 계단 현상, 품질저하
- 벡터 : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지 예) .svg확대/축소에서 자유로움, 용량 변화가 없음, 정교한 이미지(인물, 풍경사진 같은)를 표현하기 어려움
* Meterial Design(머터리얼 디자인)은 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방식)이다.
JPG(JPEG)
- JPG(Joint Photographic coding Experts Group)는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술분야에서 많이 사용- 손실 압축, 표현색상도(24비트, 약 1600만 색상)가 뛰어남, 이미지의 품질과 용량을 쉽게 조절가능, 가장 널리 쓰이는 이미지 포맷
PNG
- PNG(Protable Network Graphics)는 Gif 의 대체 포맷으로 개발됨.- 비손실 압축, 8비트(256색상) / 24비트(약 1600만 색상) 컬러 이미지 처리, Alpha Channel 지원(투명도), W3C 권장 포맷
GIF
- GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장- 비손실 압축, 여러장의 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션), 8비트 색상만 지원(다른 색상표현에는 적합하지 않음)
WEBP
- JPG, PNG, GIF 를 모두 대체할 수 있는 구글이 개발한 이미지 포맷 - 완벽한 손실/비손실 압축지원, GIF같은 애니메이션지원, Alpha Channel지원(손실, 비손실 모두), IE지원 불가
SVG
- SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML)기반의 벡터 그래픽을 표현하는 포맷
- 해상도의 영향에서 자유로움, CSS와 JS로 제어가능, 파일과 코드 삽입 가능
06. 특수 기호
특수문자 용어
- 특수문자의 영어/한글 이름과 키보드 위치
` : Backtick, Grave (백틱, 그레이브)- 숫자 1 옆에 위치
~ : Tilde (틸드, 물결표시)
! : Exclamation mark (엑스클러메이션, 느낌표)
@ : At sign(앳, 골뱅이)
# : Sharp, Number sign (샵, 넘버, 우물 정)
$ : Dollar sign (달러)
% : Percent sign (퍼센트)
^ : Caret (캐럿)
& : Ampersand (엠퍼센드)
* : Asterrisk(에스터리스크, 별표)
- : Hyphen, Dash (하이픈, 대시, 마이너스)
_ : Underscore, Low dash(언더스코어, 로대시, 밑줄)
= : Equals sign (이퀄, 동등)
" : Quotation mark (퀘테이션, 큰 따옴표)
' : Apostrophe (아포스트로피, 작은 따옴표)
: : Colon (콜론)
; : Semicolon(세미콜론)
, : comma(콤마)
. : Periond Dot(피리어드, 닷, 점, 마침표)
? : Question mark (퀘스천, 물음표)
/ : Slash (슬래시)
| : Vertical bar (버티컬 바)
\ : Backslash (백슬래시, 역 슬래시)
( ) : Parenthesis(퍼렌서시스, 소괄호, 괄호)
{ } : Brace(브레이스, 중괄호)
[ ] : Bracket(브래킷, 대괄호)
< > : Angle Bracket (앵글 브래킷, 꺽쇠괄호)
07. 오픈 소스 라이선스
오픈 소스 라이선스(OpenSource.org)
: 오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것
Apache License
: 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능
MIT License
: 매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음
BSD License
: BSD(Berkeley Software Distribution)는 버클리 캘리포니아 대학에서 개발한 라이선스 , MIT와 동일조건
Beerware
: 오픈소스 개발자에게 맥주를 사줘야하는 라이선스