[프론트엔드] 1. 개요

[ 1 ] 프론트엔드

• HTML, CSS, JS를 사용해 데이터를 GUI로 변환하여 사용자와 상호작용을 할 수 있도록 하는 것.

1. HTML

• 웹의 구조.

2. CSS

• 시각적인 표현.

3. JavaScript

• 콘텐츠 동적 처리.

[ 2 ] 웹의 동작

클라이언트가 서버에게 최초 요청 ( 페이지 주소 입력 )
--> 서버가 클라이언트에게 최초 응답 ( HTML )
----> 서버에게 추가 요청 ( 페이지를 구성하는데 필요한 파일 )
------> 클라이언트에게 추가 응답 ( CSS, JS, 이미지 등등 )

1. 웹 표준

• 웹에서 사용되는 표준 기술이나 규칙.
• 보통 W3C의 권고안 ( REC )에 해당하는 기술을 의미.

2. 크로스 브라우징

• 크롬, 엣지, 파이어폭스, 사파리 등등 각자 조금씩 다르게 구동되는 여러가지 브라우저에서 사용자가 동일한 경험을 할 수 있도록 제작하는 기술.

3. 브라우저의 구성

4. 웹 접근성

• 신체적 혹은 환경적 조건에 제한이 있는 사용자와 모든 사용자가 동등하게 접근 할 수 있는 웹을 제작하는 방법.

[ 3 ] 웹 이미지

1. 비트맵 ( Raster Image )

• 픽셀로 이루어진 이미지.
• 정교하고 다양한 색상의 자연스러운 표현.
• 크기 변경 시 계단현상이 발생, 품질 저하.

JPEG

손실 압축 24비트

• 품질과 용량을 쉽게 조절 가능.
• 가장 많이 사용.

PNG

비손실 압축 24비트 투명도 표현

• W3C 권장 포맷.

GIF

비손실 압축 움짤 8비트

WEBP

구글 개발 손실 / 비손실 압축 애니메이션 지원 투명도 지원

• 아직 널리 사용되지는 않음.

2. 벡터 ( Vector Image )

• 수학적 정보로 이루어진 이미지
• 계단현상 없음, 용량 변화 X.
• 정교한 이미지를 표현하기 어려움.

SVG

• 해상도에서 자유로움.
• CSS와 JS로 제어 가능.

[ 마무리 ] 1일차를 마치며..

기존에 그저 알고만 있던 개념들을 조금더 깊게 알게 된 점들이 좋았다.
웹 표준이나 크로스 브라우징이나 그저 코딩을 배운다고 해서 코드를 입력하는 것만 배우는게 아니라 그것과 관련된 개념들을 배우는 건 이번 패키지 강의에서가 처음인 것 같다.