Dev Log #33 - 8월 11일

오늘 학습한 내용

✅ 1. 네이버 e스포츠 카피캣 개론
✅ 2. 네이버 e스포츠 header
✅ 3. 네이버 e스포츠 main_top

1. 네이버 e스포츠 카피캣 개론

• 특정 지점에서 화면을 고정 시키는 것은 javascript로 해결해야함.(생략)

2. 네이버 e스포츠 header

• 스크롤을 내렸을 때 상단의 메뉴가 고정되어 있으므로 상단 nav만 header로 처리한다.
• 상단이 항상 고정되어 있으므로 position: fixed;를 적용한다.

👉 html

👉 css

3. 네이버 e스포츠 main_top

👉 html

👉 css

• 아래와 같이 수정

#esport-main-top .live-wrap li {
	overflow: hidden;
	width: 625px; <-- 변경
	background-color: #1f2227;
	border-radius: 10px;
}

👉 결과물

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

오늘은 네이버 e스포츠 카피캣 실습을 진행했다. 오늘은 수업 중에 어려웠던 점은 live_wrap에서 txt_wrap 부분의 padding이 적절하게 조절되지 않고 붕 뜬 느낌이라서 강사님이 반영한 코드값과 다르게 설정했다. 그랬더니 나중에 live_wrap의 li태그의 x축 정렬 시 레이어가 비틀어져서 조금씩 더 수정해서 개선했다. 코드 작성 시 오류점이 있는 지 찾기 위해 다 완성된 코드를 보고 비교해서 수정 반영했다. 카피캣 실습을 하다보면 기존 사이트와 조금씩 다르게 반영할 수 밖에 없는 구조인데, 이때 레이어가 비틀어지거나 반영이 되지 않으면 그 문제점을 해결하는 데에 시간이 오래 걸리는 것 같다. 내일도 열심히 임해야겠다👩🏻‍💻🔥