220321 Til

웹 개요

• HTML 은 페이지의 제목, 문단, 표, 이미지, 동영상 웹의 구조를 담당한다.
• CSS 는 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현을 담당한다.(정적)
• js는 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당한다.

---

웹 브라우저

브라우저를 만든 공급업체가 각각 다른데 동일한 사용을 위한 기술이 크로스 브라우징이다.

---

웹 이미지

• JPG : 손실 압축 방식이라서 여러번 저장할수록 품질이 떨어진다. 용량을 쉽게 조절할 수 있고 용량이 적은 장점이 있다.
• PNG : 비손실 압축 방식이라서 이미지가 손실되지 않는다. 24비트 색상 지원, 단점이라면 용량이 jpg보다는 크다는 것, 투명한 영역인 알파 채널을 지원하므로 원하는 이미지 영역만 나타낼 수 있다.
• GIF : 움짤/ 애니메이션 , 다양한 색상 표현에는 적합하지 않다(8비트 색상만 지원)
• WEBP : JPG, PNG, GIF를 모두 대체 가능한 구글이 개발한 이미지 포맷, 손실/비손실 압축을 지원, 알파 채널도 지원, GIF와 같은 애니메이션 지원, 최신 포맷으로 지원되는 브라우저에 한계가 있기 때문에 하위호환성을 따져봐야한다.
• SVG : 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷, 해상도 영향이 자유롭다. 깨지지 않는다는 장점이 있음. CSS와 JS로 제어 가능, 파일 및 코드 삽입도 가능(SVG 태그가 있다.) 요즘 많이 사용됨.

---

특수 기호

` 백틱, 그레이브

~ 틸드, 물결 표시

! 엑스클러메이션, 느낌표

@ 앳(at sign), 골뱅이

’#’ 샵, 넘버, 우물 정

$ 달러 사인

% 퍼센트

^ 캐럿(이상/이하를 표현할 때)

& 앰퍼센드(ampersand)

‘*’ 에스터리스크, 별표

’-‘ 하이픈, 대시, 마이너스

_ 언더스코어, 로대시(low dash), 밑줄

= 이퀄 사인

“ 쿼테이션

‘ 작은 따옴표

’:’콜론

; 세미콜론

, 콤마

. 닷

? 퀘스쳔 마크

/ 슬래시

’

’ 버티컬 바

\ 백슬래시

() 퍼렌서시스, 소괄호

{ } 브레이스, 중괄호

[ ] 브래킷, 대괄호

<> 앵글 브래킷, 꺽쇠괄호

---

오픈소스 라이선스

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

• 개인적/상업적 이용, 배포, 수정이 가능한 라이센스들
  1. Apache license
  2. MIT License
  3. BSD License
  4. Beerware

---

VS Code

• 시작

프로젝트는 폴더/디렉토리 단위이다.

!를 누르면 html 기본구조를 자동완성 할 수 있음.

확장 탭에서 한국어 파일 설치

깔끔한 코드 만들려면 (beautify) 설치하고 ctrl+alt+l 단축키 설정하기

닫힘태그까지 한번에 쉽게 변경하려면 확장에서 auto rename tag 설치

기본 tab키 공백 2개 권장함(shift + tab : 내어쓰기)