2022-08-27 유튜브_클론_3

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4

 

---

flex

 

잘 정리해둔 글이 있어서 링크를 남긴다.

 

추가로 flex에 이어서 grid에 대한 설명도 있으니 필요하면 찾아서 사용하자.

 

• flex에 대한 설명 : https://studiomeal.com/archives/197
• grid에 대한 설명 : https://studiomeal.com/archives/533

지금 당장 알아야 할 것은...

 

flex-direction으로 배치의 방향(가로축 row, 세로축 column)을 선택한다는 사실.

 

선택한 축 방향으로 정렬하고 싶으면 프로퍼티로 justify-content:를 사용한다.

 

선택한 축의 수직 방향으로 정렬하고 싶으면 프로퍼티로 align-items:를 사용한다.

 

이 정도 알면 필요한 기능을 구글에서 검색할 수 있을 것이다.

 

참고자료 (content와 items의 차이점) : https://letsgojieun.tistory.com/49

---

max-width

 

 

.player video {
    width: 100%;
    height: 100%;
}

 

반응형 디자인을 위해서 가로 세로에 %를 사용하고 있다.

 

문제는 동영상이 가로로 너무 많은 부분을 차지하고 있다.

 

이때 가로의 최대 크기를 지정할 수 있다.

 

/* video player*/

.player {
    text-align: center;
    background-color: var(--black-dark-color);
}

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

 

 

---

position: sticky

 

 

하단으로 스크롤을 내려도 상단에 동영상이 계속해서 위치하도록 할 때 사용한다.

 

유튜브를 모바일에서 사용할 경우 스크롤을 내려 댓글을 봐도 영상은 계속해서 화면에 위치한다.

 

/* video player*/
.player {
    ...
    position: sticky;
    top: 0;
}

 

이미지 출처 : https://youtu.be/67stn7Pu7s4

출처 : https://codepen.io/Kseso/post/scroll-a-proposal-css-pseudoclass

 

---

list-style: none

 

ul {
    list-style: none;
}

 

리스트를 사용할 때 앞에 생기는 작은 점을 없앨 때 사용한다.

 

---

긴 글 생략

 

텍스트가 길어서 우리가 생각한 범위를 넘어갈 경우가 있다.

 

이때 넘어가지 않게 하는 법이 있다.

 

css line clamp라고 검색한다. (clamp : 고정시키다.)

 

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

-webkit-line-clamp: 3;은 3줄로 고정하겠다는 의미다.

 

해당 방법 외에도 다른 방법이 많이 있었다.

 

상황에 맞게 선택해서 사용하면 될 것 같다.

 

출처 : https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp

 

---

진행 상황

 

 

강의 31분까지 들음.

 

---