[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 3회차 미션

챌린저스 3회차! 🤟🏻

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 3일차입니다!

작심삼일이란 사자성어답게 사흘은 무난하게 연속으로 공부했어요. 😊

사흘 동안 워밍업 겸 머리 예열 시간을 가지며 첫걸음/개요 커리큘럼을 모두 수강했답니다.

본격적으로 프론트엔드 개발을 하기 위하여 기본 지식을 다지는 시간들이었어요.

내일부터는 HTML 공부도 열심히! 아좌좟!

 

오늘은 이미지 파일 확장자의 종류와 특수기호 명명법, 그리고 유명한 오픈소스에는 어떤 것이 있고 라이선스를 꼭 확인해야 한다는 것을 배웠어요.

(09. 이미지에 대한 이해 / 10. JPG, PNG, GIF, WEBP, SVG / 11. 특수기호 / 12. 오픈소스와 라이선스)

 

이미지의 종류에 대해서는 제가 컴퓨터 툴로 그림을 그리는 데에 익숙해서 좀 알고 있었는데요.

경험으로만 알고 있던 것들(예 - jpg는 화질이 깨지고, png는 다소 화질이 덜 깨지는 것 같다)에 대한 정확한 정보를 자세히 학습할 수 있었어요!

---

 

이미지 종류

◾ 웹에서 사용하는 이미지는 크게 2가지로 분류된다: (1) 비트맵 (2) 벡터

 

	비트맵	벡터
설명	- 픽셀 정보 집합 - 픽셀 단위로 화면에 렌더링함 - 이미지 압축 가능💥 (= 래스터 이미지)	- 수학적 정보의 형태들(=벡터)이 만들어내는 결과물 - 이미지가 가지고 있는 점, 선, 면 등의 정보를 그대로 화면에 렌더링함     ➡ 해상도에 관계없이 렌더링 가능 - 확대/축소를 해도 이미지가 깨지지 않음.     ➡ 용량 변화 X

 

◽ JPG: 높은 압축률(=적은 용량), 손실 압축, 24비트 색상 ➡ 고해상도 적합

◽ PNG: 비손실 압축, 8비트/24비트 색상 지원, Alpha Channel 지원(=투명도 지원)

◽ GIF: 비손실 압축, 움짤 생성 가능 (=여러 장의 이미지를 한 개의 파일에 담기 가능), 8비트 색상만 지원

◽ WEBP: 손실/비손실 압축 모두 지원, GIF 같은 애니메이션 지원, Alpha Channel 지원 /  / ⚠ 지원 브라우저 한계

 

◽ SVG: 마크업 언어 기반의 벡터 그래픽 표현, 해상도 영향 X, CSS나 JavaScript로 수정 가능, 코드나 파일로 사용 가능

 

특수기호 영어 명칭

`	Grave	%	Percent	=	Equals	.	Period, Dot	{}	Brace
~	Tilde	^	Caret	"	Quotation	?	Question	[]	Bracket
!	Exclamation	&	Ampersand	'	Apostrophe	/	Slash	<>	Angle Bracket
@	At	*	Asterisk	:	Colon	|	Vertical bar
#	Number, Sharp	-	Hyphen, Dash	;	Semicolon	\	Backslash
$	Dollar	_	Underscore, Low Dash	,	Comma	()	Parenthesis

 

오픈소스 라이선스

◾ 오픈소스: 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것. 보통 무료 저작권이지만 라이선스를 꼭 확인해봐야함!!!

◽ 종류: Apache License, MIT License, BSD License, Beerware 등

 

---

내용 학습 출처: https://heropy.blog/2019/04/24/html-css-starter/

강의 링크: https://bit.ly/3m0t8GM