728x90
반응형
1. 가변 글꼴
텍스트 크기를 픽셀(px) 단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시됩니다.
따라서 반응형 웹디자인을 위해 가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 바뀌어야 합니다.
1) em단위
em 단위는 부모요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한 것으로 1em은 16px 입니다.
2) rem
em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받습니다.
이런 단점을 없애기 위해 만든 단위가 rem입니다.
2. 가변 이미지
1) CSS 이용하기
이미지를 가변 레이아웃에 맞게 표시하려면 이미지를 감싸고 있는 부모 요소만큼 커지거나 작아지도록 max-width 속성값을 100%로 지정하면 됩니다.
<style>
.content img {
max-width: 100%
height: auto;
}
</style>
2) <img>태그와 secret 속성
이미지 너비값을 max-width:100%로 지정하면 가변 이미지를 간단히 만들수 있지만 고해상도 이미지를 크기만 줄여 표시하더라도 파일 사이즈가 크기 때문에 모바일에서 다운로드하는데 시간이 오래 걸린다.
또한 텍스트가 포함된 이미지일 경우, 모바일 화면에 맞게 줄여 표시하면 텍스트 내용을 알아보기 힘들수도 있다.
img 태그에서 srcset 속성을 이용하면 화면 너비값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있다.
728x90
반응형