개요

HTML, CSS, JS의 차이점

• HTML은 구조화 : 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당합니다.
• CSS는 꾸미기 : 마크업 언어(HTML, XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당
• JS는 생동감 : 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적 처리를 담당

 

웹표준

• 웹 표준(Web Standard)이란 ‘웹에서 사용되는 표준 기술이나 규칙’을 의미하며 W3C의 권고안에서 나온 기술들이 여기에 해당한다.
• 대부분의 경우 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술을 표준이라고 생각하면 된다.

 

크로스 브라우징

크로스 브라우징(Cross Browsing)은  조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법 등을 말한다.

 

웹 접근성

웹 접근성이란 정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법을 말한다.

 

웹 개발을 위한 에디터

1. Sublime Text
2. Atom
3. Brackets
4. VS Code
5. WebStorm

VS Code의 확장기능

1. Korean Language Pack for Visual Studio Code

: VS Code의 거의 모든 메뉴가 한국어로 변경된다.

 

2. Beautify

: 코드 가독성을 위해 코드 작성 스타일을 (아름답게) 수정한다. 

1. Preferences > Keyboard Shortcut 선택
2. HookyQR.beautify를 검색(HookyQR.beautifyFile 아니에요!)
3. 키 바인딩 선택
4. 원하는 단축키 등록  [Alt + Ctrl + L]

3. Live Server

1.  하단 상태 바(Status bar)에서 Go Live 선택
   
2. HTML 화면에서 우클릭 > Open with Live Server 선택

4. Auto Rename Tag

: 태그 이름을 수정할 때 열린 태그와 닫힌 태그가 쌍으로 수정

 

5. live sass compiler

6. terminal

7. highlight matching tag

8. gitlens

 

단축키 (Window)

- 파일 > 기본설정 > 바로 가기 키

1. "Ctrl + F" : 단어 찾기

2. "Ctrl + H" : 해당 단어 변경하기

3. “Ctrl + \” : 편집기 분할

4. “Ctrl + W” : 편집기 닫기

 

- 약어로 랩핑

1. 랩핑할 코드 선택
2. 모든 명령 표시 실행  (“Ctrl + Shift + P”)
3. Emmet: Wrap with Abbreviation(Emmet: 약어로 랩핑)를 입력하거나 목록에서 선택(“Enter”)
4. div, span 등의 Emmet 문법(ex: .wrapper, span.bold)을 입력
5. 완료(“Enter”)

이미지

- 비트맵 : 비트맵(Bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지, 픽셀 단위로 화면에 렌더링

- 벡터 : 수학적 정보의 형태(Shape)들이 만들어내는 결과물.
이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링, 확대 및 축소를 해도 이미지가 깨지지 않는다.

 

이미지 종류	장점	단점
비트맵	정교하고 다양한 색상을 자연스럽게 표현	확대/축소 시 계단 현상, 품질 저하
벡터	확대/축소에서 자유로움, 용량 변화가 없음	정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움

1. JPG 

:JPG(Joint Photographic coding Experts Group) Full-color와 Gray-scale의 압축을 위해 만들어졌으며 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용

• 손실 압축
• 표현 색상도(24비트, 약 1600만 색상) 뛰어나 고해상도 표시장치에 적합
• 이미지의 품질과 용량을 쉽게 조절 가능
• 가장 널리 쓰이는 이미지 포맷
• 높은 압축률(적은 용량)

2. PNG

:PNG(Portable Network Graphics)는 Gif의 대체 포맷

• 비손실 압축
• 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
• Alpha Channel 지원(투명도)
• W3C 권장 포맷
• 투명도 지원

3. GIF

:GIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있다.

• 비손실 압축
• 여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
• 8비트 컬러만 지원(다양한 색상을 표현하는 작업에는 적합하지 않음)

4.WEBP

: JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷

• 완벽한 손실/비손실 압축 지원
• GIF 같은 애니메이션 지원
• Alpha Channel 지원(손실, 비손실 모두)

5. SVG

: SVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷

• 해상도의 영향에서 자유로움
• CSS로 Styling 가능
• JavaScript로 Event Handling 가능
• 코드 혹은 파일로 사용 가능