□ 네이버 e스포츠 1/3

★ 작성코드

Git 링크.네이버e스포츠

1. 상단 영역

● 결과 스크린샷

2. 메인 Top 영역

● 형제관계의 레이아웃 겹침현상 수정

• 상단 영역이 position: fixed를 사용하여 3차원이 되어 main영역과 레이아웃이 겹치게 됨
  

• 이를 수정하기 위해 padding-top값을 상단영역의 height값(※ border값 포함)만큼 넣어줌
  

● 결과 스크린샷(Timeline 영역)

● 결과 스크린샷(Live 영역)

□ 어려웠던 점

position: fixed를 자주 사용하지 않다보니, fixed만 적용했을 때 어떻게 수정해야하는지가 바로 생각나지 않았습니다.

□ 해결방법

강의 내용에 따라 순서대로 코드를 작성하여 해결하였습니다.

□ 학습 소감

마진병합현상이나 형제관계의 레이아웃 겹침현상이 발생했을 때, 이를 수정하는 방법을 많이 공부해야겠다는 생각을 하게 되었습니다.