유튜브 강의 를 보며 만들어 본 후, 스스로 새로 만들어 보았습니다 🙂

1. 주요기능

• 반응형 구현 mediaquery flex flex-grow
• 모바일화면에서 스크롤이 내려가도 동영상은 상단에 고정 position: sticky
• 길이가 긴 제목은 일정한 줄 수 가 넘어가면 자동으로 숨겨지도록 설정 clamp

2. 모바일 페이지

2-1. header

☁️ 헤더 레이아웃 ☁️

로고 부분이 남은 여백을 다 가져가도록 하기 위해서 flex-grow 를 해줬습니다.

css

header .header__logo {
  flex-grow: 2;
}

☁️ 로고부분 ☁️

KR 은 <sup>태그를 이용해봤습니다.
그런데 header 레이아웃은 flex(row)를 이용했는데, align-items: center; 로 설정하다보니 KR 부분도 같이 가운데 정렬이 되어버려서 align-self: flex-start; 를 따로 지정해줬습니다. 하지만 그래도 위치가 적절하지 않아 transform: translateY()를 통해 살짝 더 이동시켰습니다.

html

 <button>
    <i class="fab fa-youtube"></i>
    <span>Premium</span><sup>KR</sup>
 </button>

css

header .header__logo sup {
  align-self: flex-start;
  font-size: 10px;
  transform: translateY(3px);
  color: var(--color-dark-grey);
}

☁️ 알림 아이콘 ☁️

알림 1 은 CSS에서 가상요소::after 를 이용해 만들어 준 뒤, position: relative 로 위치를 잡아줬습니다. 그리고 width,height 를 주기 위해 display: inline-block; 해줬습니다.

css

header .header__icons button:nth-child(4)::after {
  content: "1";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 16px;
  color: white;
  background-color: var(--color-dark-red);
  position: relative;
  top: -10px;
  left: -7px;
}

2-2. video

• video 재생, 정지를 할 수 있도록 controls 를 추가했습니다.
  
  

☁️ 상단 고정 ☁️

• 스크롤해도 동영상은 위쪽에 고정되도록 비디오를 감싸는 컨테이너 요소에 position: sticky; 를 주었습니다.
• 이로 인해 몇몇 요소가 비디오 위로 올라올 때가 있어서 z-index: 1 주었습니다.

css

.video {
  text-align: center;  /* 비디오 가운데 정렬 */
  position: sticky;
  top: 0;
  z-index: 1;
  margin-bottom: var(--padding);
}

💥 그런데, sticky 를 포함한 조상의 형제요소가 나타나니, 다시 위로 따라 올라가는 문제가 생겼습니다. 해결방법이나 다른 대체 방법이 있는지는 아직 모르겠습니다.

2-3. video info

☁️ 긴 제목 더보기 [clamp] ☁️

텍스트(제목)가 너무 길 때 일정 부분만 보이고 감춰지도록 css에서 clamp 속성을 이용했습니다.

clamp 속성은 콘텐츠를 지정한 줄 수만큼으로 제한해주며, 사용하려면 아래 4개를 함께 입력해 줘야 한다.

→ 이렇게 clamp를 이용해 축약했다가, 다시 원문을 다 보여줄 수 있도록 버튼 과 자바스크립트로 동적인 효과를 주었습니다.

• 처음엔 html에서 기본적으로 clamp class 값을 넣어 둔 후, 버튼 동작으로 토글시켰습니다.

css

.info__title__title.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

javascript

const titleBtn = document.querySelector(".info__title__moreBtn");
const title = document.querySelector(".info__title__title");

titleBtn.addEventListener("click", () => {
	title.classList.toggle("clamp");
	titleBtn.classList.toggle("clicked");
});

☁️ 인포 레이아웃 ☁️

• 아이콘들이 있는 박스는 오른쪽으로 붙도록 하기 위해 align-self: flex-end 를 해주어 정렬을 바꿨고, 위치를 조금 더 위로 조정하기 위해 transform: translateY( ) 을 이용했습니다.

• 채널info 에서 채널명과 subscribe 버튼 사이 공간을 이번에는 각각 div영역으로 크게 둘로 나눠준 뒤 justify-content: space-between 을 해줬습니다.

css

.info .info__icons {
  align-self: flex-end;
  transform: translateY(-10px);
  display: flex;
}

.channel {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  padding: var(--padding) 0;
}

2-4. Up next

☁️ up next 레이아웃 ☁️

썸네일 과 텍스트의 공간이 각각 35%와 65%씩 차지하도록 flex 를 사용했고, 이번엔 shorthand로 선언해 보았습니다.

flex CSS shorthand property sets 는
{ flex: flex-grow, flex-shrink, flex-basis } 순서이다. 🙂

css

.nextUp__list li .thumbnail {
  flex: 1 1 35%;
  margin-right: var(--padding-small);
}

.nextUp__list li .next-video__desc {
  flex: 1 1 65%;
}

3. 데스크탑 페이지

3-1. 레이아웃

• Mediaquery 를 이용해 768px 이상일 땐 바뀌도록 했다.

• up-next 부분이 데스크탑 화면에서는 flex-direction 이 row 방향이 되도록 했다.

css

@media screen and (min-width: 768px) {
  .responsive {
    display: flex;
  }

3-2. Up next

• Up next 부분만 스크롤이 되도록 height 는 고정시키고, overflow: scroll; 를 적용했다.

.nextUp {
    height: 88vh;
    overflow: scroll;
  }

💥 마음대로 안 된 부분,,
→ 높이를 vh 로 지정하다보니, 화면 높이가 좁아졌을 때 길이에 따라 좀 다르게 영역이 잡힌다,,
100vh 를 하면 body 화면 전체가 길어져 스크롤이 왼쪽부분(비디오) 쪽도 되기 때문에 그렇게 하지 못했다..

4. 코멘트

4-1. 새로 알게 된 것

• clamp 를 이용하는 것
• flex-grow 가 빈 공간 가져가는 것을 어디에 쓰는지!
• position: sticky 를 비디오 고정하는 데 활용하는 것!
• :root { } 이용해서 속성값 템플릿처럼 사용하는 것
• calc 를 이용해 css 에서 함수같은 것을 이용하는 법

그리고,,

이 meme을 제대로 느껴볼 수 있었다. 😇