html,css,js
- 프론트엔드
html, css, js를 사용해 데이터를 그래픽 사용자 인터페이스로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것.
즉 html,css,js로 웹페이지를 만들어서 사용자에게 보여주는것.
HTML : 웹의 구조를 담당 (like 기획자)
HTML + CSS : 싱제 화면에 표시되는 방법 (like 디자이너)
JS : 페이지의 동작(동적 처리)
html css js 를 배우는 과정에서 사고하는 방식를 잘 변화시켜야 될거같다.
웹 앱의 동작원리
- 사용자 컴퓨터(브라우저)
1.서버 요청 (Request)
3.HTML에 맞게 추가 요청 - 서버
2.응답 (Response) (HTML)
4.추가 응답 (CSS, JS, JPG)
웹 표준과 브라우저
웹에서 사용되는 표준 기술이나 규칙
- W3C의 표준화 제정 단계
- 초안(Working Draft, WD)
- 후보권고안(Candidate Recommendation, CR)
- 제안권고안(Proposed Recommendation, PR)
- 권고안(W3C Recommendation, REC)
-
크로스 브라우징
서로 다른 브라우저에서 사용자에게 동일한 경험을 줄 수 있도록 제작하는 기술 -
브라우저
Window
Tab
Address Bar
Viewport
웹 이미지
- Bitmap
픽셀이 모여 만들어진 정보의 집합
Raster 이미지 라고도 부른다
정교하고, 다양한 색상 표현
확대, 축소 시 계단 현상 (품질 저하)
jpg, png
- jpeg
full-color와 gray-scale의 압축을 위해 만들어짐
압축률이 좋음 (손실 압축)
24비트
가장 널리 쓰이는 이미지 포맷
- png
gif 대체 포맷
비손실 압축
8비트 / 24비트
Alpha Channel 지원 (투명도)
W3C 권장 포맷
- gif
이미지 파일 내에 이미지 및 문자열 저장
비손실 압축
여러장의 이미지를 한개의 파일에 담을 수 있음
8비트만 지원
- webp
jpg, png, gir 모두 대체 가능
완벽한 손실/비손실 압축 지원
gif 같은 애니메이션 지원
Alpah Channel 지원
IE 지원불가
- Vector
점, 선, 면의 위치(좌표), 색상 등
수학적 정보의 형태로 이루어진 이미지
정교한 이미지 표현 어렵
확대, 축소가 자유로움
- svg
마크업 언어 기반의 벡터 그래픽을 표현하는 포맷
해상도의 영향에서 자유로움
CSS와 JS로 제어 가능
파일 및 코드 삽입 가능
❕특수기호
| 기호 | 이름 |
|---|---|
| ` | Backtickm Grave |
| ~ | Tilde |
| ! | Exclamation mark |
| @ | At sign |
| # | Sharp, Number Sign |
| $ | Dollar sign |
| % | Percent sign |
| ^ | Caret |
| & | Ampersand |
| * | Asterisk |
| - | Hyphen, Dash |
| _ | Underscore, Low dash |
| = | Equals sign |
| " | Quotation mark |
| ' | Apostrophe |
| : | Colon |
| ; | Semicolon |
| , | Comma |
| . | Period, Dot |
| ? | Question mark |
| / | Slash |
| \ | Backslash |
| | | Vertical bar |
| ( ) | Parenthesis |
| { } | Brace |
| [] | Bracket |
| <> | Angle Bracket |
🌹오픈소스 라이선스
APACHE
MIT License (표시)
BSD License (표시)
Beerware
