부트스트랩5에서 비율

며칠 전, 부트스트랩5에서 동영상 비율 및 반응형에 대해 적었다. 그때는 유튜브, 카카오TV, 네이버TV에서 퍼온 아이프레임 소스로 붙인 동영상 비율 및 반응형에 대한 것이었다. 아래에 부트스트랩 5에서 유튜브를 21:9, 16:9, 4:3, 1:1 비율로 나타낸 것이다. 

 

코드펜에 유튜브를 로딩을 해야 하므로 느리다. 전부터 느끼자만 유튜브는 느리다. 코드펜이 이미 로딩한 후 유튜브도 로딩해야 한다. 참고로 아래는 무료로 온라인으로 HTML, CSS, 스크립트를 편집할 수 있는 코드펜이라는 것이다.

 

코드펜 안 동영상이 잘리는 것을 보기 바란다. 어떤 크기에서도 잘리지 않는 비율을 16:9 비율이라는 것을 알 수 있다. 동영상을 넓게 보고 싶다면 HTML을 클릭하면 된다. HTML만 보고 싶다면 Result를 클릭하면 된다.

 

16:9 (1.7:1) (16:9 = 42:32)는 너비 16, 높이 9의 비율을 갖는 가로세로비이다. 2010년대 이후로, 16:9는 텔레비전과 컴퓨터 모니터의 가장 일반적인 화면 비율일 뿐만 아니라 HDTV, 풀 HD, 디지털 텔레비전, 아날로그 와이드 스크린 텔레비전의 국제 표준이다. - 출처 : 위키백과

 

See the Pen 동영상 비율 : 유튜브 by 백전백승 (@100_jskim) on CodePen.

 

 

 

하지만 비율을 유튜브에만 적용되는 것이 아니고 이미지를 포함 모든 것에 적용된다. 아래는 동영상이 아니고 내 플리커에서 퍼온 이미지이다. 아래 HTML 소스를 보면 알겠지만 이미지의 크기를 설정하기 위해 width, height 값을 지정하지 않았다. 단지 비율을 클래스에 ratio ratio-16x9을 추가해 크기를 위한 비율만 지정했다.

 

코드펜이 로딩되자마자 코드 펜 안의 플리커 이미지는 이미 로딩됐는데 위 유튜브는...

 

See the Pen 비율 - 부5 by 백전백승 (@100_jskim) on CodePen.

 

비율로 하면 아래와 같이 된다. 그림 아래 소스를 보면 알겠지만 클래스에 ratio ratio- 추가한 후  1:1, 4:3, 16:9, 21:9 비율이면 추가해준다.

 

 

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

 

위에 없는 비율인 2:1로 만들고 싶다면 클래스에 ratio를 추가하고 style="--bs-aspect-ratio: 50%"라고 해주면 된다고 한다.

 

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

 

그래서 50% 수치만 변경해보았다. %로 나타내면 다양한 비율을 나타낼 수 있을 것이라 생각하고 유튜브를 해봤다. 하지만 유튜브는 적용되지 않았다. 위에서 적었듯이 소스는 HTML을 보면 된다.

 

See the Pen 다양한 비율 by 백전백승 (@100_jskim) on CodePen.

 

---

이 글에서 무료 코드 편집기로 코드펜(CodePen)을 사용했지만 예전에 JSFiddle을 자주 사용했다. 변경한 이유는 코드펜이 편했기 때문이다. 2015년에 적은 아래에서 JSFiddle에 대한 글을 적었지만 내가 보기에도 별 내용이 없으니 볼 필요 없다.

 

티스토리에서 코드다루기

---

아래 글은 며칠 전에 적었던 부트스트랩 3, 4, 5 버전에서 유튜브 등 동영상 비율과 반응형에 대한 내용이다. 부트스트랩 하위 버전에 대해 알 필요 없다면 볼 필요 없다.

 

부트스트랩3,4,5에서 동영상 비율과 반응형