오늘의 키워드📌

• 반응형 이미지
• 반응형 백그라운드 이미지
• 반응형 동영상

1. 반응형 이미지

1-1. 이미지 포맷 종류

이미지 포맷의 종류를 한 번 더 살펴보자.

• GIF(Graphics Interchange Format) :
  256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 든다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능하다. 애니메이션 처리가 가능하다.

• JPG/JPEG (Joint Photographic Expert Group image):
  매우 화소가 높고, 용량도 적지만 투명처리가 불가능하다.

• PNG (Portable Network Graphics) :
  웬만한 컬러는 모두 표현 가능하기 때문에 투명 영역 처리는 가능하지만 용량이 크다.

• SVG (Scalable Vector Graphics) :
  SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하다.

• WebP (Web Picture Format) :
  압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷이다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷이다.

• AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷이다. 아직 지원하지 않는 브라우저가 많음에 주의하자.

1-2. 반응형 이미지 만들기

1. width: 100%
2. max-width: 100%

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

2-1. 백그라운드 사이즈 속성들

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

2-2. 반응형 백그라운드 이미지 만들기

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. Video 속성

• preload = "none", "auto : 페이지를 로드할 때 영상을 미리 로드할 지 결정한다.
• poster : 비디오를 내려받을 동안, 영상이 재생될 때 까지 표시할 이미지를 지정한다.
• controls : 브라우저가 재생에 필요한 컨트롤러를 제공할 지 지정한다.
• autoplay : 파일이 다운로드가 완료되면 자동으로 재생될 지 지정하는 속성이다.
• muted : 소리를 끈다.
• loop : 비디오가 끝나고 반복적으로 재생할 지 지정한다.

3-2. 동영상 만들기

video 태그로 만들기

<video autoplay controls loop src="동영상.mp4"></video>

youtube 영상으로 만들기

<iframe class="video-next-level"
            src="https://www.youtube.com/..."
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>

3.3 반응형 동영상 만들기

<article class="cont-video">
	<iframe class="비디오"
            src="https://www.youtube.com/..."
            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과 같다. */
} 


.비디오 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

몰랐던 점 ✏️

• 반응형 컨텐츠
  • 반응형 이미지
  • 반응형 백그라운드 이미지
  • 반응형 동영상
• 미디어쿼리

오늘 하루를 정리하며.. 🌃

구현 실습이 끝났지만 강사님의 코드를 참고해서 새로 만들어 봐야겠다! 나와 강사님의 코드는 달라도 너무 달라~ 마침 금요일이 휴강이기도 하니 목요일, 금요일 동안 달려봐야겠다!

그리고 다음주 부터는 대망의 자바스크립트 수업이 시작된다. 무지의 상태에서 수업을 듣는게 얼마나 험한 고생 길인지 느꼈기에.. 자바스크립트.. 쉽지 않겠지만.. 주말동안 최대한 예습을 해놔야겠다.

좋아 한 번 가보자구!!!!