[배운내용]

트위치 메인페이지 중간 실습 2

hover 속성 적용하기

마우스를 올렸을때 왼쪽 요소처럼 이미지가 움직이면서 배경색 보라색이 보이는 효과를 적용하기위하여 아래와 같이 적용한다.

.video-section .video-wrap .image-wrap{
	position: relative;
	width: 333px;
	height: 186px;

	background-color: #9147ff;
}

.video-section .video-wrap .image-wrap img{
	width: 100%;
	height: 100%;

	transition: transform 0.15s linear;
}

.video-section .video-wrap .image-wrap:hover img{
	transform: translate(10px, -10px);
}

img태그의 부모영역에 배경화면을 적용해주고, 부모태그에 hover했을때의 img태그의 변화를 적용한다.
.video-section .video-wrap .image-wrap:hover img
transform: transition을 사용해 이동할 좌표를 설정하고, img태그에 transition에 대한 속성을 설정해준다.

border 끊겨보이게 설정하기 : 배경색 입력

사진과 같이 border-bottom위에 더보기 라는 버튼이 있고, 이는 중간에 선이 끊겨보이게 설정되어있다. 선이 끊겨보기에 하기위해서 더보기라는 버튼에 메인의 배경색과 똑같은 background-color를 지정해주면 선이 끊겨보이는 효과를 줄 수 있다.

[어려웠던 점]

[학습소감]

오늘은 영상리스트가 반복되는 것들이라 비교적 쉽게 진행했다. 트위치 실습에서 중요한것은 스크롤바를 화면전체가 아니라 원하는 컨텐츠안에서만 생기게 하는 것과 fixed의 활용이라고 생각된다.