HTML + CSS + JS
웹에서 돌아가는 언어는 세가지
HTML + CSS + JS
HTML : 뼈대
CSS: 디자인
JS : 동적 처리 (생동감)
웹표준과 웹접근성
웹표준
웹에서 사용되는 표준 기술이나 규칙, W3C의 권고안에서 나온 기술
표준화 제정 단계의 ‘권고안’에 해당하는 기술
크로스브라우징
여러 브라우저에서 동일한 결과물로 보이도록 하는 방법, 기술입니다.
웹접근성
모든사용자들이 동등하게 사용할수 있는 웹을 제작하는 방법
웹 접근성 연구소
VScoode 설치및 설정
설치
VScode에서 맞는 운영체제로 다운로드를 합니다.
확장
에디터에서 확장기능을 추가합니다.
Korean Language Pack for Visual Studio Code
VS Code의 거의 모든 메뉴가 한국어로 변경됩니다.Beautify
코드의 가독성을 위해 코드 작성 스타일을 수정합니다.
- Preferences > Keyboard Shortcut 선택
- HookyQR.beautify를 검색
- 키 바인딩 선택
- 원하는 단축키 등록
“Alt + Ctrl + L”(Windows) / “Alt + Cmd + L”(macOS)을 추천
🏷 HTML 처음 작성시 ! 입력후 엔터, tab
- Live Server
현재작성한 코드를 웹브라우저에서 확인할수 있습니다.
알아두면 좋은 단축키
Preferences > Keyboard Shortcut(바로 가기 키) 에서 단축키를 확인하거나 변경할 수 있습니다.
| macOS 단축키 | 설명 |
|---|---|
| “Cmd + B” | 사이드바 열기/닫기 |
| “Cmd + P” | 빠른 열기(파일이나 기호 탐색) |
| “Cmd + Shift + P” | 모든 명령 표시(에디터의 모든 명령에 접근) |
| Cmd + F” | 찾기(검색) |
| “Cmd + Opt(Alt) + F” | 찾기(검색)/바꾸기(대체) |
| “Alt + Up” | 줄 위로 이동 |
| “Alt + Down” | 줄 아래로 이동 |
| “Shift + Alt + UpArrow” | 위에 줄 복사 |
| “Shift + Alt + DownArrow” | 아래 줄 복사 |
| “Tab” | 들여쓰기 |
| “Shift + Tab” | 내어쓰기 |
| “Cmd + Shift + [” | 이전 편집기 열기(좌측 창으로 전환) |
| “Cmd + Shift + ]” | 다음 편집기 열기(우측 창으로 전환) |
| “Cmd + \” | 편집기 분할(백슬래쉬) |
| “Cmd + 숫자” | 숫자번째 분할된 편집기 그룹에 포커스 |
| “Cmd + W” | 편집기 닫기 |
비트맵과 벡터
비트맵
- 픽셀이 모인 집합 (픽셀단위) 포토샵
- 용량 관리 용이
- 확대/ 축소시 품질저하
벡터
- 수학적공식(점, 선, 면)정보로 렌더링 일러스트
- 용량 변화가 없음
- 확대/ 축소시 품질변화 없음
오픈소스 라이선스
Apache License
아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스입니다.
개인적/상업적 이용, 배포, 수정, 특허 신청이 가능합니다.
MIT License, BSD License
라이선스 표시 해줍니다.