가변 레이아웃과 가변 요소

가변 글꼴

보통 우리는 텍스트 크기를 px단위로 지정한다. 하지만 px단위로 지정하게 되면 화면에 크기가 고정되기 떄문에 작은 기기에서 매우 작게 표시되는 상황이 발생한다.
가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 변해야 하는데 그 때 사용하는 것이 ‘가변 글꼴’이다.

• em 단위

em단위는 부모 요소에서 지정한 폰트의 대문자 M의 넓이를 1em으로 지정한 것이다. (1em = 16px) 따라서 이미 px로 표시한 글자의 크기를 16px로 나누면 em값으로 계산이 가능하다.

em = px / 16px

여기서 2em은 32px이다. (크롬 인스펙터에서 Computed를 확인해보길 바란다.)

• rem 단위

em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 부모 요소의 크기에 따라 글자 크기가 달라진다. 이러한 점은 보완하는 단위가 rem 단위이다. rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본값이 바뀌지 않는다.

• 가변 이미지

이미지 또한 크기가 정해져있기 때문에 가변 이미지 형태로 만들어 창의 너비에 따라 이미지 너비도 적절히 조절할 수 있다.

• css 이용하기

css에 max-width 속성값은 100%로 하면 이미지와 너비가 바뀐다.

• img 태그와 srcset 속성

max-width 속성을 언제든지 사용할 수 있다면 참 좋겠지만, 고해상도 이미지를 크기만 줄인다면 파일 사이즈 크기 떄문에 모바일에서는 시간이 더 오래걸린다. 또한 텍스트가 포함되어 있다면 크기가 줄었을 때 텍스트를 알아보기가 힘들어진다. 이 때 사용하는 것이 img 태그에 srcset 속성이다.

<img src="<img>" srcset="<img>[,]">

[]안에는 화면 너비가 달라질 때마다 표시할 이미지를 나열한 것이다. 이 때 픽셀 밀도를 함께 표시하여야 한다.

• picture 태그와 source 태그

두 태그는 상황별로 다른 이미지를 표시하는 태그이다. 둘을 함께 사용한다면 해상도나 화면 너비에 따른 이미지 파일을 표시할 수 있다.

<picture>
  <source srcset="<img-large>" media="(min-width)">
  <img src="<img>" style="width">
</picture>

• 가변 비디오

이미지와 마찬가지로 비디오도 max-width:100%를 사용할 수 있다.