1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2

특수 문자 용어

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

---

오픈소스 라이선스

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

 

우리가 사용할 수 있는 무료로 해석될 수 있는 라이선스

ApacheLicense

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능

MIT License

매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음

BSD License

BSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스, MIT와 동일 조건

Beerware

오픈소스 개발자에게 매주를 사줘야 하는 라이선스, 물론 만날 수 있는 경우(^^)

 

오픈소스라 해서 무작정 사용하는 것이 아니라 라이선스들을 처음부터 확인해야 함

---

VSCode 

HTML 기본구조 자동완성

첫번째 메뉴에서 !를 누른 상태에서 탭키를 누르거나 엔터키를 눌러서 HTML에 기본구조를 자동완성 할 수 있음

 

auto rename tag

앞쪽에 있는 태그와 뒤쪽에 있는 태그는 같은 한세트이기때문에 앞에 있는 이름을 바꾸면 뒤에 있는 이름도 바꿔야함

앞이나 뒤쪽에 이름을 바꾸면 자동으로 한세트이 다른 태그도 바꿀 수 있도록 도와주는 모듈

 

저장

저장 단축키: Ctrl + S

모두 저장 단축키: Alt + Ctrl + S

 

Live Server

VS Code에서 설치할수 있는 확장 기능

VS Code를 실행해서 화면 왼쪽의 퍼즐 모양의 아이콘을 클릭한 다음 검색창에 live server을 검색

install을 눌러 설치하면 VS Code 오른쪽 아래에 Go Live라는 아이콘이 생기게 됨

Live Server을 사용하면 프로젝트를 브라우저에 기본적으로 출력해서 작성하는 내용이 화면에 어떻게 나오는지 수시로 확인할 수 있음(실시간 확인 가능)

Live Server는 개발을 위해 임시로 로컬(자신의 컴퓨터 환경) 서버를 오픈하는 것. 제품은 실제 호스팅(사용자들이 접근 가능한) 서버에 업로드 해야함

 

단축키

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

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

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

찾기: Ctrl + F

줄 위/아래로 이동: Alt + Up/Down

위/아래로 줄 복사: Alt + Shift + UP/Down

되돌리기: Ctrl + Z

들여쓰기: Tab

내어쓰기: Shift + Tab

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

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

편집기 분할: Ctrl + \

 

공백2로 바꾸기

공백을 사용한 들여쓰기를 기본 4에서 2로 바꿈

들여쓰기된 공백이 달라짐