[Day 15] 반응형 웹 image + iframe + video + media query

반응형 웹 이미지

<div class="rwd-container">
  <img class="rwd-img" src="../images/normal.jpg" alt="반응형 학습 예시">
</div>

.rwd-container {
  width: 50%;
  background: yellow;
}
.rwd-img{
  max-width: 100%;
  height: auto;
}

고해상도 콘텐츠 이미지

• srcset-pixel-ratio

  <div class="rwd-container">
    <img class="rwd-srcset-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>
  

  • 해상도 배율에 따라 이미지를 선택한다.

• srcset-sizes(srcset & sizes)

  <div class="rwd-container">
    <img class="rwd-srcset-img" src="../images/normal.jpg" alt="고해상도 콘텐츠 이미지 예시" 
           srcset="../images/small.jpg 550w,
                   ../images/medium.jpg 1024w,
                   ../images/large.jpg 1600w" sizes="550px, 1024px, 1600px">
     								    <!-- sizes="(max-width: 999px) 50vw, 100vw" -->
  </div>
  

  • 1배율일 경우 해당 srcset에 정해진 사이즈 구간별로 정확하게 바뀐다.
  • 2배율 이상일 경우 viewport 사이즈에 배율을 곱한 사이즈와 가장 가까운 크기의 이미지를 찾는다.
  • sizes 속성을 지정할 경우 해당 사이즈 구간별로 정확하게 바뀐다.

• <picture>

  • picture 요소는 반드시 <img> 요소를 하나 이상 가져야 한다.
  • picture 요소를 반응형으로 크기 조절하고 싶다면 <picture>가 아닌 내부의 <img> 요소에 css 를 적용해야 한다.
  • <source>는 선택적으로 사용하는 요소이고, srcset 속성을 지정해서 사용할 수 있다.
  • <source> 요소에 media 속성을 지정해서 media-query 처럼 구간을 설정할 수 있다.

반응형 배경 이미지

<div class="rwd-container">
  <div class="rwd-bg">
    <!-- 배경 이미지가 보여질 영역 -->
  </div>
</div>

.rwd-container {
      width: 50%;
    }
    .rwd-bg {
      background-color: yellow;
      background-image: url("../images/title.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      /* background-size: 100% 100%; 배경 이미지를 영역 안에 채우기 위해 크기를 줄이거나 늘린다. */
      /* background-size: cover; 배경 영역을 채우고 나머지는 잘라낸다. */
      /* background-size: contain; 이미지를 배경 영역 안에 온전히 채운다. */
      background-size: contain;
      width: 100%;
      height: 0;
      padding-top: 90%; /* 부모(.rwd-container) 크기(width)의 50% 만큼 차지한다. */
      transition: all 2s;
    }

iframe

• iframe은 html 문서 내부에 새로운 공간(문서)을 만든다. (inline-frame 형태)
• 보통 동영상이나 지도를 iframe 형태로 제공하는 경우가 많다.

video

• <video>

  • video tag 내부에 <source> 태그를 쓰고 src 속성을 사용해 영상을 링크시킨다.
  • <track> 태그를 이용해 자막도 달 수 있다.
  • <a> 태그를 활용해 대체 텍스트를 달 수 있다.

  <div class="rwd-container">
    <video autoplay controls poster="../media/poster.jpg" muted>
      <source src="../media/stories.mp4">
      <track src="../media/stories-en.vtt" kind="captions" srclang="en" label="English Caption">
      <a href="../media/stories.mp4">구글 개발자 이야기</a>
    </video>
  </div>
  

  • video file type

    • mp4 (대다수의 브라우저에서 재생 가능)
    • mov
    • ogg
    • vtt (웹 자막 파일)
    • webm

  • video tag에 autoplay 속성을 사용하지 않으면 chrome에서는 재생되지 않는다.

    • chrome 에서는 영상에 autoplay 되면 screen reader 에서 읽어주는 정보와 겹치기 때문에 접근성 차원에서 정책적으로 자동재생이 되지 않도록 막아놓았다.

  • 속성들

    • autoplay 속성 : 자동 재생
    • controls 속성 : 영상을 제어할 수 있는 기능을 제공
    • poster=”href” 속성 : 포스터 이미지를 띄워준다.
    • muted 속성 : 음소거

  • 반응형 비디오 콘텐츠

    body {
      margin: 0;
    }
    .rwd-container {
      width: 50%;
      background: yellow;
    }
    .rwd-video {
      width: 100%;
      height: auto;
    }
    

미디어 쿼리(media query)

• 특정 구간에 CSS를 cascading 시킨다. (덮어 쓴다.)

• 변화가 발생하는 특정 시점을 break-point 라고 한다.

  @charset "utf-8";
    
  /* 공통 코드 */
  body {
    background: yellow;
  }
    
  /* 모바일 디바이스 */
  @media screen and (min-width: 320px) and (max-width: 480px) {
    body {
      background: pink;
    }  
  }
    
  /* 태블릿 디바이스 */
  @media screen and (min-width: 481px) and (max-width: 1024px) {
    body {
      background: lime;
    }
  }
    
  /* 랩탑 및 와이드 스크린 디바이스 */
  @media screen and (min-width: 1025px) {
    body {
      background: skyblue;
    }
  }