반응형 화면 비율 - ban-eunghyeong hwamyeon biyul

Question

#반응형웹 #높이 #넓이 #css #weight #height

목차 Show

padding-top 사용
비율 계산하기
컨텐츠 넣기
컨텐츠가 길어질 경우
video(iframe) 비율대로 줄이기

웹을 디자인하거나 개발할 때 높이와 넓이는 가장 기본적인 요소 중 하나이죠. 높이와 넓이가 정해져있지 않다면 디자인자체가 불가능하기 때문이죠. 홈페이지의 화면이 어떻게 구현될 것이며, 어느정도의 크기로 잡히는 지 명확한 틀이 있어야 커뮤니케이션이 가능하죠. 그래서 오늘은 width와 height에 대해서 포스팅해볼까합니다.

Width는 넓이(가로) Height는 높이(세로)

가장 기초적인 개념이죠. 특정 컨텐츠의 넓이는 몇 픽셀이다를 정할 때는 width를 이용하여 정의하고 높이를 정의할 때는 height를 사용하여 정의합니다.

그래픽의 가장 기초적인 크기단위죠. 픽셀입니다. 하나의 점을 의미하며 디지털컨텐츠의 경우 '점' 하나는 rgb를 조합한 색을 가지고 있습니다. 이러한 점이 연속되는 과정에서 선이 만들어지고 선들이 모여 이미지가 되죠.

현실에 물건을 길이를 잴 때, cm와 같은 단위를 사용하죠. 같은 물건이라면 어디서 재든 같은 사이즈가 나옵니다. 하지만 그래픽의 경우 아이폰으로 볼 때와 데스크톱으로 볼때, 갤럭시, 맥북으로 볼 때 모두 다르게 이미지가 보입니다. 이것을 자로 잰다면 모두 다른 값이 나올 수 밖에 없죠.

그래서 어떤 디바이스에서 보든 같은 사이즈를 보여주는 단위, 픽셀을 사용하게 됩니다.

일반적으로 핸드폰의 경우 넓이가 320px이상, 태블릿의 경우 768px이상 노트북의 경우 1080px이상의 사이즈를 가집니다. 우리가 흔히 쓰는 맥북에어의 경우 브라우저 해상도는 1440px입니다. 즉 화면의 절반정도의 넓이를 표현할 때는 전체의 절반인 720px을 1/3은 460px이 되는 것이죠.

그리고 이를 표현하는 것은 아주 간단합니다. sample이라고 하는 css 속성을 정의한다면 아래와 같습니다.

.sample { width:720px height:450px; }

이렇게 되면 SAMPLE이라고 하는 속성은 아이폰에서는 브라우저 크기를 넘기게 되며, 태블릿에서는 비슷한 사이즈를 노트북과 데스크톱에서는 절반 또는 그 이하의 사이즈로서 보여지게되죠. 즉 기기에 따라 다른 크기로 보이는 상태가 됩니다.

그렇다면 sample이 모든 기기에서도 같은 크게로 보이게 하려면?

vw와 vh는 화면전체를 기준으로 하는 단위입니다. 아이폰이는 갤럭시든 맥북이든 피시방 모니터이든 화면 전체의 가로길이를 100vw로 잡고, 전체 세로길이를 100vh로 잡는 것이죠. 이렇게되면 맥북에서의100vw값은 1440px이지만 핸드폰에서는 360px정도로 바뀌게되죠.

특히 vw속성은 반응형웹에서 가장 많이 사용되는데요. 클라이언트가 스크롤바가 없는 형태의 웹을 주문했다면, 어떤 디바이스에서든 전체사이즈는 100vh가 되야하죠. 이를 통해 푸터가 바닥에 붙어있는 형태를 개발할 수 있게됩니다.

.sample2 { width:100vw; height:100vh; }

해당 사이트는 취미제품을 파는 사이트인데요. 감성적인 측면을 잘 강조한 디자인이 되어있는데요. 여기가 위의 적저한 예시로 적용됩니다. 푸터는 아래에 박혀있고, 스크롤바가 존재하지 않는 컨텐츠이죠. 이때 헤더의 높이는 150픽셀 푸터는 100픽입니다. 그렇다면 컨텐츠는 100vh에서 250픽셀을 뺀 값이겠죠. 이럴 땐 아래와 같이 적용합니다. 식은 calc함수를 사용합니다.

.header { height:150px; } .content { height:calc(100vh - 250px) } .footer { height: 100px; }

이렇게 사용하면 전체화면에 비율과 픽셀 둘다 유동적으로 움직이는 값을 설정할 수 있습니다. 해당 홈페이지는 태블릿에서나 모바일에서나 디자인은 바뀌지만 스크롤바없이 꽉찬화면으로 만들어집니다.

나중에는 이를 응용하면 풀페이지 스크롤 홈페이지를 개발할 수 있는 기초가 되기도 합니다.

개요

이 https://css-tricks.com/aspect-ratio-boxes/ 페이지를 보고 번역/의역을 했습니다.
자세한 내용은 위 링크를 참고해주세요.
유투브 동영상 또는 반응형 작업시에 필요한 비율에 대해 다뤄봤습니다.

padding-top 사용

padding-top 또는 padding-bottom 사용 padding 값은 요소의 width을 참조한다.
- width값이 100px이고 padding이 20%이면 px로 계산하면 20px이다.
- padding-top을 56.25%을 주면 16:9 비율로 보인다.

height: 0을 주면 박스 모델 높이에 영향을 주는 것이 padding-top밖에 없다.

.video {
  overflow:hidden;
  padding-bottom:56.25%; /*Using 20% for padding makes the height of the box equal to 20% of its width.*/
  position:relative;
  height:0;
}
.video iframe {
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

<div class="video">
  <iframe width="560" height="315" src="youtube address" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

비율 계산하기

항상 비율이 16:9로 같지 않으므로 56.25%로 계속 사용할 수 없고 비율에 맞게 조정해야 한다.
비율을 구하는 방법은 calc를 이용한다.

// 공식
padding-top:  calc(세로  /  가로  *  100%);

// 예)
padding-top:  calc(591.44  /  1127.34  *  100%);

컨텐츠 넣기

.aposect-ratio-box에 백그라운드에 이미지를 사용해 비율대로 줄일 수가 있다.
컨텐츠를 넣게 되면padding 때문에 영역밖으로 나가게 되고 overflow: hidden가 적용되어 보이지가 않는다.
이럴땐 안에 영역을 하나 더 만들고 position: absolute로 띄운다.

.aspect-ratio-box {
  height: 0;
  overflow: hidden;
  padding-top: calc(591.44 / 1127.34 * 100%);
  background: blueviolet;
  position: relative;
}
.aspect-ratio-box-inside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<h2 class="aspect-ratio-box">
  <div class="aspect-ratio-box-inside">
    Happy Birthday
  </div>
</h2>

여기서 가운데 정렬까지 하고 싶으면 아래와 같이 display: flex를 사용한다.
폰트 사이즈까지 줄일려면 .viewport-sizing를 추가한다.

.flexbox-centering {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.viewport-sizing {
  font-size: 5vw;
}

<h2 class="aspect-ratio-box">
  <div class="aspect-ratio-box-inside">
    <div class="flexbox-centering">
      <div class="viewport-sizing">
          Happy Birthday
      </div>
    </div>
  </div>
</h2>

컨텐츠가 길어질 경우

overflow: hidden이므로 컨텐츠가 길어지면 내용이 짤린다.

해결방법

overflow: auto사용

스크롤이 생겨 내리면서 볼 수 있지만 디자인이 보기엔 좋지 않다.

.aspect-ratio-box {
height: 0;
/*overflow: hidden;*/
overflow: auto;
padding-top: calc(591.44 / 1127.34 * 100%);
background: blueviolet;
position: relative;
}

구조 변경(가상클래스 사용 : after, before)

display: flex를 제거하므로 가운데 정렬을 할 수 없다.

.aspect-ratio-box {
background: blue;
}
.aspect-ratio-box::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: calc(591.44 / 1127.34 * 100%);
}
.aspect-ratio-box::after { /* to clear float */
content: "";
display: table;
clear: both;
}

<h2 class=".aspect-ratio-box">
  /* Contents */
</h2>

video(iframe) 비율대로 줄이기

FitVids 이용
- http://fitvidsjs.com/
- https://github.com/davatron5000/FitVids.js

브라우저 지원
- IE9 이상 가능, 나머지는 확인 중

동영상(iframe)위에 감싸주는 태그를 작성 후 적용한다.

<head>
  <script src="./jquery.fitvids.js"></script>
</head>

<body>
  <div class="video">
    <iframe width="560" height="315" src="동영상 주소" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

<script>
  $(".video").fitVids();
</script>
</body>