다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이 반응형 웹 디자인 이다.
화면 크기가 바뀔 때마다 반응하여 화면 요소들을 자동으로 바꾸어 구현하는 것을 의미한다.
viewport
실제 내용이 표시되는 영역이다.
뷰포트를 지정하면 기기 화면, 혹은 크기가 조정된 화면에 맞추어 확대 혹은 축소해서 요소들을 표시해준다.
html파일에서는 <head>태그 안에 <meta> 태그 안에 뷰포트를 지정해 줄 수 있다.
<meta name="viewport" content="width=device-width initial-scale=1">
일반적인 사용법으로는 위 코드를 기억하면 된다.
Grid System
화면을 여러 개의 column으로 나누어 배치하는 방법
주로 960픽셀 12 칼럼의 그리드 시스템을 사용한다.
1. 고정 그리드 : 화면 너비를 일정하게 고정하여 레이아웃을 만드는 방법
2. 가변 그리드 : 화면 너비를 백분율과 같은 가변 값으로 지정하는 방법
(width속성과 height속성에 각각 px, %를 사용하는 것에 따라 고정형 가변형으로 나뉜다고 보면 된다.)
이미지 크기 가변시키기
1. max-width: 100%;
속성 max-width 의 속성값을 100%로 지정하여
이미지를 감싸고 있는 부모 요소에 따라 가변되도록 설정하는 것도 하나의 방법이다.
2. <img>태그와 srcset속성
화면 너비나 픽셀에 따라 고해상도 이미지 파일을 지정할 수 있다.
3. <picture>태그와 <source>태그
화면 해상도 뿐만 아니라 화면 너비에 따라 표시
<picture>
<source srcset="images/shop-large.jpg" media="(min-width:1024px)">
<source srcset="images/shop-medium.jpg" media="(min-width:768px)">
<source srcset="images/shop-small.jpg" media="(min-width:320px)">
<img src="images/shop.jpg" alt="fill with coffee" style="width:100%;">
</picture>
비디오 크기 가변시키기
마찬가지로 max-width: 100%;
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #16 : Flex Box Layout (0) | 2022.12.19 |
|---|---|
| HTML & CSS #15 : 미디어 쿼리 (0) | 2022.12.16 |
| HTML & CSS : 애니메이션 keyframes hover transition 실습 (0) | 2022.12.14 |
| HTML & CSS #13 : CSS 애니메이션 (0) | 2022.12.14 |
| HTML & CSS #12 : CSS 선택자 (0) | 2022.12.14 |
댓글