[Web] 패스트캠퍼스 프론트엔드 강의 스터디 정리-1

회사 선배들은 대부분 Vue.js를 통해 웹 개발을 하고 있는데, 평소에 관심있게 보기도 했고

3월에 시간이 널널해서 Vue.js를 배워볼까 생각했다.

회사 동료분의 추천으로 HTML/CSS/JS를 어느정도 할줄 알아야 Vue.js 공부하기 쉽다고 해서 

패스트캠퍼스라는 강의 사이트에서 프론트엔드 개발 강의를 직접 구매해 스터디하기 시작했고,

HTML/CSS/JS 기본부터 스터디 내용을 정리해두려고 한다.

---

HTML - Hyper Text Markup Language

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당

CSS - Cacading Style Sheets

실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당

JS - JavaScript

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당

웹앱의 동작방식

1. 주소창에 페이지 주소 입력
2. 서버에 최초 요청(Request)
3. 최초 응답(Response)
4. 추가 요청
5. 추가 응답 ...

개발환경(컴퓨터) = 로컬 개발환경

웹 표준 : 웹에서 사용되는 표준 기술이나 규칙 (W3C)

크로스 브라우징(Cross Browsing) : 조금 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법

뷰포트(viewport) : 하나의 웹페이지가 출력(렌더링)되는 전체 영역

 

웹 이미지

비트맵(Bitmap) : 픽셀들이 모여서 만들어진 레스터 이미지 (jpg, png)

• 정교하고 다양한 색상을 자연스럽게 표현
• 확대/축소 시 계단 현상, 품질 저하

JPG : 손실 압축 방식 사용, 표현 색상도가 뛰어남, 이미지의 품질과 용량을 쉽게 조절 가능, 가장 널리 쓰이는 이미지 포맷

PNG : 비손실 압축 방식 사용, 8비트/24비트 컬러 이미지 처리, Alpha Channel 지원(투명도), W3C 권장 포맷

GIF : 비손실 압축, 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션), 8비트 색상만 지원

WEBP : (구글이 개발한 이미지 포맷) 완벽한 손실/비손실 압축 지원, GIF 같은 애니메이션 지원, Alpha Channel 지원 ⇒ IE 지원 불가

⚠️ 하위호환성 확인

 

벡터(Vector) : 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지 (svg)

• 확대/축소에서 자유로움, 용량 변화가 없음
• 정교한 이미지를 표현하기 어려움

SVG : 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷, 해상도의 영향에서 자유로움, CSS와 JS로 제어 가능, 파일 및 코드 삽입 가능

 

 

특수 문자 용어

그레이브(Grave)/백틱(BackTick) : `

틸드(Tilde) : ~

앳(At sign), 골뱅이 : @

캐럿(Caret) : ^ ( ~ 이상)

엠퍼센드(Ampersand) : &

에스터리스크(Asterisk) : *

쿼테이션(Quotation mark): "

아포스트로피(Apostrophe) : '

버티컬 바(Vertical bar) : |

백슬래시(Backslash) : \

퍼렌서시스(Parenthesis) 소괄호 : ()

브레이스(Brace) 중괄호 : {}

브래킷(bracket) 대괄호 : []

앵글 브래킷(Angle bracket) : <>

 

오픈 소스 라이선스

: 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것(OpenSource.org)