반응형 웹 - 가변 레이아웃과 가변 요소

반응형 웹 - 가변 레이아웃과 가변 요소

1. 가변 글꼴

• 텍스트 크기를 픽셀(px) 단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시됩니다. 따라서 반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할 때는 크기도 유동적으로 바뀌어야 합니다. 이것을 '가변 글꼴'이라고 합니다.
• 가장 많이 사용하는 단위는 em과 rem입니다.

 

1) em 단위

• em 단위는 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한 것으로 1em은 16px입니다.(1em=16px)
• 따라서 이미 px로 표시한 글자의 크기를 16px로 나누면 em 값으로 계산할 수 있습니다.
• em 단위로 작성된 글꼴도 실제로 브라우저 창에 표시될 때는 해당 기기에 맞춘 픽셀 크기로 계산되어 표시됩니다.
• em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받습니다. 즉, em 단위를 사용하면 부모 요소의 크기에 따라 자식 요소의 글자 크기가 바뀌며 em 수치가 계속 달라진다는 단점이 있습니다.

 

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

 

2) rem 단위

• rem에서 r은 루트(root)를 뜻하면 rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본 값이 바뀌지 않습니다.
• 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배인지로 크기를 정합니다.
• html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자 크기입니다. 보통 16px입니다.

 

2. 가변 이미지

• 이미지의 경우, 웹 문서에 삽입할 때부터 이미지의 크기가 정해져 있기 때문에 브라우저 창의 크기가 변하더라도 이미지의 너비 값은 바뀌지 않습니다. 그래서 가변 그리드 레이아웃에서 이미지의 너비가 브라우저 화면의 너비보다 클 경우, 브라우저 화면의 너비를 줄이면 이미지의 일부가 가려집니다.
• 이럴 때 '가변 이미지(fluid image)'로 만들면 창의 너비에 따라 이미지 너비도 적절히 조절되도록 만들 수 있습니다.

 

1) CSS 이용하기

• 이미지를 가변 레이아웃에 맞게 표시하려면 이미지를 감싸고 있는 부모 요소만큼만 커지거나 작아지도록 max-width 속성 값을 100%로 지정하면 됩니다.
• width는 웹 문서에 삽입할 이미지 너비 값이고 max-width는 가변 이미지에서 최대한 표시할 수 있는 이미지 너비 값입니다.
• 예를 들어 .content 요소 안에 포함된 이미지를 가변 이미지로 max-width:100%로 지정하면 .content 요소 너비값이 변할 때마다 이미지의 너비와 높이도 바뀌게 됩니다.
• 이미지 너비 값을 max-width:100%로 지정하면 가변 이미지를 간단히 만들 수 있지만 모든 상황에서 사용할 수 있는 것은 아닙니다. 고해상도 이미지를 크기만 줄여 모바일에 표시하더라도 파일 사이즈가 크기 때문에 모바일에서 다운로드하는 데 시간이 오래 걸립니다. 또한 텍스트가 포함된 이미지일 경우, 모바일 화면에 맞게 줄여 표시하면 텍스트 내용을 알아보기 힘들 수도 있습니다.

 

2) <img> 태그와 srcset 속성

• <img> 태그에서 srcset 속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있습니다.
• srcset 속성에서 <이미지1>, <이미지2>, ...은 화면 너비가 달라질 때 표시할 이미지들을 나열한 것으로 이미지 파일 경로와 함께 너비 값이나 픽셀 밀도도 함께 표시해야 합니다.
• 예를 들어 srcset 속성을 사용해 픽셀 밀도가 1일 때 표시할 이미지와 픽셀 밀도가 2일 때 표시할 고해상도 이미지를 따로 지정할 수 있습니다. 픽셀 밀도 2란 픽셀 밀도 1일 때보다 화면 1인치당 표시하는 픽셀 수가 2배라는 뜻입니다. 동일한 크기를 표시하는 데 2배의 픽셀을 사용하므로 그만큼 해상도가 더 뛰어납니다.

 

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

 

사용 예)
<img src="images/flowers.jpg" srcset="images/flowers-hd.jpg 2x" alt="꽃 이미지">

 

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

• HTML5.1에는 <picture> 태그가 표준으로 포함되면서 <picture> 태그와 <source> 태그를 함께 사용해 화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지 파일을 표시할 수도 있습니다.
• <source> 태그를 사용하는 방법은 <video> 태그나 <audio> 태그에서 <source> 태그를 이용해 여러 조건의 파일을 따로 지정하는 방법과 비슷합니다.
• <picture> 태그는 IE에서는 지원하지 않고 파이어폭스 38 이상, 크롬 38 이상, 사파리 9.1 이상 버전에서 지원됩니다. iOS 사파리와 안드로이드 브라우저에서는 최신 버전인 iOS 사파리 9.3 이상과 안드로이드 브라우저 53 이상에서만 지원됩니다.

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

 

사용 예)
<picture>
          <source srcset="images/flower-large.jpg" media="(min-width:1024px)">
          <source srcset="images/flower-medium.jpg" media="(min-width:768px)">
         <source srcset="images/flower-small.jpg" media="(min-width:320px)">
         <img src="images/flower.jpg" alt="꽃 이미지" style="width: 100%">
</picture>

 

3. 가변 비디오

• 가변 이미지와 마찬가지로 비디오도 화면의 너비가 달라질 때마다 비디오의 너비가 늘어나거나 즐어들 수 있도록 해야 합니다.
• HTML5에서 동영상을 삽입할 때는 기본적으로 <video> 태그를 사용하므로 CSS를 사용해 max-width 속성을 100%로 지정하면 웹 문서 안에서 크기가 적절히 조절됩니다.
• 다양한 브라우저 환경에서 동작시키려면 비디오 포맷을 ogv나 webm으로 변환해 주는 것이 좋습니다.

 

참고 : HTML5 + CSS3 웹 표준의 정석