패스트캠퍼스 챌린지 1일차 - Part.1 개요 / VS Code

1) 개요

1. 첫 인사 및 강의 개요

프론트엔드 개발 : HTML, CSS, JS를 이용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것.

2. HTML / CSS / JS

HTML : 웹의 구조 담당

CSS : 시각적인 표현(정적) 담당

JS : 동적 처리 담당

3. 웹앱의 동작원리

1. 페이지 주소 입력 → 최초 요청 (Request) → 서버
2. 서버 → 최초 응답 (Response)(HTML) → 브라우저
3. 브라우저 → 추가 요청 → 서버
4. 서버 → 추가 응답 (CSS, JS, JPG 등) → 브라우저

4. 웹 표준과 브라우저

웹 표준 : 웹에서 사용되는 표준 기술이나 규칙. W3C에서 제정. 브라우저 공급업체도 웹 표준에 맞게 해석.

크로스 브라우징 : 브라우저마다 조금씩 다르게 구동되어도 동일하게 표현할 수 있도록 제작하는 기술.

화면의 기본적 인터페이스

• 창(Window)
• 탭(Tab)
• 주소창(Address bar)
• 뷰포트(Viewport) : 웹 페이지가 출력되는 전체 영역

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

• 비트맵 : 픽셀 사용. 정교하고 다양한 색상 자연스럽게 표현. 확대/축소 시 계단 현상, 품질 저하.
• jpg : 손실 압축 방식. 용량🔻
• png : gif 대체 포맷. 비손실 압축(용량🔺), 알파 채널(투명도) 지원
• gif : 이미지 파일 내 이미지 및 문자열 같은 정보 저장. 비손실 압축. 다양한 색상x
• webp : 손실/비손실 압축 지원, 애니메이션 지원, 알파 채널 지원 / IE 지원 불가
• svg : 벡터 그래픽 표현 포맷. 해상도 영향 자유로움. 코드로 삽입 가능 (<svg> 태그)
• 벡터 : 수학적 정보 이용. 확대,축소에서 자유로움. 정교한 이미지 표현 어려움.

6. 특수 기호

• 백틱, 그레이브 ₩
• 틸드, 물결 표시 ~
• 캐럿 ^ (이상)
• 엠퍼센드 &
• 버티컬 바 |
• 백슬래시 \

7. 오픈소스 라이선스

오픈 소스도 저작권 확인해야 함.

1. Apache License : 개인/상업적 이용, 배포, 수정 특허 신청 가능
2. MIT License : 제약x, 사용 표시해야 함.
3. BSD License : MIT와 동일
4. Beerware : 개발자한테 맥주 사줘야 하는 라이선스.

2) VS Code

1. 설치 및 실행

https://code.visualstudio.com/

설치 및 실행은 해봤어서 넘겼음.

cmd +/- : 확대, 축소

2. 파일 생성과 삭제

• 파일 이름은 소문자로 관리
• 프로젝트는 폴더 단위
• !누르고 탭/엔터 누르면 기본 구조 자동완성

3. 한글화

Extension - Korean Language Pack for VS Code

4. 정리된 코드 만들기 (Beautify)

div 누르고 탭/엔터 누르면 태그 자동으로 작성

Extension - Beautify

기본 설정 - 바로가기 키 열기 - HookyQR.beautify 더블 클릭 - alt + cmd + l 로 단축키 설정

5. 태그 이름을 한 번에 변경 (Auto Rename Tag)

Extension - Auto Rename Tag

6. 브라우저에 출력(Live Server)

Extension - Live Server

7. 단축키 & 공백2로 만들기

cmd + b : 사이드바 열기/닫기

cmd + p : 빠른 열기

cmd + shift + p : 모든 명령 표시

cmd + w : 편집기 닫기

cmd + f : 찾기

cmd + alt + f : 바꾸기

alt + up/down : 위/아래 줄 이동

alt + shift + up/down : 위/아래 줄 복사

공백을 사용한 들여쓰기 숫자 바꾸면 공백 크기 바뀜

shift + tab : 공백 조정

cmd + shift + [/] : 탭 이동

cmd + \ : 창 분할

cmd + d : 메뉴 열기 닫기

1일차 강의라 이미 아는 내용이 대부분이었기 때문에 편안한 마음으로 들었다. 
오랜만에 웹 개발 다시 시작한 만큼 열심히 해야지!

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.