14-3 가변 레이아웃과 가변 요소

가변 글꼴

반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할 때 글자 크기도 유동적으로 바뀌게 해야한다.

이것을 가변 글꼴이라고 한다.

가장 많이 사용하는 단위는 em과 rem이다.

em 단위

부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한 것.

rem 단위

em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받는다. 그게 단점이다.

이런 단점을 없애기 위해 만든 단위가 rem이다. rem에서 r은 루트(root)를 뜻하며 rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본 값이 바뀌지 않는다.

가변 이미지(fluid image)

CSS 이용하기

.content img {
    max-width: 100%;
    height: auto;
}

<img> 태그와 srcset 속성

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

<!-- 기본형 -->
<img src="image" srcset="image1, image2, image3, ...">

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

<picture> 태그와 <source> 태그 - 상황별로 다른 이미지 표시하기

속성

• srcset : 이미지 파일의 경로
• media : srcset에 지정한 이미지를 표시하기 위한 조건
• type : 파일 유형
• sizes : 파일의 크기

가변 비디오

max-width: 100%로 설정하면 웹 문서 안에서 크기가 적절히 조절된다.