Dev Log #37 - 8월 19일

오늘 학습한 내용

✅ 1. 트위치 카피캣 개론
✅ 2. 트위치 카피캣 header

1. 트위치 카피캣 개론

• 트위치
• 반응형은 적용 (x)
• 자바스크립트가 적용하는 부분은 적용(x)

2. 트위치 카피캣 header

• 단위변환

• position: fixed;와 width: 100%;는 같이 써주어야한다!!

• search-wrap을 정중앙으로 위치하기 위해서 flex영향을 받지 않게 다음과 같은 코드를 입력하여 반영했다.

nav .nav-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

👉 html

👉 css

👉 결과물

오늘 학습 후기(어려웠던 점, 개선할 점)

오늘은 트위치 카피캣 실습 작업을 진행했다. 오늘 수업 중 가장 인상 깊었던 점은 search-wrap을 flex 영향을 받지 않게 한 후 위치 조정을 한 점이다. 오늘은 header 영역만 해서 크게 어려웠던 점은 없었다. 내일도 열심히 임해야겠다👩🏻‍💻🔥