[개미의 걸음 HTML&CSS 20차시] 반응형 웹① viewport, fluid image, fluid video

HTML

IT개미 데이터 2020. 8. 20. 23:23

728x90

반응형 웹

창의 크기가 변화함에 따라 창 안에 표시되는 내용들이 그에 맞게 변화하는 웹 문서

반응형 웹의 장점	설 명
다양한 브라우저 환경 지원	스마트폰, 웨어러블 기기, 스마트 TV, 게임 콘솔 등에서 전부 사용 가능
가로 모드에 맞춰 레이아웃 변경 가능	스마트폰, 태블릿 등에서 가로*세로 변경시 그에 맞춰 레이아웃 변경 가능
사이트 유지*관리 용이	사이트가 하나로만 운영이 가능해 유지*관리가 용이 다만 미디어 쿼리, 플렉스 박스 등 반응형 웹 사이트 제작을 위해 사용하는 일부 기술들은 최신 웹 표준인 CSS3의 일부이므로 최신 모던 브라우저에서만 지원됨

<head>
<meta name="viewport" content = "속성1=속성값, 속성2=속성값, ......">

접속한 기기 화면에 맞게 내용들을 확대하거나 축소해서 표현할 수 있도록 설정 가능한 것

웹키트[webkit]기반인 모바일 브라우저들의 기본 뷰포인트 너비는 980px이므로
스마트폰용인 320px로 맞춰 웹 사이트를 제작해도 너비를 유지하려고 해 글씨 등이 작아짐
뷰포인트를 사용하면 기기 화면에 맞게 내용들이 나타남

<style>
선택자 {
max-width :100%;
height : auto;
}
</style>

창의 너비에 따라 이미지의 너비가 조절되는 이미지

고해상도 이미지의 경우, 크기만 줄이면 다운로드 하는데 시간이 오래 걸림
→ 이미지 태그의 srcset 속성을 통해 화면 너비 값이나 픽셀 밀도에 따라 고해상도 이미지 파일 지정 가능
텍스트가 포함된 이미지의 경우, 텍스트 크기도 함께 줄어들어 글자 인식이 어려울 수 있음

# <picture> 태그

HTML5.1에서 <picture>태그가 표준으로 포함됨

일반적으로 <source>태그와 함께 사용해 화면 해상도, 화면 너비에 따라 다른 이미지 표시 가능

<picture>
<source 속성="속성값">
:
<source 속성="속성값">
</picture>

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

<style>
선택자 {
max-width :100%;
height : auto;
}
</style>

창의 너비에 따라 비디오 화면의 너비가 조절되는 비디오

다양한 브라우저 환경 동작을 위해서는 ogv, webm 확장자를 사용하는 것이 좋음
2020/08/11 - [HTML] - [개미의 걸음 HTML&CSS 11차시] 멀티미디어를 위한 태그

bootstrap source

반응형 웹 더 알아보기

728x90