1. 반응형 UI 작업

📌 이미지 스프라이트 🔗참고자료

• 이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들고 position 값으로 조정해서 찾는 기법
• 브라우저가 여러 개의 이미지를 불러오는 대신 하나의 이미지만 불러와도 되서 성능면에서 효율적이다.

📌 영상 배율 고정하고 반응형 만들기

• 🔻 혼자 생각해본 결과
  

.iframeWrapper {
  width: 600px;
  height: 500px;
  margin: 100px auto;
  background: pink;
}

iframe {
  width: 100%;
  height: 100%;
}

영상 배율이 이상하다...
게다가 width와 height가 고정되어 있어서 화면을 줄여도 전혀 반응하지 않는다.

• 💡 클래식 CSS 방법
  

.iframeWrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

왜 이렇게 되는 것일까?

1. 부모요소에 position: relative와 width: 100%를 주면 height값을 주지 않았기 때문에 height가 0이다. 그래서 자식요소까지 보이지 않게 된다.
   

2. 그래서 padding-top : 56.25%를 주면 자식요소까지 나타난다.

   그런데 왜 padding-top으로 지정하는 것일까?
   MDN padding을 참조하면 이런 문구가 있다.
   

즉, padding-top의 값이 백분율일 경우 부모 요소의 너비에 상대적으로 계산된다.

그리고 padding-top을 사용하는 이유는 가로-세로 비율을 유지하기 위해서이다.

일반적으로 iframe요소는 내부 콘텐츠의 가로-세로 비율에 따라 크기가 결정되는데, 이를 고정 비율로 유지하기 위해서는 부모 요소에 적절한 비율을 지정해야한다.

56.25% (9/16*100) = 16 : 9 비율에 해당하는 값이다.

가로 너비의 56.25% 에 해당하는 높이를 생성하게 된다.

따라서 자식 요소에 width : 100% height: 100%를 주게 되면 부모 크기에 맞춰지기 때문에 배율에 맞춰 크기 조절을 할 수 있다.

• 💡 모던 CSS 방법 🔗 참고자료

.iframeWrapper {
  aspect-ratio: 16/ 9;
}

iframe {
  width: 100%;
  height: 100%;
}

aspect-ratio는 기본 가로 세로 비율을 설정한다.

2. 회고

오늘도 역시나 강의 절반은 못알아들었다. 들으면 들을 수록 어려운 것이 CSS이다..
계속 좌절을 하면서 수업을 듣고 있지만 4주전에 나와 비교해보면 많이 성장했다. 그래도 다들 수업 잘 따라가고 있는 것같은데 나만 이해못하고 넘어가는게 많은 것 같다. 그래도 항상 강사님께서 힘이 되는 말을 해주셔서 멘탈잡기는 했지만 자바스크립트 넘어가면 또 얼마나 좌절할지 걱정이다.

그래도 오늘 약간 자신감을 가졌던 부분이 저번 과제 코드 리뷰했을 때다. 정말 신기하게 내가 마크업한 순서와 CSS style 이 전부 강사님 방식과 비슷했다. 내가 코드가 틀렸다는게 아니라서 다행이였다.

오늘 마지막 과제가 나왔는데 수업 내용을 이해 못해서 복습 먼저했다. 복습을 하고 나니까 어느정도 이해가 가서 과제를 겨우 끝낼 수 있어서 정말 다행이였다. 강사님은 쉬운 예제라고 하셨는데 나만 항상 어려운건가...ㅎㅎㅎ