가변 글꼴

가장 많이 사용되는 단위는 em, rem

1em=16px

글자 크기(em)=글자크기(px) / 16px

 

<img>태그에서 srcset속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있다.

기본형 <img src="이미지" srcset="이미지1[, 이미지2, 이미지3,...]">

srcset 속성을 사용해 픽셀 밀도가 1일 때 표시할 이미지와

픽셀 밀도2일 때 표시할 고해상도 이미지를 따로 지정할 수 있다.

(픽셀 밀도 2란 픽셀 밀도 1일 때보다 화면 1인치당 표시하는 픽셀 수가 2배라는 뜻이다. 동일한 크기를 표시하는 데 2배의 픽셀을 사용하니까 그만큼 해상도가 더 뛰어난다.)

 

<img src="images/pencil.jpg" sreset="images/pencil-hd.jpg 2x" alt="색연필 제품 이미지">

 

<picture>태그와 <source>태그를 이용해 화면 너비에 따라 다른 이미지 파일을 표시할 수도 있다.

 

고정 그리드 레이아웃이든 가변 그리드 레이아웃이든 맨 먼저 할 일은 펜으로 종이에 그리거나 프로그램을 이용해 사이트 전체 디자인을 그려보는 것이다.