고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형 웹
창의 크기가 변화함에 따라 창 안에 표시되는 내용들이 그에 맞게 변화하는 웹 문서
- 스마트폰 보급이 확대됨에 따라 모바일 기기에서도 콘텐츠들을 맞춤형 크기로 제공해야 할 필요성 증대
- 컴퓨터 화면 너비로 고정된채 스마트폰으로 보면 많은 내용을 작은 스마트폰 화면에 전부 출력해야하므로
글자 사이즈가 작게 보임 - 다양한 브라우저 환경에 맞는 웹 사이트를 각각 별도로 제작하는 것은 비효율적
- 다양한 브라우저 환경에 따라 변화하는 웹사이트의 콘텐츠들을 자동으로 변화시켜주는 것인 반응형 웹
| 반응형 웹의 장점 | 설 명 |
| 다양한 브라우저 환경 지원 | 스마트폰, 웨어러블 기기, 스마트 TV, 게임 콘솔 등에서 전부 사용 가능 |
| 가로 모드에 맞춰 레이아웃 변경 가능 |
스마트폰, 태블릿 등에서 가로*세로 변경시 그에 맞춰 레이아웃 변경 가능 |
| 사이트 유지*관리 용이 | 사이트가 하나로만 운영이 가능해 유지*관리가 용이 다만 미디어 쿼리, 플렉스 박스 등 반응형 웹 사이트 제작을 위해 사용하는 일부 기술들은 최신 웹 표준인 CSS3의 일부이므로 최신 모던 브라우저에서만 지원됨 |
viewport[뷰포트]
<head>
<meta name="viewport" content = "속성1=속성값, 속성2=속성값, ......">
접속한 기기 화면에 맞게 내용들을 확대하거나 축소해서 표현할 수 있도록 설정 가능한 것
- 웹키트[webkit]기반인 모바일 브라우저들의 기본 뷰포인트 너비는 980px이므로
스마트폰용인 320px로 맞춰 웹 사이트를 제작해도 너비를 유지하려고 해 글씨 등이 작아짐 - 뷰포인트를 사용하면 기기 화면에 맞게 내용들이 나타남
| content안에 사용가능한 속성 | 설 명 |
| width | 뷰포트 너비를 설정할 수 있는 속성 |
| 속성 값은 device-width나 크기 중에 입력 | |
| height |
뷰포트 높이를 설정할 수 있는 속성 |
| 속성 값은 device-height나 크기 중에 입력 | |
| user-scalable |
확대*축소 가능 여부를 설정할 수 있는 속성 |
| 속성 값은 yes나 no 중에 입력 | |
| initial-scale |
초기 확대/축소 값을 설정할 수 있는 속성 |
| 속성 값은 1~10사이 정수 | |
| minimum-scale |
최소 확대/축소 값을 설정할 수 있는 속성 |
| 속성 값은 1~10사이 정수 | |
| maximum-scale |
최대 확대/축소 값을 설정할 수 있는 속성 |
| 속성 값은 1~10사이 정수 |
fluid image[가변이미지]
<style>
선택자 {
max-width :100%;
height : auto;
}
</style>
창의 너비에 따라 이미지의 너비가 조절되는 이미지
- 고해상도 이미지의 경우, 크기만 줄이면 다운로드 하는데 시간이 오래 걸림
→ 이미지 태그의 srcset 속성을 통해 화면 너비 값이나 픽셀 밀도에 따라 고해상도 이미지 파일 지정 가능 - 텍스트가 포함된 이미지의 경우, 텍스트 크기도 함께 줄어들어 글자 인식이 어려울 수 있음
# <picture> 태그
더보기
HTML5.1에서 <picture>태그가 표준으로 포함됨
일반적으로 <source>태그와 함께 사용해 화면 해상도, 화면 너비에 따라 다른 이미지 표시 가능
<picture>
<source 속성="속성값">
:
<source 속성="속성값">
</picture>
| 속 성 | 설 명 |
| srcset | 이미지 파일 경로를 설정하는 속성 |
| media | srcset에 지정한 이미지를 표시하기 위한 조건을 설정하는 속성 |
| type | 파일 유형을 설정하는 속성 |
| sizes | 파일 크기를 설정하는 속성 |
Fluid Video[가변 비디오]
<style>
선택자 {
max-width :100%;
height : auto;
}
</style>
창의 너비에 따라 비디오 화면의 너비가 조절되는 비디오
- 다양한 브라우저 환경 동작을 위해서는 ogv, webm 확장자를 사용하는 것이 좋음
2020/08/11 - [HTML] - [개미의 걸음 HTML&CSS 11차시] 멀티미디어를 위한 태그
bootstrap을 활용한 가변형 이미지*비디오
반응형 웹 더 알아보기
2020/08/21 - [HTML] - [개미의 걸음 HTML&CSS 21차시] 반응형 웹② grid system (with bootstrap)
2020/08/22 - [HTML] - [개미의 걸음 HTML&CSS 22차시] 반응형 웹 ③ Media Queries
728x90
'HTML' 카테고리의 다른 글
| [개미의 걸음 HTML&CSS 22차시] 반응형 웹 ③ Media Queries (0) | 2020.08.22 |
|---|---|
| [개미의 걸음 HTML&CSS 21차시] 반응형 웹② grid system (with bootstrap) (0) | 2020.08.21 |
| [개미의 걸음 HTML&CSS 19차시] CSS를 이용한 애니메이션 (0) | 2020.08.19 |
| [개미의 걸음 HTML&CSS 18차시] CSS 레이아웃(배치 및 다단 설정) (0) | 2020.08.18 |
| [개미의 걸음 HTML&CSS 17차시] 박스모델 관련 스타일 (0) | 2020.08.17 |
댓글 영역