학습 한 내용

트위치 콘텐츠 영역을 도면작업하는 실습을 했다
네이버 실습할 때 처럼 css에 콘테이너 처럼 자주 필요할 속성들을 미리 만들어 놓고 필요할 때마다 html class에 부여하여 사용하는 모습들이 훤히 보인다 트위치 같은 경우는 보라색 글씨가 랜드마크일정도로 트위치하면 떠오르는 색깔이기에 글씨들이 보라색 글씨들이 많기 때문에 css에 미리 속성들을 짜놨다
이처럼 미리 짜 놓은 다음에 필요할 때마다 html에
class를 지정하여 font-purple 을 미리 지정해 놓고 사용하는 경우가 많다.

콘테츠 채널마다 더보기 라는 글씨가 적혀있다 더보기를 눌렀을 시 그 채널의 관련된 영상들을 더 볼 수 있는 효과를 볼 수 있다 그래서 html에 버튼을 사용했고 색깔이 보라색이기에 class로 font-purple을 사용했다.

css엔 width:100px, height:30px이라는 공간을 잡아줬다.
그리고 text-align: center, line-height: 30px을 잡아서 x,y축을 정 가운데에 배치할 수 있도록 정렬 해주었다. background-color: 검정을 사용했다. 원래 배경자체가 검정인데 백그라운드 컬러를 사용하는 이유는 더 보기란이 밑줄에 겹칠건데 겹칠때 백그라운드 컬러로 인해 레이아웃이 겹치면서 선이 안보이게 만들어주는 역할을 해주는 것이다 left:50%, transform: translateX(-50%) 으로 중앙정렬을 잡아주고 비디오 섹션을 기준으로 좌표를 바꿔야 하기 때문에 비디오 섹션 부분을 position: reletive로 잡아주었다. 그리고 더보기가 선에 겹치기 위해서 bottom:-16px을 사용했다.