유튜브 화면 만들어보기

Last updated 4 years ago

Was this helpful?

유튜브 화면 만들어보기

모든 요소에 style 적용하기

모든 요소에 패딩과 마진을 0 으로 주고싶다. 또한 box 내부 컨텐츠 사이즈 + 패딩 마진 이 box 의 사이즈가 되도록 만들어 보자.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

구글 폰트를 사용해보자

에 접속하자.
원하는 폰트를 고르고 select 하자
- 이 과정에서 여러 개의 폰트를 선택할 수 있다.
이후 selected familes 를 눌러보면 이런 링크가 생긴다. <link href="https://fonts.googleapis.com/css2?family=**Noto+Sans+KR:wght@100**&family=**Roboto:ital,wght@1,100**&display=swap" rel="stylesheet">
- Seleted 된 폰트가 두개인걸 알수있음
이 링크를 html 의 헤드에 복사해 넣자.
이후에는 css에 font-family: 'Noto Sans' 처럼 사용할 폰트를 지정해주자.

버튼의 기본 속성을 바꾸자

버튼은 기본적으로 border 이 있다. 하지만 경계선이 거슬리므로 그냥 지워주자. 또한 마우스를 올렸을 때 포인터의 모양이 바꾸는것까지 해보자.

button,
button:focus {
  /* 겉을 둘러싼느 경계선을 없앤다. */
  border: none;  
  /* 마우스를 대면 포인터의 모양이 손가락으로 변함 */
  cursor: pointer;
  /* 마우스가 올라갔을 때 나오는 테두리 없앰 */
  outline: none;
}

video 속성으로 넣은 비디오의 크기를 어떻게 조절해?

우선 Video 태그가 들어있는 박스의 사이즈에 맞추자. 맞추기 위해서는 width: 100% 등을 사용하면 된다.

이렇게 되면 문제가 브라우저의 크기를 매우 크게만들면 html 에 비디오 밖에는 보이지 않게된다. 이 문제를 해결하기 위해서는 max-witdh 를 지정하면 됨

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

화면이 아래로 스크롤 도 비디오는 고정시키고 싶어!!

position 을 sticky 로 설정해야 한다.
- 하지만 이거가지고는 되지 않는다. 왜? 고정 될 위치를 지정하지 않았기 때문
- top, right, bottom, left 등의 위치를 지정해주는 스타일이 필수다.
위치 지정해주기
- 비디오를 화면위 맨 위에 고정시키고 싶으므로 top: 0 스타일을 넣어준다.

.player {
  /* 스크롤링을 해도 플레이어의 위치는 고정! */
  position: sticky; /* 고정 될 위치를 지정해줘야한다! */
  top: 0;
  text-align: center;
  background-color: var(--black-color);
}

긴 텍스트를 ... 로 표시하고 싶다

사용 예를 그대로 사용하면 된다.

.info .metadata .titleAndButton .title.clamp {
  font-size: var(--font-medium);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-right: var(--padding);
}

margin auto 를 이용한 자동 중앙정렬?

CSS 파일에서 변수의 값을 계산해서는 사용하지 못하나?

실제 사용은 아래처럼 하면 된다.

.info .actions button i {
  /* 아이콘이랑 글씨랑 정령이 안되어 있음 */
  /* 아래처럼 위아래를 auto 로 지정하면 마법처럼 정렬됨 */
  margin: 0 auto;
  /* var(--padding) 은 16인데 이건 너무 크다 */
  /* 반으로 줄이는 방법은 아래처럼 calc 함수를 쓰면됨 */
  margin-bottom: calc(var(--padding) / 2);
  font-size: 16px;
}

이미지의 기본 크기 때문에 사이즈 조절이 실패한다.

html에서 사용하는 이미지를 사용한다고 하자. 이 때 이미지의 사이즈가 우리가 원하는 사이즈보다 훨씬 크다면, 플렉스 박스를 사용한다고 해도 이미지가 너무 비대해지는 문제가 있다.

이 문제는, 이미지를 박스에 넣어버리는것!!!

div 태그를 만들어서 img 태그를 넣고 flex로 관리하면 된다.

<div class="img">
    <img src="images/test.jpeg" alt="">
</div>

하나의 플렉스 박스에 여러 아이템들을 비율크기로 넣어두고 싶어!

하나의 플렉스 박스에 3개의 요소가 있다고해보자. 그리고 박스 전체의 크기가 100 이라고 할 때 각각을 35, 60, 5 로 넣고 싶다면 어떻게 해야할까?

아주 간단하다. 각각의 요소에 flex 스타일을 넣어주면 끝

아래를 보면 flex 1 1 35% 이런 식으로 되어있는데, 1 1 이 의미하는 바는 가로 세로가 1:1 의 비율로 움직인다는 것을 알려주는 것

.UpNext .item {
  display: flex;
  /* flex: 35 60 5; */
  margin-top: var(--padding);
}

.UpNext .item .img {
  flex: 1 1 35%;
  margin-right: var(--padding);
}

/* 전체에서  설명은 60^*/
.UpNext .item .info {
  flex: 1 1 60%;
}

/* 전체에서 button은 5% */
.UpNext .item .moreBtn {
  flex: 1 1 5%;
}

.UpNext .item .info {
  display: flex;
  flex-direction: column;
}

PreviousNAVBAR 실습 NextSQL