2019-04-16

<picture>
  <source
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png"> <!-- 일반 이미지에도 srcset 사용가능-->
  <img
    src="images/kitten-curled.png"
    alt="a cute kitten">  
</picture>

picture태그를 사용하여, 이미지를 CSS나 자바스크립트 없이 반응형 디자인을 할 수 있게 HTML5에 추가된 태그

<picture>
  <source
    media="(min-width: 650px)"                <!--같은 너비라도 밀도에 따라 사진크기 다르게-->
    srcset="images/kitten-stretching.png,
            images/kitten-stretching@1.5x.png 1.5x,
            images/kitten-stretching@2x.png 2x">
  <source
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png,
            images/kitten-sitting@1.5x.png 1.5x
            images/kitten-sitting@2x.png 2x">
  <img
    src="images/kitten-curled.png"
    srcset="images/kitten-curled@1.5x.png 1.5x,
            images/kitten-curled@2x.png 2x"
    alt="a cute kitten">
</picture>

picture태그로만 특별한일이 있지 않고, source태그와 srcset속성을 자식으로 가질때 특별한일이 생긴다.

source태그는 srcset을 필수로 가진다. picture태그는 img태그를 꼭 가져야한다

위의 코드와 같이 650px단위에서

기본(1배) 1.5배, 2배를 컨트롤 할 수 있다. '똑같은 너비라도 밀도에 따라 사진 크기가 다르게 표현할 수 있다는 뜻이다'

<style>
    .rwd-wrapper{
        width: 50%;
        border: 5px solid blue;  부모 div 
    }
    .rwd-img{
        max-width: 100%;    그안에 img max-width 100%
        height: auto;
    }
</style>

<div class="rwd-wrapper"> source를 활용해서 반응형 예
    <picture>
        <source media="(max-width:650px)" srcset="images/small.jpg">
        <source media="(min-width:651px) and (max-width: 990px)" srcset="images/medium.jpg">
        <source media="(min-width:1000px)" srcset="images/large.jpg">
        <img class="rwd-img" src="images/normal.jpg" alt="">
    </picture>
</div>

background-size 속성 처음써봄

background-size 속성은 CSS3에서 추가된 속성으로, CSS3 이전에는 처리할 수 없었던 배경 이미지 크기를 조정할 수 있다.

기본값 auto, 이미지 크기 만큼 공간차지

background-size: 고정px 고정px

background-size: ~% ~% 퍼센트 단위가능

background-size:cover -이미지 크기 비율유지, 가로와 세로중 큰값에 이미지를 맞춤

background-size:contain - 비율 유지, 영역에 전체 이미지가 들어가도록 작은 크기 이미지로 크기 조절(가로 세로중 큰값에 맞춤)

background-size: cover; = 100%랑 비슷한느낌 (가장큰 영역에 맞추니까