반응형 웹 작업 시 알아두면 유용한 CSS

이미지

유동적인 이미지는 반응형 디자인의 중심입니다. 이미지를 유동적으로 만드는 것은 매우 쉽습니다.

예를 들어, 이미지가 600px 너비 컨테이너 내에 표시되면 이미지는 600px입니다. 컨테이너 크기를 350px로 조정하면 이미지는 사용 가능한 최대 너비 (이 경우 350px)로 자동 크기가 조정됩니다. 그러면 모든 화면 크기에 맞게 이미지 크기가 자동으로 조정됩니다.

img {
     max-width: 100%;
     height: auto;
}

 

HTML5 비디오

HTML5 반응형 video는 CSS 파일에 다음을 추가하면 됩니다.

video {
    max-width: 100%;
    height: auto;
}

YouTube 동영상

CSS 파일에 다음을 추가하면 됩니다.

<!-- HTML -->
<div class="video-container">
    <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>
 

/* CSS */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

데이터 테이블

테이블에 출력되는 데이터가 많을 경우 모바일 화면에서 내용을 보기 힘든 경우가 있습니다. 그러나 다음은 테이블을 반응형으로 만들고 모바일 사용자에게 더 나은 경험을 제공하는 유용한 기술입니다.

See the Pen Responsive Table Demo by CSS-Tricks (@css-tricks) on CodePen.

 

배경 이미지

배경 이미지는 웹 디자인에 널리 사용되므로 반응형 웹 페이지를 만들 때 방문자 화면 크기에 맞게 조정할 수 있어야 합니다.

CSS에 background-size를 사용하면 그렇게 할 수 있습니다. 특정 크기를 지정할 수는 있지만 cover너비와 높이가 요소의 너비 / 높이와 같거나 더 크도록 브라우저에 배경 이미지의 크기를 비례 적으로 조정하도록 지시할 수도 있습니다. 이렇게 하면 이미지가 작고 큰 화면에서 모두 표시됩니다.

다음 예제에서는 background-size속성이 body요소에 적용되므로 이미지가 브라우저 창에 맞게 조정됩니다.

 

body {
  background-image: url(images/bg-image.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

 

[ 관련글 ]

· Responsive Data Tables