FASTCAMPUS ST-FE 3기
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 - Ch.1 개요
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 - Ch.2 VS Code
HTML/CSS/JS
HTML : 뼈대, 구조
CSS : 시각적 표현 , 정적 디자인
JAVASCRIPT : 컨텐츠를 움직임, 동적 처리
01. 웹앱의 동작원리
통신 프로토콜 (Communication Protocol, 통신규약)
컴퓨터나 원거리 통신장비에서 메시지를 주고받는 양식 및 규칙의 체계
ex) HTTP, HTTPS, FTP, SSL
02. 웹 표준과 브라우저
2.1 웹 표준
웹에서 사용되는 표준 기술이나 규칙, W3C의 표준화 제정 단계의 권고안에 해당
💡 W3C의 표준화 제정 4 단계
1. 초안 (Working Draft, WD)
2. 후보 권고안 (Candidate Recommendation, CR)
3. 제안 권고안 (Proposed Recommendation, PR)
4. 권고안 (W3C Recommendation, REC)
2.2 크로스 브라우징
다양한 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술
특정 css 각 브라우저 버전별 확인가능성 체크
2.3 window / viewport
window화면 전체 / vieport 렌더링 되는 화면
03. 웹에서 사용하는 이미지
| 비트맵 | 벡터 |
|---|---|
| 정교, 다양한 색상 | 정교한 이미지 표현의 어려움 |
| 확대축소시 계단현상 | 확대축소에서 자유로움 |
| JPG 압축률 훌륭, 단 여러번하면 손상O, 용량이 적음 | 마크업언어 기반 그래픽 표현, CSS와 JS로 제어가능, 파일과 코드 삽입가능 |
| PNG 투명도 지원 | |
| GIF 움짤, 애니메이션 | |
| WEBP 구글개발, 애니메이션, 투명도 지원 |
04. 특수기호의 명칭
` 백틱
~ 틸드
@ 앳
^ 캐럿
& 앰퍼센드
*(별) 애스터리스크
' 아포스트로피, 작은따옴표
: 콜론
; 세미콜론
| 버티컬바, 역슬래시
05. 오픈소스 라이센스
Apache License 제약, 특허권에 대한 책임 x
MIT License 특허권 명시 o
GNU General Public License v3.0 의무사항이 존재함.
VSCode
01. 확장 플러그인
한글화
korean Language Pack for Visual Studio Code
줄 맞춤
Beautify
태그 이름 한번에 변경
Auto Rename Tag
브라우저 출력
Live Server
02. 단축키
.html에서 ! + tab키 Doctype / html / head 등 html 기본 구조 생성
Ctrl + B 사이드바 열고/닫기
Ctrl + P 탐색기 빠르게 열기
Ctrl + Shift + P 모든 명령 표시 (에디터의 모든 명령에 접근)
Ctrl + W 편집기 닫기
Ctrl + F 찾기
Ctrl + H 검색/대체
Alt + up방향키 줄 위로 이동
Alt + down방향키 줄 아래로 이동
Alt + Shift + Down 아래에 줄 복사
Alt + Shift + Up 위에 줄 복사
Ctrl + Z 실행 되돌리기
Tab 들여쓰기
Shift + Tab 내어쓰기
수정하고자하는 영역 전체 선택 + Ctrl + Alt + L 한번에 beautify 정렬
Ctrl + | 편집기 분할
