카테고리 없음

프리온보딩 9월 (front-end) 1

한량_ 2023. 9. 6. 21:45

비트맵과 벡터의 차이
웹에서 중요함
비트맵은 픽셀 찍어서 표현
벡터 좌표를 계산하여 그래픽을 만듦

1인치에 픽셀 몇개 들어가느냐  ppi   pixel per inch
DPR device pixel ratio 한개의 픽셀안에 몇개의 화소를 넣느냐
모바일 작업 시 꼭 알아야 하는 내용
css pixel ratio 3 이면  3x3

view font size 를 보통 css size라고 한다

user agent 코드로 모바일인지 pc인지 구별한다.

 


네트워크 속도 제한 - 외국쪽 작업할 때 주로 쓴다. 한국은 네트워크가 빨라서 ㄱㅊ 
같은 이미지에 같은 네트워크에서도 어떤 순서로 로딩 되냐에 따라 속도차이가 다르게 느껴질수도 있다.
기기유형추가, 기기픽셀 추가(DPR)

pixel ratio 

free website template


포토샵 - 설정 - Guides, Grid & slices - Grid - Gridline Every:4, Subdivisions:1 = DPR:2 로 설정한다는 뜻

포토샵 반드시 사이즈 확인 해야 함
기준 디바이스가 정해져있어야한다. 기준 사이즈 반응형 웹 디자인이 있어야한다.

web, mobile 에서 사용할 때 이미지 최적화 작업을 거쳐야한다.

비트맵 이미지 고해상도에서는 x2, x4 상황에 맞게 늘려서 넣어줘야한다.
픽셀은 모바일에서 retina기준으로 750정도로 있을 때 나누기 2해서 처리, 이미지는 retina기준이니 그대로 사용