순수한 반응형 웹사이트 : 당신의 코드는 기본에 충실한가요?
[반응형 웹사이트 개발의 기초]
- 반응형 웹사이트의 범위
- 반응형 웹사이트 : 하나의 웹사이트로 접속하는 기기의 화면의 크기 맞춰 자동으로 레이아웃 및 콘텐츠 구성하는 개발 방법
- 화면비율/마우스 포인터/프린트 장치/컬러&컬러모드/주변광도/고대비 모드/애니메이션&투명도/고대비/픽셀밀도/화면크기/화면방향 등등
- 비트맵과 백터의 차이
- 백터 : 좌표를 계산하여 그래픽을 만듦, 확대해도 깨지지 않음, 복잡한 이밎 표현 어려움, ai,svg,epspdf
- 비트맵 : 점(픽셀)을 모아 그래픽을 만듦(모눈종이같이), 확대하면 깨짐 ,복잡한 이미지 표현 가능, jpg,png,gif,bmp,webp
- 상황에 따라 무엇을 써야 좋을지 판단해야하기 때문에 비트맵과 백터의 차이를 분명히 알아야한다.
- 해상도와 밀도
- 실제 기기의 디스플레이 픽셀과 css에서 인식하는 픽셀이 다르다라는 문제가 생기면서 해상도와 밀도가 중요하게 되었다.
- DPR(device-pixel-ratio)
- 사이즈의 종류와 특징
- 반응형이라고 Px를 사용하지 않는건 아닙니다. 상황에 따라 맞춰서 써야 한다.
- px : 고정단위, 화면기준, 1px= 화면의 최소픽셀
- % : 고정단위 x, 부모요소 기준, 1%= 부모 요소 크기의 1%
- em : 고정단위 x, 부모 폰트 크기 기준, 1em= 부모 요소의 폰트 크기
- rem :고정단위 x, root（html）기준, 1rem = html태그의 폰트 크기
- vw , vh, vmin, vmax ： 고정단위 x, viewport기준
- 디자일툴 기본 사용법
- free web site template
- 웹페이지 하나에 이런 것들까지 생각해야하나요?