20210523 Base01 : 웹표준, 크로스 브라우징, 브라우저 구성, Emmet, 특수문자 읽는법, 웹에서 사용하는 이미지 확장자, 저작권 라이센스, vscode extensions 및 단축키, CSS reset(스타일 초기화)

Base01 : 기타 사전 지식들

웹 표준

• 웹표준 : 웹에서 사용되는 표준 기술이나 규칙 (W3C에서 표준화를 제정함)
• W3C의 표준화 제정 단계의 권고안(REC)에 해당하는 기술
• 단계 : 초안(WD) - 후보권고안(CR) - 제안권고안(PR) - 권고안(REC)
• 크로스 브라우징 : 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법
• 크로스 브라우징 이슈 가 존재하지만 요즘에는 통일화 되면서 줄어 들고 있다.

브라우저 창 구성

• window : 브라우저 전체
• tab : 창안에서 페이지 하나 하나 이동 가능한 목차 부분
• address bar : 주소창
• viewport : 하나의 페이지가 렌더링 되는 부분
• 
  
  
  

Emmet (에밋)

• 간단한 몇가지 코드만 입력해서, 자동으로 완전한 HTML 코드 생성함
• 예시) div>ul>li*4{$}
• CSS의 선택자를 활용함, *기호는 곱하기, {} 내용 삽입, $는 순서대로 숫자 입력을 의미함

<!-- div>ul>li*4{$} -->
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

특수 문자

기호	이름
\	백틱(Backtick), 그레이브(Grave)
~	틸드(Tilde), 물결표시
!	엑스클러메이션(Exclamation mark), 느낌표
@	앳 사인(At sign), 골뱅이
#	샵 (sharp), 넘버(Number sign), 우물 정
$	달러
%	퍼센트
^	캐럿(Caret)
&	엠퍼센드(Ampersand)
*	에스터리스크(Asterisk), 별표
-	하이픈, 대시, 마이너스
_	언더스코어(Underscore), 로대시(Low dash), 밑줄
=	이퀄(Equals), 동등
”	쿼테이션(Quotation mark), 큰 따옴표
’	아포스트로피(Apostrophe), 작은 따옴표
:	콜론
;	세미콜론
,	콤마, 쉼표
.	피리어드, 닷, 마침표
?	퀘스천, 물음표
/	슬래시
|	버티컬 바
\	백 슬래시, 역 슬래시
()	퍼렌서시스, 소괄호, 괄호
{}	브레이스, 중괄호
[]	브래킷, 대괄호
<>	앵글 브래킷, 꺽쇠괄호

웹에서 사용하는 이미지

웹 이미지

• 비트맵 : 픽셀이 모여 만들어진 정보의 집합(레스터 이미지) -> .jpeg, .gif, .png
  • 정교하고 다양한 색상을 자연스럽게 표현. 확대/축소시 계단 현상으로 품질 저하 발생
• 벡터 : 점, 선, 면의 위치(좌표), 색상등 수학적 정보의 형태로 이루어진 이미지 -> .svg
  • 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움
  • 확대 축소를 해도 용량의 변화도 없고 손상도 없음
  • 로고와 같이 Material Design(머터리얼 디자인)

비트맵

• JPG(JPEG) : Full-color, Gray-scale의 압출을 위해서 만들어짐, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용

  • 손실압축 (용량이 줄어듦음)
  • 표현 색상도(24비트, 약 1600만 색상)
  • 이미지의 품질과 용량을 쉽게 조절 가능함
  • 가장 널리 쓰이는 이미지 포맷
  • 반복적으로 새로 저장하는 행위를하면 안된다.(손실 압축되므로 계속 품질이 저하 되니까)
  • 투명 영역이 없음

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

  • 비손실 압축
  • 8비트(256) / 24비트(1600만 색상) 컬러 이미지 처리
  • Alpha Channel 지원 (투명한 영역부분 사용 가능함, 보통 배경)
  • W3C 권장 포맷

• GIF : 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장.

  • 비손실 압축
  • 여러 장의 이미지를 한 개의 파일에 담을 수 있음
  • 움짤, 애니메이션
  • 8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

• WEBP : 구글이 개발한 이미지 포맷

  • 완벽한 손실, 비손실 압축을 동시에 지원
  • GIF 같은 애니메이션 지원
  • Alpha Channel 지원(손실, 비손실 모두)
  • 지원되는 브라우저 꼭 확인 할 것! (지원 안하는 곳도 있음, 하위 호환성 주의)

벡터

• SVG : 마크업 언어(html/xml) 기반의 벡터 그래픽을 표현하는 포맷
  • 해상도의 영향에서 자유로움
  • CSS, JS로 제어 가능
    • (복잡해서 디테일 하게는 어렵지만 색상, 일부 영역 추가 제거 , 간단한 형태 생성정도는 가능)
  • 이미지의 크기나 모양이 자주 변경되는 환경에서 자주쓰는 포맷임
  • 파일 및 코드로 이미지 삽입 가능

오픈 소스 라이선스

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

무료로 해석될 수 있는 저작권들

• Apache License : 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능.
• MIT License : 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음 (외부에서 가져온 오픈소스의 라이선스 내용만 정확히 명시하면 됨, 대부분의 프로젝트에서는 자동으로 오픈 소스가 같이 빌드되기 때문에 관리할 필요는 없음)
• BSD License : 버클리 캘리포니아 대학에서 개발한 라이선스, MIT와 동일
• Beerware : 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스.

vscode extensions

prettier

• 코드 깔끔하게 인덴트 등의 형식을 만들어줌

Auto Rename Tag

• 닫히는 태그를 자동으로 같이 변경해줌

Live server

• html 파일에서 동작함
• 개발을 위해 임시로 로컬 서버를 오픈하는 것임(실제 제품은 호스팅(사용자가 접근가능한) 서버에 업로드 해야 함)
• 파일이 수정되고 저장되면 바로 반영됨
  • ctrl + k s : 모두 저장

vscode 단축키

• ctrl + b : 왼쪽 패널
• ctrl + p : 파일 검색 및 띄우기
• ctrl + shift + p : 모든 명령 표시

reset css (브라우저 스타일 초기화)

• reset-css : jsdelivr

<link rel="stylesheet" href="리셋 CSS url" />