18일차_반응형 컨텐츠 만들기(CSS)

1. 반응형 이미지

---

1.1 이미지 포맷

---

이미지 포맷의 종류

1. GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다.
2. JPG/JPEG (Joint Photographic Expert Group image): 매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다.
3. PNG (Portable Network Graphics) : 왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다.
4. SVG (Scalable Vector Graphics) : SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합니다.
5. WebP (Web Picture Format) : 압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷입니다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷입니다.
6. AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷입니다. 아직 지원하지 않는 브라우저가 많음에 주의해야합니다.

SVG파일과 PNG파일은 언제 어떤걸 사용할까?

https://cocosoft.kr/386#:~:text=svg%ED%8C%8C%EC%9D%BC%20%EC%82%AC%EC%9A%A9%EC%9D%B4%20%EC%A6%9D%EA%B0%80%EB%90%98%EA%B3%A0%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4.%20%ED%8A%B9%ED%9E%88%20%EB%B0%98%EC%9D%91%ED%98%95%20%EC%9B%B9%EC%9D%B4%EB%9D%BC%EB%A9%B4%21%21%21%20%ED%95%84%EC%88%98%ED%95%84%EC%88%98%21%21%20%ED%95%9C%EB%B2%88,%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B2%A0%EC%8A%B5%EB%8B%88%EB%8B%A4.%20png%ED%8C%8C%EC%9D%BC%20%28445x229%29%20%2816.8KB%29%20%2F%20svg%ED%8C%8C%EC%9D%BC%20%28445x229%29%20%287.5KB%29

블로그 로고 벡터이미지 svg파일로 만들기 및 사용법

---

1.2 반응형 이미지 만들기

---

1. width: 100% 브라우저 크기 기준으로 100%
2. max-width: 100% 이미지 원본 크기의 100%

---

 

2. 반응형 백그라운드 이미지

---

2.1 백그라운드 사이즈 속성들

---

1. Background-size: px —> 이미지의 크기를 고정합니다.
2. Background-size: auto —> 이미지의 종 횡비를 통해 자동으로 다른 축의 크기를 결정합니다.
3. Background-size: % —> %를 사용하면 컨테이너의 넓이에 비례하도록 사이즈를 조절할 수 있습니다.
4. Background-size: contain —> 컨테이너 전체를 덮지만 이미지를 자르지 않게 유지합니다.
5. Background-size: cover —> 컨테이너 전체를 완전히 덮습니다.

2.2 반응형 백그라운드 이미지 만들기

---

** background-size는 언제 contain을 혹은 cover를 사용하면 좋을까요?? **

1. contain을 사용하면 이미지를 다 보여주려고 하기 때문에, 화면크기에 따라 이미지 크기가 변화한다. 하지만 화면에 빈공간이 생긴다.
2. cover를 사용하면 화면에 공백없이 다 채워준다. 하지만 이미지가 반응형이 아니라 고정되어 있다.

결론: 둘 다 아쉬움.

 

반응형 백그라운드 이미지 해결방법

Position(포지션) : background-size를 cover 사용하고 background-position: center 를 해주면 반응형 백그라운드 이미지를 설정할 수 있다.

article {
            width: 100vw;
            height: 100vh;
            background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2l0eXxlbnwwfHwwfHw%3D&w=1000&q=80");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

위 방법의 축약형 코드

background: url("<https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2l0eXxlbnwwfHwwfHw%3D&w=1000&q=80>") center /cover no-repeat;

 

---

3. 반응형 동영상

---

3.1 동영상 상식

---

브라우저가 지원하는 비디오 포멧

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers

 

Video 속성

1. preload =“none”, “auto”; : 페이지를 로드할때 영상을 미리 로드할지 말지 결정합니다.
2. Poster : 비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정합니다.
3. Controls : 브라우저가 재생에 필요한 컨트롤러를 제공할지 지정합니다.
4. Autoplay:  파일이 다운로드가 완료되면 자동으로 재생될지 지정하는 속성입니다.
5. Muted: 소리를 끕니다.
6. Loop : 비디오가 끝나고 반복적으로 재생할지 지정합니다.

 

3.2 동영상 만들기

---

  1. video 태그로 만들기

<video autoplay controls loop src="next_level.mp4"></video>

 

  2. youtube 동영상으로 만들기

 

유튜브 동영상은 유튜브의 API기준을 따라주어야 한다.

유튜브 동영상은 화면 크기를 width,height: 100%주어도 작동하지 않는다.

대신에 width,height를 각각 100%,100vh를 주어야 반응형이 된다.

 

하지만 이 또한 레터박스(동영상 주위에 검은 공간)가 생긴다..!

 

https://developers.google.com/youtube/player_parameters?hl=ko

<iframe class="video-next-level"
            src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>

그렇다면 레터박스가 없는 반응형 동영상은 어떻게 만들까??

 

3.3 반응형 동영상 만들기

---

이미지 테그나 동영상 테그의 height는 기본적으로 width를 기준으로 결정되었다.

예를 들어 16:9비율의 이미지나 동영상이라면 width를 160px로 하면 height는 저절로 90px이 된다.

이를 종횡비에 따라 결정된다고 한다.

 

종횡비란?

가로의 크기에 따라 높이가 결정됨

 

반응형 동영상을 만들기 위해서 종횡비를 이용해야 한다.

 

<article class="cont-video">
	<iframe class="video-next-level"
            src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</article>

 

.cont-video {
    position: relative;
    padding-top: 56.25%;
		/* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례합니다. */
		/* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px 과 같습니다. */
} 

.video-next-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

 padding-top: 56.25%대신 height: 56.25vw 를 주어도 결과는 같다.

 

여기서 padding-top 또는 height: ?vw 가 곧 동영상의 높이이다.

 

3.3.1 여기서 왜 padding-top이 왜 동영상의 높이인가?

---

배경:

위에서 동영상은 cont.video라는 부모요소 안에 있는 자식요소이다.

부모요소의 높이가 설정되지 않으면 자식요소에 아무리 height를 주어도 높이에 변화가 없다.

 

해결책:

이런 경우에는 자식요소에 padding-top을 주면 그 크기만큼 높이가 결정된다.

현재 부모요소의 높이는 결정되지 않았기 때문에,

padding-top을 통해 자식요소인 동영상의 높이를 조절할 수 있다.

(또는 height: ? vw를 통해서도 조절할 수 있다.)

 

일반적으로 동영상은 16:9의 비율이다.

따라서 padding-top의 값은 9/16 *100 즉 56.25%를 설정해준다. 

그러면 종횡비에 따라 width : height = 1 : 0.5625 로 설정이 된다.

결국 동영상의 width와 height가 원본 크기와 딱 맞아 떨어지면서 레터박스가 사라지게 된다.

 

padding-top 실습해보기(주석을 하나씩 없애보세요)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Static Template</title>
    <style>
      .div1 {
        background: black;
        /* padding-top: 50%; */
      }

      .div2 {
        width: 100px;
        padding-top: 50%;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div class="div2"></div>
    </div>
  </body>
</html>