CSS 로 매력적인 영화관 좌석 레이아웃 만들기

소개

이 프로젝트에서는 CSS 를 사용하여 영화관 좌석 배치를 만드는 방법을 배우게 됩니다. 목표는 스크린과 특정 간격 요구 사항을 갖춘 좌석 구역을 포함하는 레이아웃을 디자인하는 것입니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

필요한 좌석 수와 좌석 간 간격을 설정하는 방법
레이아웃에 스크린을 추가하고 좌석 구역과 분리하는 방법
영화관 레이아웃의 원하는 시각적 모양을 얻기 위해 CSS 스타일을 적용하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

CSS 를 사용하여 좌석 구역에 대한 유연한 레이아웃을 생성합니다.
스크린 요소를 배치하고 스타일을 지정합니다.
원하는 레이아웃을 얻기 위해 특정 간격 규칙을 적용합니다.
웹 개발에 필수적인 기술인 복잡한 레이아웃 구조를 설계하고 구현하는 기술을 시연합니다.

프로젝트 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

다음 파일과 디렉토리가 포함된 프로젝트 폴더를 엽니다:

├── css
│   └── style.css
└── index.html

여기서:

index.html은 메인 페이지입니다.
css/style.css는 필요한 스타일을 추가해야 하는 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

✨ 솔루션 확인 및 연습

스크린 추가

이 단계에서는 영화관 레이아웃에 스크린을 추가하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

코드 편집기에서 css/style.css 파일을 엽니다.

.screen 클래스 내부에 다음 CSS 속성을 추가합니다:

.screen {
  background-color: #fff;
  height: 70px;
  width: 100%;
  transform: rotateX(-45deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
  color: #242333;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}

이렇게 하면 스크린의 스타일이 지정되어 크기, 색상을 설정하고 3D 회전 효과와 그림자를 추가합니다.

✨ 솔루션 확인 및 연습

좌석 구역 설정

이 단계에서는 영화관의 좌석 구역을 설정하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

코드 편집기에서 css/style.css 파일을 엽니다.
.seat-area 클래스 내부에 다음 CSS 속성을 추가합니다:
```
.seat-area {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
}
```
이렇게 하면 좌석 구역에 유연한 레이아웃이 생성되어 좌석이 행으로 배열됩니다.
다음으로, .seat 클래스를 타겟팅하고 다음 CSS 속성을 추가합니다:
```
.seat {
  background-color: #444451;
  height: 40px;
  width: 45px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
```
이렇게 하면 개별 좌석의 스타일이 지정되어 크기, 색상을 설정하고 둥근 모서리를 추가합니다.
원하는 좌석 간 간격을 만들려면 다음 CSS 규칙을 추가합니다:
```
.seat:nth-child(8n + 2) {
  margin-right: 30px;
}

.seat:nth-child(8n + 6) {
  margin-right: 30px;
}

.seat:nth-child(8n + 0) {
  margin-right: 0;
}
```
이렇게 하면 2 번째 및 6 번째 열 (통로 옆) 의 오른쪽에 30px 간격이 추가되고, 다른 좌석 사이에는 10px 간격이 추가됩니다.

이제 영화관 레이아웃이 완료되었습니다! 웹 페이지를 표시하는 브라우저 창을 새로 고치세요. 완성된 결과는 다음과 같습니다:

✨ 솔루션 확인 및 연습

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.