가변 글꼴
- 텍스트 크기를 픽셀 단위를 사용하면 크기가 고정되기 때문에 유동적으로 크기를 변경하기 위해서 em, rem 단위를 사용한다.
em 단위
1em = 16px
부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한다. 단점으로는 부모 요소의 크기에 따라 자식 요소의 글자 크기가 바뀌기 때문에 rem이 나왔다
rem 단위
rem에서 r은 루트를 뜻하면 rem은 처음부터 기본크기를 지정하기 때문에 중간에 기본 값이 바뀌지 않는다.
가변이미지
max-width 속성값을 100% 지정한다.
- width는 웹 문서에 삽입할 이미지 너비 값이고, max-width는 가변 이미지에서 최대한 표시할 수 있는 이미지 너비 값이다.
태그와 srcset 속성
<img src="images/pencil.jpg" srcset="images/pencil-hd.jpg">
unit test, tdd, bdd, laravel, django, android native, vuejs, react, embedded linux, typescript