Peep

*예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다.

css만으로 반응형 비디오 만들기

동적인 값을 구할 때, 보통 js를 많이들 사용합니다.

하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠.

javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다. 

먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다.

보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다.

16:9 비율의 해상도 표

반응형 비디오를 만들기 위해 본인이 올리려는 비디오의 비율을 먼저 아셔야합니다.

모든 값은 반응형이므로 width:100%를 기준으로 생각하여 height값을 넣을 것입니다.

계산 방식 감이 오시죠?

자 그럼 16:9 비율의 동영상으로 가지고 작업한 html과 css를 가져와 보도록 하겠습니다. 

HTML

<div class="video_wrap">
  <iframe src="https://www.youtube.com/embed/cEN00wMFB2A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

비디오 태그(iframe, video)와 부모 태그가 필요합니다.

CSS

.video_wrap{ position:relative; width:100%; height:0; padding-bottom:56.25%; }
.video_wrap iframe{ position:absolute; width:100%; height:100% }

-비디오 영역에 실질적인 영역 값을 주게됩니다.

-위에서 계산한 비율 값을 넣어주는데, height가 아니라 padding-bottom 값으로 줍니다.

width:100%, padding-bottom:56.25%

여기서 왜? 

height가 아니고 padding-bottom으로 높이 값을 컨트롤하는지 의문인 분들이 있을 수 있습니다.

참조하는 태그가 다르기 때문입니다.

한번 예시를 들어보겠습니다.

-먼저 height를 사용해보도록 하겠습니다.

루트영역 .section을 만들어서 height:1000px을 주었습니다.

그 후에 height:56.25%를 준 결과입니다.

무엇을 참조하는지 가장 잘보이는 부분입니다.

height의 참조 기준은 부모 태그이기 때문에 .section의 height:1000px의 56.25%값이 적용되어 video_wrap의 높이 값이 562.5px로 height가 지정된 것이 확인됩니다.

이렇게 되면 비디오 비율이 깨져서 상, 하단에 검정 배경이 노출되는 것이 확인됩니다.

-padding-bottom값을 이용하면 어떻게 되는지도 보겠습니다.

height:0;을 준 후 padding-bottom:56.25%를 주었습니다.

높이 450px이 된 것으로 보아 padding값은 적용된 태그 자신을 참조하고 있음을 확인할 수 있습니다. 

비디오가 깨지지 않고있음이 확인됩니다.

결론을 내리면 아래와 같습니다.

-height의 %는 부모태그 참조

-padding의 %는 적용된 해당 자신을 참조

그래서 padding값을 사용해서 비디오를 반응형으로 만드는 것입니다.

그리고 padding값을 사용하기 때문에 css를 더 추가해줘야합니다.

css 코드를 보면 video_wrap(부모태그)에 position:relative;가 있고 ifram에 position:absolute가 있음을 보셨을 것입니다.

이것은 padding-bottom때문에 iframe이 영역 밖으로 밀려나게되는데 iframe을 absolute로 띄워서 얹기 위함입니다.

그리고 absolute를 사용하기 위해 relative로 부모태그를 기준으로 만들어준 것이구요.

이것이 이해가 안간다면 position에 대해 찾아보시기 바랍니다.

자 이렇게해서 완성본입니다.

See the Pen agyaae by leeyoonseo (@okayoon) on CodePen.

그렇다면 유튜브에서 가져오는 태그만일까?하고 html5 태그인 <video>로도 실험해습니다.

결론부터 말하면 <video> 태그를 사용할 때, 이러한 편법을 쓸 필요가 없습니다.

물론 써도 반응형 비디오가 되기는 합니다만, <video>태그는 자동으로 height를 맞춰줘서 불 필요한 작업입니다.

width:100%, height:100%; 를 동일하게 주었을 때의 결과입니다.

<video>태그 만이 비율을 맞춰 표현함을 볼 수 있었습니다.

따라서 <video>태그일 경우에는 위의 padding-bottom 편법을 쓰지 않아도 됩니다.

점수표

class는 10점

속성선택자 10점

id는 100점

inline은 1000점

imporatnt는?

행동

id 1개에 100점, 클래스 101개 1010점 비교

inline기입 1000점 클래스 101개 1010점 비교

important와 inline 비교

important와 id, inline 비교

속성 선택자 10점 클래스 10점 비교

See the Pen css specificity by leeyoonseo (@okayoon) on CodePen.

결과

id 1개(100점) > 클래스 101개(1010점)

inline style(1000점) > 클래스 101개(1010점)

important (??) > inline style (1000점)

important (??) > id, inline style

속성선택자 a[href=""] (10점) > 클래스 (10점)

최총

important > inline > id > 속성선택자 > class

#네이밍 케이스

1.케밥-케이스

kebab-case, spinal-case, Train-Case, Lisp-case

-하이픈으로 단어를 연결하는 표기법

-HTML 태그의 id, class 속성으로 흔히 사용됨.

2.파스칼 표기법

PascalCase, BackgroundColor, TypeName, PowerPoint

-첫 단어를 대문자로 시작하는 표기법

3.스네이크 케이스(뱀 표기법)

snake_case, background_color, type_name

-단어를 밑줄 문자로 구분하는 표기법

-perl, php, python, ruby, rust....

4.헝가리언 표기법

strName, bBusy, szName

-접두어를 사용하는 표기법

-str -> string, b -> boolean, sz -> null로 끝나는 문자열(string+zero)

# css 방법론

1.BEM

-개발, 디버깅, 유지보수를 위하여 가능한 한 명확하게 네이밍하는 것이 목표

-소문자, 숫자만을 조합

-조합은 하이픈(-)으로 연결하여 작명

-모든것이 클래스이고 중첩된 것은 없다.

블록(block)

-형태(red,big)가 아닌 목적(menu, button)에맞게 결정해야 한다. (header,menu,search-form...)

-환경에 영향을 받지 않아야한다.(여백, 위치 설정x)

-태그, id선택자로 사용하면 안된다.

요소(Element)

-블록안에서 특정 기능을 담당하는 부분

-block__element 형태로 사용(더블 언더바)

-형태(red,big)가 아닌 목적(item, text, title, list)에맞게 결정해야 한다.

-블록에 종속되어 있어 블록의 부분으롬나 사용할 수 있고 다른 요소의 부분으로 사용할 수 없다.

-선택적으로 사용가능해야 한다.(요소가 없을 수도 있다)

수식어(Modifier)

-블록이나 요소의 모양(color,size), 상태(disabled, checked..)를 정의한다.

-block__elemt--modifier, block--modifier(더블 하이픈)로 사용한다.

-블리언 타입, 키-벨류 타입이 있다.

불리언: 수식어가 있으면 값이 true라고 가정(form__button--disabled)

키-벨류:하이픈으로 연결하여 표시한다.(block__element--modifier)

혼합사용(Mix)

-block1,block2__element 형태로 사용가능

(?)-block2__element에 여백이나 위치를 지정하고 block1은 독립적으로 유지할 수 있다.

결론

-블록,요소,수식어의 목적에 적응되면 네이빙이 수월해짐

-용도와 형태 위치를 알수 있다보니 유지 보수 용이

-네이밍이 길어지니 sass, less에 적합

틀린 예시

-중첩이 있으면 안됨.

2.OOCSS(Object Oriented CSS) 객체지향 css

-구조와 모양으로 분리

-반복적인 것은 별도로 분리

-콘테이너와 콘텐츠의 분리(의존적인 스타일 사용x)

.title -> h2, h2.title

네이밍

-가능한 짧고 간결하게 작성

-동작과 형태가 예상 가능하도록 명확히 작성

-형태보다는 목적의 의미를 작성

-구체적이지 않고 일반적으로 사용가능하도록 작성

기존 방식

<a class="facebook_btn">Facebook</a>
<a class="twitter_btn">Twitter</a>

OOCSS 적용

<a class="btn facebook">Facebook</a>
<a class="btn twitter">Twitter</a>

.btn { 공통 버튼 스타일 정의 }

장점

-코드의 재사용성이 높아 코드의 길이가 줄어든다. (css 파일크기가 줄어드므로 속도 향상)

-새로운 요소를 추가할 때 기존 모듈을 통해서 재사용이 가능하고 쉽게 확장가능하다.(유지보수)

단점(비판의 시선)

-복잡해지는 HTML에서는 오히려 유지보수가 힘들다

-가독성이 떨어진다.

-미디어 객체와 함께 적용하기는 좋으나 프로젝트 전반적으로 적용하기에는 어렵다.

따라서 OOCSS, BEM 혼용으로 사용하는 곳들도 있다.

-재사용 가능한 객체들을 OOCSS, 그 이외에는 이름 규칙을 BEM으로 변형

-NHN, AirBnB등 많은 곳에서 혼용으로 사용함.

글 작성 당시 웹, 모바일 모두 해당하는 사항이었습니다.

이게 정상적인 모습인데, 사파리에서만 확인이 되는 부분이었습니다.

아래와 같이 라운드처리가 된 부분이 가려지지 않고 튀어나와있습니다.

border-radius가 적용된 부분이 overflow:hidden이 안되는 모습입니다.

css 적용 사항입니다.

첫번째로 든 의심은 특정 가상 선택자의 버그인가 생각이 들어서

:before -> :after로 변경해봤습니다. (X)

하위 엘리먼트의 가상선택자로도 변경해봤습니다. (X)

두번째는 가상선택자 버그인가 싶어서 태그로 변경했습니다. (X)

세번째는 border-radius를 다른 객체들에게도 줘봤습니다. (X)

네번째로 position:absolute를 relative로 변경했습니다.(X)

결론은 모두 원인이 아니었습니다.

이유가 뭐지 한참 고민하며 만져보던 중에 position값의 문제임을 알게되었습니다.

해결책으로는 동그라미의 위치를 맞추기 위해 넣었던 position값을 제거 하고 margin 값으로 변경했습니다. (O)

그러던 중에 가운데로 맞추는게 쉽지않고, 해당 객체 크기가 달라지만 margin 값은 의미가 없어질 것 같아서(가운데 맞추는 데 필요했습니다)

transform으로 변경하였습니다. (X)

.............. 

원하는 결과를 얻기 위해서는 margin 값만이 허용되었습니다.

저만 이런 문제가 생긴것 일리도 없는데, 검색해도 안나와서 잘 모르겠습니다....

아시는 분은 알려주세용..