[바닐라자바스크립트] custom video player - css

✅ CSS

• 비디오 재생 화면창의 디자인을 위해 CSS 추가!

📃 코드

@import url("https://fonts.googleapis.com/css?family=Questrial&display=swap");

* {
  box-sizing: border-box;
}

body {
  font-family: "Questrial", sans-serif;
  background-color: #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
  margin: 0;
}

h1 {
  color: #fff;
}

.screen {
  cursor: pointer;
  width: 40%;
  height: 40vh;
  background-color: #000 !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.controls {
  width: 40%;
  background-color: #333;
  color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.controls .btn {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.controls .fa-play {
  color: #28a745;
}

.controls .fa-stop {
  color: #dc3545;
}

.controls .fa-pause {
  color: #fff;
}

.controls .timestamp {
  color: #fff;
  font-weight: bold;
  margin-left: 10px;
}

.btn:focus {
  outline: 0;
}

@media (max-width: 800px) {
  .screen,
  .controls {
    width: 90%;
  }
}

📃 TIL

✔️ 미디어쿼리

• 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공
• 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문에 반응형 웹 디자인의 중요한 부분
• 터치스크린 등 같이 실행 중인 환경에 대한 여러 내용을 탐지하는 데도 사용할 수 있음
• 아래의 코드는 화면 너비가 800px 이하일 때 특정 요소들의 스타일을 변경하는 것

  @media (max-width: 800px) {
    .screen,
    .controls {
      width: 90%;
    }
  }

✔️ 중앙 정렬

• display: flex; : 해당 요소를 Flex Container로 지정
  • 내부의 자식요소들을 flex items로 갖게됨
• flex-direction: row : 행(가로) 방향으로 아이템을 배치
• flex-direction: column : 열(세로) 방향으로 아이템을 배치
• align-items: center; : flex items를 수평 방향으로 중앙에 정렬
• justify-content: center; : flex items를 수직 방향으로 중앙에 정렬