• 이용 문의
  • 회원가입
  • 로그인

[responsive] CSS - RES Video - (반응형 동영상)

예제1 - 부모 요소 너비의 100%만큼 차지

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

video {

  width: 100%;

  height: auto;

}

</style>


<video width="400" controls>

  <source src="mp4 영상주소" type="video/mp4">

  <source src="ogg 영상주소" type="video/ogg">

  Your browser does not support HTML5 video.

</video>


결과보기


 

예제2 - 영상 원본 크기를 최대 크기로 설정

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>

video {

  max-width: 100%;

  height: auto;

  margin:0 auto;

  display:block;  

}

</style>

<video width="400" controls>

  <source src="mp4 영상주소" type="video/mp4">

  <source src="ogg 영상주소" type="video/ogg">

  Your browser does not support HTML5 video.

</video>


결과보기

 

※ video 태그는 inline 속성의 태그임. 가운데정렬 시키려면, 핑크색 코드 추가해야 함.

즐겨찾기 (= 북마크) : Ctrl + D

토트넘 vs 리버풀 축구 시작
분류 제목
intro CSS - 정의와 장점 + CSS 기본 문법
intro CSS - 발전사 (CSS1 → .01 → CSS3)
intro CSS - 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 + 속성 …
selector CSS - 선택자 (Selector) 종류
selector CSS - 아이디(id) , 클래스(class) 선택자 + CSS적용 우선순위 ★★★★★
selector CSS - 전체선택자 (*)
selector CSS - 요소선택자 (요소)
selector CSS - 병렬선택자 (요소,요소) ★ - 요소 여러개 나열
selector CSS - 자손선택자 (요소 요소) ★ - 특정 요소 아래의 모든 자손 요소
selector CSS - 자식선택자 (요소>요소) ★★ - 요소 바로 아래에 있는 자식요소만 : (IE7)
selector CSS - 인접선택자 (요소+요소) ★★ - 앞요소에 입접한 뒤형제요소 : (IE7)
selector CSS - 속성 선택자 (요소[속성]) - 특정속성보유요소: (IE7)
selector CSS - 속성 값 선택자 (요소[속성=속성값 단어]) - 특정 속성값단어 보유 요소 : (IE7)
selector CSS - 속성 값 선택자 (요소[속성~=속성값 단어]) - 특정 속성값단어 (단독 또는 단어앞뒤공백)인 요…
selector CSS - 속성 값 선택자 (요소[속성|=속성값]) - 특정속성값 또는 뒤에 하이픈 연결된 속성 보유 요소 …
selector CSS - 속성 값 선택자 (요소[속성^=속성값]) ★ - 속성값 문자열로 시작하는 속성 보유 요소 (IE…
selector CSS - 속성 값 선택자 (요소[속성$=속성값 문자열]) : (IE7)
selector CSS - 속성 값 선택자 (요소[속성*=속성값 문자열]) : (IE7)
selector CSS - 링크 선택자 (a:link) (링크속성) - 방문 않은 링크
selector CSS - 링크 선택자 (a:visited) (비지티드속성) - 이미 방문한 링크
selector CSS - 링크 선택자 (a:hover) (허버속성) - 링크에 마우스를 올려놓을 때
selector CSS - 링크 선택자 (a:active) 링크를 클릭할 때
selector CSS - 링크 선택자 (input:focus) : (IE8)
selector CSS - 가상 선택자 (요소:first-letter)
목록

방문자 수

오늘 310
어제 398
최대 620
전체 452,087
Since 2012