css배치 비교

Netflix 랜딩 페이지 클론 구축 과 야구게임의 배치를 비교해 정리한 내용입니다.

배경 배치

넥플릭스 랜딩페이지 구축과 야구게임 모두 배경이미지는 main요소에 ::before또는 ::after요소를 통해 배치했습니다. 하지만 배경이미지 위에 올라올 컨텐츠들 배치에 있어 넥플릭스 랜딩페이지는 z-index를 통해 배치를 했고 야구게임은 position속성을 이용해 배치를 했습니다.

Netflix 랜딩 페이지 클론 구축에서는 ::before요소에 z-index:1을 컨텐츠 요소에는 그보다 높은 z-index:2;를 부여해 배치했었지만 야구게임에서는 z-index가 아닌 position을 통해 배치.(요소쌓임순서이용)

inner 배치

넥플릭스

main {
	width: 100%
}

section {
	max-width: 70%;
}

야구게임

main {
	width: 100%
}

section {
  width: calc(100vw - 20px);
}