💡 HTML CSS JS
HTML
페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹 구조를 담당한다.
CSS
마크업 언어가 실제 표시되는 방법을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당한다.
JS (JavaScript)
콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적 처리를 담당한다.
| HTML, CSS | JS |
|---|---|
| 정적 언어 | 동적 언어 |
| 만들어져 있는 것만 가지고 화면에 표시 | 상황에 맞게 꾸밀 수 있음 |
- 역할을 나누어서 구조적으로 코딩하는 것이 효율적이다.
- HTML : 구조화
- CSS : 꾸미기
- JS : 생동감
💡 웹 표준
- 웹에서 사용되는 표준 기술이나 규칙을 의미한다.
- W3C의 권고안에서 나온 기술들이 여기에 해당한다.
이 표준 기술들을 기준으로 웹 브라우저들이 만들어진다.
- 브라우저를 만드는 업체에서 표준 기술을 해석하는 차이
- 새로운 기술 삽입
→ 조금 다르게 구동되는 브라우저가 생긴다.
💡 크로스 브라우징
조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험 (같은 화면, 같은 동작 등) 을 줄 수 있도록 제작하는 기술, 방법이다.
-
대부분의 브라우저
- 최대한 웹 표준을 준수해서 제작됨 -
MSIE 브라우저
- 표준화하기 쉽지 않은 브라우저
∴ 대부분의 경우 IE에서 문제가 없으면 다른 브라우저는 OK!
💡 웹 접근성
정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법이다.
-
청각 장애인을 위해 영상에 자막 넣기
-
마우스를 사용할 수 없는 사람들을 위해 키보드를 통해서도 웹을 이용할 수 있게 하기
-
이미지에 대체 텍스트를 제공하는 간단한 방법
👉🏻 모두 웹 접근성에 해당한다.
💡 웹에서 사용하는 이미지
비트맵과 벡터 이미지
이미지(그래픽)는 크게 비트맵과 벡터로 구분한다.
비트맵(Bitmap)
각 픽셀이 모여 만들어진 정보의 집합으로 레스터 (Raster) 이미지라고도 부른다.
→ .jpeg .gif .png
-
픽셀 단위로 화면에 렌더링한다.
-
우리가 일반적으로 사용하는 대부분의 이미지
-
그림판, 포토샵과 같은 툴로 편집할 수 있다.
벡터(Vector)
수학적 정보의 형태 (Shape) 들이 만들어내는 결과물이다.
→ .svg
- 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링한다.
- 따라서 좀 더 많은 연산을 해야 하지만, 비트맵 이미지와 달리 해상도로부터 자유롭게 렌더링할 수 있다.
- 확대 및 축소를 해도 이미지가 깨지지 않는다.
- 수학적 정보만을 가지고 있기 때문에 이미지 확대/축소에 따른 용량 변화가 없다.
- 일러스트 같은 툴로 편집할 수 있다.
장점과 단점
| 이미지 종류 | 장점 | 단점 |
|---|---|---|
| 비트맵 | 정교하고 다양한 색상을 자연스럽게 표현 | 확대/축소 시 계단 현상, 품질 저하 |
| 벡터 | 확대/축소에서 자유로움, 용량 변화가 없음 | 정교한 이미지(인물, 풍경 사진 등)를 표현하기 어려움 |
JPG (JPEG)
Full-color와 Gray-scale의 압축을 위해 만들어졌으며 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용된다.
-
손실 압축
-
표현 색상도 뛰어나 고해상도 표시장치에 적합
(24비트, 약 1600만 색상) -
이미지의 품질과 용량을 쉽게 조절 가능
-
가장 널리 쓰이는 이미지 포맷
⭐ 높은 압축률(적은 용량)
PNG
Gif의 대체 포맷으로 개발되었다.
-
비손실 압축
-
8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
-
Alpha Channel 지원(투명도)
-
W3C 권장 포맷
⭐ 투명도 지원
GIF
이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있다.
-
비손실 압축
-
여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
-
8비트 컬러만 지원(다양한 색상을 표현하는 작업에는 적합하지 않음)
⭐ 동영상 같은 이미지(애니메이션)
WEBP
JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷이다.
-
완벽한 손실/비손실 압축 지원
-
GIF 같은 애니메이션 지원
-
Alpha Channel 지원(손실, 비손실 모두)
⭐ 완벽한 포맷 but 모든 브라우저에 완벽하게 호환되지 않음
👇🏻 지원되는 브라우저
https://caniuse.com/#feat=webp
SVG
마크업 언어 (HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷이다.
-
해상도의 영향에서 자유로움
-
CSS로 Styling 가능
-
JavaScript로 Event Handling 가능
-
코드 혹은 파일로 사용 가능
-
해상도의 영향을 받지 않기 때문에 반응형, 크로스 플랫폼에 많이 사용된다.
주로 사용되는 이미지 포맷
✅ 이미지 용량이 커서 용량을 줄이는데 집중해서 이미지를 활용하고 싶다!
👉🏻 JPG
✅ 이미지의 투명도가 필요하다!
👉🏻 PNG
✅ 이미지가 애니메이션 기능을 지원해야 한다!
👉🏻 GIF
💡 오픈소스 라이선스
오픈소스란?
어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것
웹에서 괜찮은 오픈소스를 찾았을 때,
코드 활용도도 중요하지만 코드의 License도 굉장히 중요하다.
우선적으로 활용도와 같이 License를 찾아라!
아래 소개된 License들은 무료이며,
대부분의 License가 붙어있는 소스에는 무료라고 붙지 않고 Apache, MIT, BSD로 붙어있다.
⭐ = 인기 많은 License
Apache License
아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스이다.
👉🏻 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능하다.
⭐ MIT License
매사추세츠공과대학에서 소프트웨어학과 학생들을 위해 개발한 라이선스이다.
👉🏻 개인 소스에 이 License를 사용하고 있다는 표시만 지켜주면 된다.
👉🏻 나머지 사용에 대한 제약이 없어서 인기가 많다.
⭐ BSD License
BSD(Berkeley Software Distribution)
캘리포니아대학에서 개발한 라이선스이다.
👉🏻 License 표시만 지켜주면 된다.
Beerware
오픈소스 개발자에게 맥주를 사줘야 하는 라이선스이다.
👉🏻 License 표시만 지키면서 자유롭게 사용하면 된다.
👉🏻 만약, 개발자를 만난다면 맥주 한 잔을 사주면 된다는 재미있는 License 이다.
👇🏻 더 많은 오픈소스 License
https://opensource.org/licenses
📚 참고
