Responsive Web
<picture> element
Can I Use
<picture>?<picture>문법<img>를 fallback으로 첨부해야한다.<picture>는<img>tag가 없으면 인식되지 않는다!1
img {display: block; margin: 0 auto;}
1
2
3
4
5
<picture>
<source media="(min-width: 650px)" srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)" srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>
Pixel density descriptor
- 1x, 1.5x, 2x 그리고 3x와 같은 픽셀 밀도 서술자(Pixel density descriptor)들을 사용하여 고해상도 디스플레이 지원을 추가합니다.
- 새로 추가된 srcset 속성은
<img>와<source>엘리먼트 모두에 적용됩니다. - letina부터는 2x 나오고 Android는 1.5x 등 정수가 아니고 소숫점으로 증가
Image 반응형으로 만들기
wrapper를 만들고, 그 안에
<img>max-width: 100%;height: auto;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<style>
.rwd-wrapper{
width: 30%;
border: 5px solid blueviolet;
}
.rwd-wrapper img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="rwd-wrapper">
<img src="images/image-src.png" alt="">
</div>
</body>srcset 속성을 사용해서 Pixel density 설정
1
2
3
4
5
6
7<div class="rwd-wrapper">
<img src="images/image-src.png" alt=""
srcset="images/image-1x.png 1x,
images/image-2x.png 2x,
images/image-3x.png 3x,
images/image-4x.png 4x">
</div>Viewport 별로 Art Direction 설정하기
<picture>의<source media="">로 조건 줌
1 | <picture> |
Background image를 반응형으로 만들기
image 원본 size를 알아내야한다. > 가로, 세로 비율을 계산해야함
height를 0으로 하고, padding을 세로로 원본 image의 비율에 맞게 준다.
1
2
3
4
5
6
7
8.rwd-bg{
width: 100%;
height: 0 !important;
padding-top: calc(3280 / 4928 * 100%);
background: url("images/light.jpg") no-repeat;
background-size: 100% 100%;
}width 크기를 변경할 때는 새로운 wrapper를 만들어 그 wrapper의 width를 줄인다.
1 | .wrapper{ |
1 | <div class="wrapper"> |
- .rwd-bg는 parent인 wrapper의 width 100%만큼 차지하므로 wrapper의 크기가 줄어들면 같이 줄어든다.
Background-size: cover, contain
CSS Trick Background-size 참고 사이트
- cover : 이미지가 일부 잘리더라도 화면을 꽉 채우게 가장 작은 축을 기준으로 cover함
- contain : 가로든, 세로든 가장 긴 축을 기준으로 화면에 잘리지 않게 하는 기법
Media query로 해상도 별 배경 image 다르게 하기
- dpi : dot per inch - 1inch 당 들어가는 pixel 수
- CSS는 1inch 당 96px이니까 192dpi는 2x임
1 | @media all and (min-resolution: 192dpi){ |
