웹앱의 동작원리
- 사용자 컴퓨터의 주소창에 페이지 주소를 입력한다.(HTTP,HTTPS 등을 포함)
- 해당 주소에 맞는 서버로 최초의 요청(
Request)이 들어간다. - 서버는 사용자에게
HTML파일로 최초의 응답(Response)를 한다. - 브라우저는 다시 서버에게
HTML의 구조에 맞게 추가 파일들을 요청한다. - 요청을 받은 서버는
CSS,JS,JPG등의 파일들을 추가로 응답한다.
웹앱의 개발과정
- 우리의 컴퓨터 환경 '로컬(
Local) 개발 환경'에서 개발한다. - 개발된
HTML,CSS,js등을 사용자가 접속할 수 있는 서버에 업로드한다. - 서버의 주소를 설정한다.
- 설정된 주소에 접근하는 모든 사람들은 웹사이트를 볼 수 있다.
웹 표준
- 웹 표준(Web Standard)이란 웹에서 사용하는 규칙을 의미한다.(W3C에 의거한다.)
- W3C는 World Wide Web Consortium의 약자이다.
크로스 브라우징
- 크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서,
동일한 사용자가 같은 화면과 동작 등을 어느 브라우저에서도 경험할 수 있도록
제작하는 기술을 말한다.(동떨어진 브라우저IE는 거의 사용하지 않는다.)
브라우저 구조
- 창(window)은 우리가 브라우저를 실행했을 때 보여지는 창을 말한다.
- 탭(Tab)은 하나의 창 안에 들어있는 각각의 창들의 구분을 말한다.
- 주소창(Address bar)는 해당하는 페이지의 주소를 입력하는 곳.
- 뷰포트(Viewport) 하나의 웹페이지가 출력되는(Rendering) 전체 영역을 말한다.
웹에서 사용하는 이미지
1. 비트맵
- 픽셀들이 모여 만들어진 이미지로 '레스터(Raster)' 이미지라고도 부른다.
.jpg,.gif,.png등이 대표적이다.- 정교하고 다양한 색상을 자연스럽게 표현할 수 있다.
- 확대 및 축소 시 계단 현상이 발생하고 품질이 저하된다.
2. 벡터
- 점, 선, 면의 위치좌표, 색상 등 수학적 정보의 형태로 이루어진 이미지이다.
- 대표적으로
.svg가 있다. - 확대 및 축소가 자유롭고 용량 변화가 없다.
- 정교한 이미지(인물, 풍경 등)를 표현하기는 어렵다.
확장자 포맷의 종류와 특징
1. JPG[JPEG](Joint Photographic coding Experts Group)
- 저장할수록 이미지가 손상되는 손실 압축 방식이다.
- 표현할 수 있는 색상도가 뛰어나다.
- 이미지의 품질과 용량을 쉽게 조절할 수 있다.(24비트, 약 1600만 색상)
- 가장 많이 쓰이는 이미지 포맷이다.
2. PNG(Portable Network Graphics)
- 비손실 압축 방식이다.
- 8비트의 256색상/24비트의 약 1600만 색상의 컬러 이미지를 처리한다.
- 투명도를 지원한다.
- W3C이 권장하는 포맷이다.
3. GIF(Graphics Interchange Format)
- 비손실 압축 방식이다.
- 여러 장의 이미지를 한 개의 파일에 담을 수 있다.
- 움짤이나 애니메이션을 표현할 때 사용한다.
- 8비트의 256색상만 지원한다.
4. WEBP
- 구글에서 개발한 이미지 포맷이다.
- 손실과 비손실 방식을 둘 다 지원한다.
- GIF와 같은 애니메이션 기능을 지원한다.
- 투명도(Alpha Channel)도 지원한다.
5. SVG(Scalable Vector Graphics)
- 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷이다.
- 해상도의 영향에서 자유롭다.
- CSS와 JS로 제어가 가능하다.
- 파일 및 코드 삽입이 가능하다.
- 주로 로고, 아이콘 등을 사용할 때 쓰인다.
