야구게임

제로베이스스쿨의 프로젝트로 배우는 JavaScript 강의 영상을 보며 정리한 내용입니다.

CSS

input type="number"

야구게임에서 4자리 숫자를 받을 예정이기 때문에 input의 min속성은 0, max속성은 9999로 범위를 설정해놓습니다.

      <form>
        <label for="question"></label>
        <input type="number" id="question" name="question" min="0" max="9999" />
      </form>

button

button속성이 form태그 내 있을 때는 기본적으로 submit으로 작동을 하게 됩니다. 만약 submit으로 작동하고 싶지 않은 경우 type="button"속성을 명시하면 됩니다.

css의 @charset "utf-8";

배경 배치

1st 배경요소의 ::before 이용

  content: '';
  position: absolute; // 컨텐츠 뒤에 배치할 수 있도록 추가해줍니다.
  display: block; //기본적으로 ::before은 block요소로 변경해줍니다.
  width: 100%;
  height: 100%;
  background: url('./assets/bg.jpg') no-repeat 0 0 /cover ;
  opacity: .6;

2st 배경 위에 위치할 컨텐츠에 position: relative부여

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

inner배치

css의 calc속성을 이용해 중앙에 배치되도록 합니다.

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

Netflix 랜딩 페이지 클론 구축에서는 main요소에 width: 100%를 주고 section요소에 70%값을 주어 중앙 배치를 했습니다.