23_10_21 CSS 공부정리

[코딩애플] 고급모듈

 

-비디오태그 사용법

-src : 비디오 경로

-controls : 재생버튼 등

    <video src="bridge.mp4" controls></video>

 

-아래와 같이 source태그를 쓰면 웹브라우저와 호환성을 챙길 수 있음.

    <video controls autoplay muted> //자동재생, 음소거(크롬은 autoplay속성을 쓰려면 muted도 같이 써줘야함)

        <source src="bridge.mp4" type="video/mp4">

        <source src="bridge-m.webm" type="video/mp4"> //위에꺼 안되면 밑에꺼 써주세요~

    </video>

-preload 속성

preload="none" 미리다운X
preload="auto" 미리다운O
preload="metadata" 미리다운 적당히

    <video controls preload="metadata">

        <source src="bridge.mp4" type="video/mp4">

        <source src="bridge-m.webm" type="video/mp4">

    </video>

-poster 속성 : 썸네일이미지

    <video controls poster="shoe1.jpg">

        <source src="bridge.mp4" type="video/mp4">

        <source src="bridge-m.webm" type="video/mp4">

    </video>

-loop 속성 : 무한반복

    <video controls loop>

        <source src="bridge.mp4" type="video/mp4">

        <source src="bridge-m.webm" type="video/mp4">

    </video>

 

-audio 태그 사용법

-controls : 컨트롤버튼

-muted : 재생시 음소거

    <audio src="bass.mp3" controls muted>

    </audio>

-preload 속성

preload="none" 미리다운X
preload="auto" 미리다운O
preload="metadata" 미리다운 적당히

    <audio src="bass.mp3" controls preload="none">

    </audio>

-video태그처럼 소스태그 사용가능

    <audio controls muted>

        <source src="bass.mp3">

    </audio>

 

비디오를 '배경'으로 쓰고싶다면 

 

유행은 지났지만 어떻게 하는지 알아봅시다. 

일반적인 Youtube 비디오 넣는 방법처럼 <iframe> 코드 복붙 이런게 아니라

비디오 파일을 직접 다운받아서 같은 폴더에 준비하고

다음처럼 레이아웃 짜면 됩니다. 

 

<div class="video-box">
  <video class="video-container" autoplay muted loop>
    <source src="img/bridge.mp4" type="video/mp4">
  </video>
  <h3 class="video-title">Buy Our Shoes!</h3>
</div>

 

source 파일형식을  여러개 준비할 경우 브라우저에 최적화된 비디오 파일을 지가 알아서 넣으니

여러가지 확장자의 비디오 파일이 있으면 <source> 여러개 넣는 것도 좋은 선택입니다. 

 

 

 

.video-box {
  height: 500px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.video-container {
  position: absolute;
  width : 100%;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);
  z-index: -1;
}

어떤 요소를 궁극의 가운데정렬을 하고 싶을 때

저렇게 position absolute를 주고 top, left, transform 속성을 차례로 줍니다.

그럼 position relative를 가진 부모에 대해 정가운데 위치시킬 수 있습니다.

max-width, width 등으로 크기 조정을 넣는 것도 좋습니다.

 

여기까지만 하면 비디오가 배경처럼 크게 보이며 

그리고 원하는 html을 <video> 하단에 적는 식으로 비디오 위에 글쓰고 그럴 수 있습니다. 

 

-transform, @keyframe 애니메이션

.ani-text {

    transform : rotate(30deg); //회전

    transform : translateX(100px); //x축이동

    transform : translateY(-100px); //y축이동

    transform : scale(2); //크기키우기

}

.ani-text {

    text-align: center;

}

.ani-text:hover {

    animation-name: 왔다갔다; //애니메이션 이름

    animation-duration: 1s; //애니메이션 시간

    animation-delay : 1s; //지연시간

    animation-iteration-count: infinite; //반복횟수

    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); //베지어

}

@keyframes 왔다갔다 {

    0% {

        transform : translateX(0px);

    }

    33% {

        transform : translateX(-100px);

    }

    66% {

        transform : translateX(100px);

    }

    100% {

        transform : translateX(0px);

    }

}

-margin-left대신 transform을 쓰는 이유 : 성능이 더 좋고 깔끔하게 나와서(하단에 이유 2가지)

1)브라우저 : html, css를 그래픽으로 나타내주는 프로그램
브라우저가 그림그리는 순서
1.Render Tree 만들기
2.Layout 잡기
3.Paint 하기
4.Composite 처리(css 처리, transform, opacity 등)
width,margin를 변경하면 ? -> 2번변경 -> 3번변경 -> 4번변경
color를 변경 -> 3번변경 -> 4번변경
transform변경 -> 4번만 변경
=> 따라서 margin변경보단 transform변경이 더 성능이 좋음.

 

2)웹브라우저는 쓰레드 1개만 사용
-자바스크립트실행
-HTML CSS처리
전부 한곳에서 함

transform같은건 브라우저에서 다른 쓰레드에서 처리해주기 때문에 더 빠름.

 

 

성능 잡을 수 있는 여러 방법1. will-change 쓰면 됩니다.

.box {
  will-change: transform;
} 

애니메이션을 주는 .box가 약간 느리게 동작한다면 

will-change : 애니메이션줄속성;

이걸 써놓으면 성능개선이 가능합니다. 바뀔 내용을 미리 렌더링해주는 속성이라 그렇습니다.

뭔가 이상하게 버벅일 때만 쓰시고 애니메이션이 스무스하게 잘 된다면 쓸 이유는 없습니다.

이상하게 많이 쓰면 브라우저 자체가 더 느려질 수 있습니다.

https://dev.opera.com/articles/ko/css-will-change-property/

 

성능 잡을 수 있는 여러 방법2. 하드웨어 가속

애니메이션이 너무 많아 CPU만으로 전부 연산이 불가능하다면

GPU의 도움을 받을 수도 있습니다.

.box {
  transform: translate3d(0, 0, 0);
}

transform : translate3d를 쓰면 3D 이동도 가능한데

이 속성의 경우 GPU를 사용해서 연산하게 됩니다.

그래서 translate3d(0, 0, 0) 이런 식으로 아무데도 움직이지 않는 3D 이동명령을 주고

뒤에 필요한 transform을 더 적용한다면 

GPU를 이용해서 .box가 가진 transform 속성들을 연산할 수 있습니다. 

부담을 덜고싶을 때 사용하면 됩니다. 

 

.rotate:hover {

    animation-name: rotate;

    animation-duration: 1s;

    animation-fill-mode: forwards; //애니메이션 끝 상태 유지

}

@keyframes rotate {

    0% {

        transform : rotate(0deg);

    }

    25% {

        transform : rotate(-15deg);

    }

    100% {

        transform : rotate(45deg) scale(1.5); //두개 동시에 쓸때는 띄워쓰기

    }

}