클론코딩 유튜브 사이트(HTML,CSS,JavaScript) #2. 헤더 및 비디오 플레이어 화면 구성 CSS

완성된 헤더부분

flexbox를 사용해서 header를 만들어줬다.

코드

header { 
  display: flex;
  justify-content: space-between;
  padding: var(--padding);
  background-color: var(--white-color);
  color: var(--black-color);
  font-weight: bold;
}

header .logo {
  font-size: var(--font-large);
}

header .logo i {
  color:var(--red-color);
}

header .icons .fa-magnifying-glass{
  margin-right: var(--padding);
}

---

비디오 플레이어 부분 (코드 적용하기 전 화면)

문제. 비디오플레이어 화면 부분을 반응형으로 만들어줘야한다.

코드

.player {
  text-align: center;
}

.player video {
  width: 100%;
  height: 100%;
  max-width: 1000px;
}

 

완성된 비디오 플레이어 화면 구성

반응형 화면으로 구성해줬다.

 

공부 

최대로 커질 수 있는 경계선을 주는 코드 max-width

max-width : 0 px