웹 개발 이란?

 

서버 vs 클라이언트

 

클라이언트

- 사용자가 웹 사이트에 접근할 때 사용하는 기기

- 웹 브라우저

 

서버

- 인터넷에 연결된 컴퓨터

- 웹 요소와 여러 정보가 저장됨

 

 

프론트엔드 개발 vs 백엔드 개발

 

프론트엔드 개발

- 웹 브라우저 화면에 보이는 부분을 다룸 -> 웹 사이트 제작

- HTML, CSS, 자바스크립(JS) 사용

 

백엔드 개발

- 사용자 뒤에서 보이지 않는 영역, 즉 서버를 다룸

- 데이터베이스를 설계하거나 데이터 처리

- 자바, PFP, 파이썬 등 프로그래밍 언어 사용

 

 

웹 개발의 기본 영역

- HTML

- CSS

- 자바스크립트

- 깃/깃허브

 

프론트영역?

다양한 라이브러리

제이쿼리, 부트스트랩 등

 

프레임워크

React, 앵귤러, Vue 등

 

백엔드영역?

리눅스 서버, 네트워크, 데이터베이스 구축기술

 

서버언어

python, Java, PHP 등

 

프레임워크

Node.js, Spring, 장고, 코드이그나이터 등

 

 

프론트엔드 개발

HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호작용할수 있도록 하는것

 

HTML(Hyper Text Markup Language)

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조 담당

CSS (Cascading Style Sheets)

실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당

JS (JavaScript)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당

 

 

 

웹 이미지

비트맵 (Bitmap) 과 백터 (Vector)

 

 

비트맵 (Bitmap)

픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름

정교하고 다양한 색상을 자연스럽게 표현

확대/축소 시 계단 현상, 품질 저하

 

벡터 (Vector)

점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지

확대/축소에서 자유로움, 용량 변화가 없음

정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움

 

 

 

JPG(JPEG) (Joint Photographic coding Experts Group)

Full-color롸 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용

손실압축, 표현 색상도(24비트, 약 1600만 색상)가 뛰어남

이미지의 품질과 용량을 쉽게 조절 가능

가장 널리 쓰이는 이미지 포맷

 

PNG (Portable Network Graphics)

Gif의 대체 포맷으로 개발됨

비손실 압축

8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리

Alpha Channel 지원(투명도)

W3C권장 포맷

 

GIF(Graphics InterChange Format)

이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장

비손실 압축

여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)

8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

 

WEBP

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

완벽한 손실/비손실 압축 지원

GIP같은 애니메이션 지원

Alpha Channel 지원(손실, 비손실 모두)

 

SVG (Scalable Vector Graphics)

마크업 언어(HTML/XML) 기반의 백터 그래픽을 표현하는 포맷

해상도의 영향에서 자유로움

CSS와 JS로 제어 가능

파일 및 코드 삽입 가능