MGS Day 01

W3C의 표준화 제정 단계는 크게 다음과 같이 4가지 단계를 가진다.

1. 초안(Working Draft, WD)

2. 후보 권고안(Candidate Recommendation, CR)

3. 제안 권고안(Proposed Recommendation, PR)

4. 권고안(W3C Recommendation, REC)

 

구글, 마이크로 소프트와 같은 공급업체(Browser Vendors)

크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 

동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술 ,방법.

크로스 브라우징 이슈가 점점 사라지고 있는 추세.

인터넷 익스플로러(IE)는 2020년 8월, 마이크로소프트(MS)가 모든 서비스 지원을 종료한다고 발표했다.

 

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

                              - 렌더링 : 브라우저의 뷰포트에 웹 사이트를 출력하는(그림 그려내는) 행위

 

 

웹에서 사용하는 이미지

1. 비트맵(Bitmap) : 래스터(Raster)이미지라고도 부름, 픽셀이 모여 만들어진 정보의 집합.

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

                                일반적인 사진 이미지가 비트맵에 속함.

                                 ex) jpg, png

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

                           확대/축소에서 자유로움, 용량 변화가 없음.

                           정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움.

                           단순 구조의 이미지들, 머티리얼 디자인(Material Design : 고품질 디지털 경험을 구축할 수 있도록           

                           Google에서 만든 디자인 시스템(방식))이 벡터로 구성됨. 

                           ex) svg

 

 

===============비트맵이미지===================

1. JPG(Joint Photographic coding Experts Group)(JPEG)

: Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.

손실 압축... 용량이 작음, 이미지를 새롭게 반복적으로 저장하는 것은 지양

표현 색상도(24비트, 약 1600만 색상)가 뛰어남

이미지의 품질과 용량을 쉽게 조절 가능

가장 널리 쓰이는 이미지 포맷

 

2. PNG(Portable Network Graphics)

: Gif의 대체 포맷으로 개발됨.

비손실 압축... 용량이 상대적으로 조금 더 클 수 있음

8비트(256색상)/ 24비트(약 1600만 색상) 컬러 이미지 처리

Alpha Channel 지원(투명도) ... JPG와 차이점

W3C 권장 포맷

 

3. GIF

비손실 압축

여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)

8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

 

4. WEBP

:JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷

완벽한 손실/ 비손실 압축 지원

GIF 같은 애니메이션 지원

Alpha Channel 지원(손실, 비손실 모두)

IE 지원 불가

WEBP를 웹브라우저에서 쓸 수 있느냐 없느냐 확인하는 것을 '하위호환성을 확인한다'라고 한다.

여기에서 하위라는 것은 예전 버전을 의미하겠다.

 

===============벡터이미지===================

1. SVG(Scalable Vector Graphics)

: 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷.

 해상도의 영향에서 자유로움

... 이미지의 크기를 그때 그때마다 자주 변경해야 하는 아이콘이나 로고에 자주 사용되는 포맷

CSS와 JS로 제어 가능

파일 및 코드 삽입 가능

SVG 이미지의 복잡한 코드를 CSS와 JS로 디테일하게 제어하기는 매우 어렵기 때문에,

색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용합니다.

 

 

^ (caret 캐럿) : ~ 이상

<> (angle bracket 꺽쇠 괄호)

 

 

오픈 소스 라이선스

오픈소스란 어떤 제품을 개발하는 과정에서 필요한 소스 코드나 설계도를, 누구나 접근해서 열람할 수 있도록 공개하는 것.

OpenSource.org

1. Apache License

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 

개인적/상업적 이용, 배포, 수정, 특허 신청이 가능.

2. MIT License

메사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스,

개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음.

 

여러분의 프로젝트 소스 코드에 외부에서 가져온 오픈소스의 라이선스 내용만 정확히 명시하면 충분합니다.

그런데 대부분 프로젝트에서는 자동으로 오픈소스가 같이 빌드(웹 사이트 최종 결과를 만드는 행위)되기 때문에 

따로 관리할 필요는 없습니다.

 

3. BSD LIcense(Berkeley Software Distribution)

:버클리 캘리포니아 대학에서 개발한 라이선스, MIT와 동일 조건

 

4. Beerware 

:오픈소스 개발자에게 맥주를 사줘야 하는 라이선스. 물론 만날 수 있는 경우..

 

 

 

VS Code

MacOS는 Cmd, Windows는 Ctrl 키를 사용한다.

확대하려면 위의 키와 +

 

Shift + Ctrl + P ... Show All Commands 검색창 활성화 됨

Ctrl + O ... Open File or Folder

폴더 = 디렉토리, 프로젝트 단위는 폴더

! + tab or ! + enter 키로 HTML의 기본구조를 생성시킬 수 있음

 

.vscode는 현재 프로젝트의 VS Code 설정 정보가 들어 있는 폴더입니다.

삭제해도 상관없지만, VS Code로 프로젝트를 켜면 다시 생성되니,

일반적으론 무시하면 됩니다.

보통 이름이 .(마침표)로 시작하는 파일이나 폴더는 숨김 전용 파일/ 폴더 입니다.

 

ctrl + s ... 저장

ctrl + alt + s ... 모두 저장

 

live server는 html파일에서만 동작함.

 

Live Server는 개발을 위해 임시로 로컬(나의 컴퓨터 환경) 서버를 오픈하는 것입니다.

제품(Product)은 실제 호스팅(사용자들이 접근 가능한) 서버에 업로드해야 합니다!

 

Ctrl + B ... 사이드바(Side Bar)열기/ 닫기

Ctrl + P ... 빠른 열기(파일이나 기호 탐색)

Ctrl + Shift + P ... 모든 명령 표시(에디터의 모든 명령에 접근)

Ctrl + W ... 편집기 닫기

Ctrl + F ... 찾기(검색)

Ctrl + H ... 찾기(검색)/ 바꾸기(대체)

Alt + Up ... 줄(자체가) 위로 이동

Alt + Down ... 줄(자체가) 아래로 이동

Alt + Shift + Down ... 아래에 (커서가 위치한) 줄(이) 복사

Alt + Shift + Up ... 위에 (커서가 위치한) 줄(이) 복사

 

Shift + Tab ... 내어쓰기(Outdent <-> Indent)

Ctrl + PageUp ... 이전 편집기 열기(좌측 창으로 전환)

Ctrl + Ctrl + PageDown ... 다음 편집기 열기(우측 창으로 전환)

 

Ctrl + \ ... 편집기 분할(백슬래쉬)