📌 HTML/CSS/JS
HTML
- 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다.
CSS텍스트
- 실제 화면에 표시되는 방법을 지정해 콘텐츠를 꾸며주는 시각적인 표현을 담당한다.(정적)
JS
- 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당한다.
📌 웹
통신 프로토콜
- 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미한다.
- HTTP, HTTPS, FTP, SSL 등
웹앱의 동작원리
- 주소창에 페이지 주소를 입력하면 해당 주소에 맞는 서버에 최초 요청이 전송된다.
- 서버에서 최초 응답으로 HTML을 전송한다.
- 전송된 HTML에 명시된 CSS, JS, 이미지 파일 등을 추가로 서버에 요청한다.
- 서버에서 요청된 파일들을 추가로 전송한다.
- 브라우저에서 파일들이 렌더링된 모습을 확인할 수 있다.
로컬 개발 환경
- 웹 사이트를 개발하기 위해 사용중인 컴퓨터 환경을 의미한다.
웹 표준
- 웹에서 사용되는 표준 기술이나 규칙을 의미한다.
크로스 브라우징
- 여러 브라우저들이 모두 동일하게 구동되지 않기에 이를 고려해 사용자에게 동일한 경험을 줄 수 있도록 제작하는 기술, 방법을 의미한다.
- 최근에는 크로스 브라우징 이슈가 줄어드는 추세이다.
뷰포트
- 하나의 웹페이지가 출력(렌더링)되는 전체 영역을 의미한다.
📌 웹이미지
웹이미지의 방식에는 비트맵과 벡터 두 가지가 있다.
비트맵 vs 벡터
비트맵
- 픽셀이 모여 만들어진 이미지이다.
- 정교하고 다양한 색상을 자연스럽게 표현할 수 있다.
- 확대/축소가 자유롭지 않다.
벡터
- 수학적 정보의 형태로 이루어진 이미지이다.
- 확대/축소를 용량 변화없이 자유롭게 조절할 수 있다.
- 정교한 이미지를 표현하기 어렵다.
- 머터리얼 디자인에 적합하다.
- 웹에서 .svg확장자로 사용된다.
비트맵 확장자
JPG(JPEG)
- 손실 압축 방법을 사용하기 때문에 용량이 적다.
- 반복해서 저장하면 손실이 여러번 일어나 적합하지 않다.
PNG
- 비손실 압축 방법을 사용하기 때문에 용량이 더 크다.
- 투명도(Alpha Channel)를 사용할 수 있다.
- W3C에서 권장하는 포맷이다.
GIF
- 비손실 압축 방법을 사용한다.
- 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있다.
- 이를 이용해 움짤, 애니메이션을 구현할 수 있다.
- 8비트 색상만을 지원해 다양한 색상 표현에 적합하지 않다.
WEBP
- 손실/비손실 압축을 모두 지원한다
- 애니메이션, 투명도를 지원한다.
- 앞서 말한 JPG, PNG, GIF를 모두 대체할 수 있다.
- 구글이 개발했다.
- 최신에 개발된 포맷이라 지원되는 브라우저를 확인해야 한다.(하위호환성 확인)
벡터 확장자
SVG
- 해상도의 영향에서 자유롭다.
- CSS와 JS로 제어가능하다.파일 및 코드 삽입이 가능하다. (태그로 사용가능)
📌 특수기호 명칭
- ` : 백틱, 그래이브
- ~ : 틸드
- ^ : 캐럿
- & : 엠퍼센드
- *: 애스터리스크
- | : 버티컬 바
- () : 퍼렌서시스, 소괄호
- {} : 브레이스, 중괄호
- [] : 브래킷, 대괄호
📌 무료로 사용되는 라이선스
오픈 소스 라이선스
- 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것을 의미한다.
- 저작권을 확인해야 한다.
아파치 라이선스
- 아파치 소프트웨어 재단에서 만든 라이선스
- 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능하다.
MIT 라이선스
- MIT에서 학생들을 위해 개발한 라이선스
- 사용한다는 표시만 해주면 자유롭게 사용 가능하다.
BSD 라이선스
- 버클리 캘리포니아 대학에서 학생들을 위해 개발한 라이선스
- 사용한다는 표시만 해주면 자유롭게 사용 가능하다.
Beerware
- 나중에 오픈소스 개발자를 만날 경우 맥주를 사줘야 하는 라이선스
- 이 외에도 라이선스 종류는 많으며 위처럼 무료가 아닌 유료의 경우도 존재하므로 사용할 대 꼼꼼히 확인해야 한다.
📌 VS Code
주의!
- 파일명은 소문자로 관리하자.
- 프로젝트 단위는 폴더이다.
Extension
- Beautify : 코드를 가독성 좋게 정리해주는 확장기능
- Auto Rename Tag : HTML태그를 작성할 때 열린태그와 닫힌태그를 동시에 수정할 수 있는 확장기능
VScode 단축키
- Cmd + b : 사이드 바 열고/닫기
- Cmd + p : 빠른 열기(검색)
- Cmd + \ : 편집기 분할창 띄우기
