패스트캠퍼스 환급챌린지 2일차 미션 (2월 2일) : 프론트엔드개발 강의 후기

오늘의 목표

웹에서 사용하는 이미지들에 대해서 알아보고, 기본적인 기초 지식을 공부하기 시작하기.

 

 

그런데 난 왜 패스트캠퍼스를 골랐는지?

환급패키지가 있어서 골랐다. 그리고 그걸 계기로 내가 2달간 열심히 프론트엔드 공부를 할 수 있을 것 같았다.

어차피 해야하는 공부라면 나에게는 사실 어느정도의 강제성이 필요했다.

그리고 이전에 개발 관련 내용을 볼 때 항상 패스트캠퍼스에 눈이 갔다.

내가 느끼기에 패스트캠퍼스는 개발에 대해서 항상 쉽게 설명해주는 게 좋았기 때문에 이 패키지로 패스트 캠퍼스면 나는 도전!한다!ㅎㅎ

 

 

프론트엔드란?

프론트엔드라는 용어는 탐색 메뉴, 디자인 요소, 버튼, 이미지 및 그래프와 같이 사용자가 직접 상호 작용할 수 있는 그래픽 사용자 인터페이스(GUI)를 의미한다.

 

다음과 같은 세 가지 주요 컴퓨터 언어는 사용자가 프론트엔드와 상호 작용하는 방식에 영향을 미침

• HTML은 프론트엔드 구조와 다양한 DOM 요소를 정의함
• Cascading Style Sheets(CSS)는 레이아웃, 글꼴, 색상 및 시각적 스타일을 포함하여 웹 애플리케이션의 스타일을 정의함
• JavaScript는 DOM을 조작하여 동적 기능 계층을 추가함

JavaScript는 페이지의 변경을 트리거하고 새 정보를 표시할 수 있다. 즉, 프론트엔드는 캘린더를 표시하거나 사용자가 유효한 이메일 주소를 입력했는지 확인하는 등의 기본적인 사용자 상호 작용(또는 요청)을 처리할 수 있다. 프론트엔드는 더 복잡한 요청을 백엔드로 전달한다.

 

 

 

5. 웹에서 사용하는 이미지

비트맵(jpg)_정교하고 다양한 색상 표현 가능 / 확대,축소 시 깨짐

jpg - 손실압축 방식 / 이미지는 새롭게 반복적으로 저장하는 것은 피해야함. 계속 화질이 저하되기 때문에

png - 비손실압축 방식 / 알파(투명한부분 사용가능)지원 / 

Gif - 비손실압축 / 알파 지원 / jpg, png, gif 를 대체가능하지만 호환되는 브라우저가 몇 없음

Webp - 손실비손실압축 지원

➡️오 그래서 계속 깨지더라 어쩐지

 

백터(svg)_확대,축소 자유로움 화질이 좋음 / 정교한 표현 어려움

 

 

6. 특수기호

 백틱 or 그레이브

~ 틸드, 물결

!  엑스클러메이션, 느낌표

@ 앳 사인, 골뱅이

# 샵, 우물정자

$ 달러

% 퍼센트

^ 캐럿(뜻 : ~이상)

& 엠퍼센드

* 에스터리스크, 별표

- 하이픈, 대시

_ 언더스코어, 로우대시

= 이퀄스 사인

" 퀘테이션 큰따옴표

' 어퍼스트로피 작은따옴표

: 콜론

; 세미콜론

, 콤마

. 필리어드, 닷

/ 슬래시

| 버티컬바

\ 백슬래시, 역슬래시

( ) 퍼렌서시스, 소괄호

{ } 브레이스, 중괄호

[ ] 브래킷, 대괄호

<> 앵글 브래킷, 꺽쇠괄호

 

 

7. 오픈소스 라이선스

공개되어 있는 소스 _상업용 / 개인용 가능하면 (보통 무료)

 

라이선스 무료인 사이트

1. Apache License

2. MIT License

3. BSD License _버클리

4. Beerware

 

 

 

 

 

 

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완
https://bit.ly/48sS29N