반응형 '출시 예정' 페이지 구축

저는 최근 프론트엔드 멘토 과제에 도전했습니다. 패션 소매업체를 위한 반응형 '출시 예정' 랜딩 페이지를 만드는 것입니다. 브리핑에는 이메일 구독 양식, 매력적인 배경 이미지, 데스크톱과 모바일 전반에 걸친 원활한 반응이 필요했습니다. 이 게시물에는 나의 접근 방식, 주요 결정 및 문제 해결 전략이 자세히 설명되어 있습니다.

1단계: 프로젝트 해체

코딩에 앞서 프로젝트 요구 사항을 꼼꼼하게 분석했습니다.

• 로고와 "Coming Soon" 메시지를 보여주는 히어로 섹션
• 사용자 가입을 위한 이메일 구독 양식
• 화면 크기에 동적으로 적응하는 배경 이미지를 갖춘 반응형 레이아웃
• 정확한 이메일 입력을 보장하기 위한 기본 이메일 검증

2단계: HTML 구조

저는 최소한의 div로 깔끔하고 의미 있는 HTML 구조를 우선시했습니다. 레이아웃은 두 가지 주요 섹션으로 구성됩니다.

1. 세부정보 섹션: 로고, 헤드라인, 설명, 이메일 입력 양식이 포함됩니다.
2. 이미지 섹션: 배경 이미지를 표시합니다.

내 HTML 구조:

<code class="language-html"><div class="coming-soon-container">
  <!-- Details Section -->
  <div class="details">
    <!-- Logo, Heading, Description, Form -->
  </div>
  <!-- Image Section -->
  <div class="image-container">
    <img src="..." alt="Coming Soon Image">
  </div>
</div></code>

3단계: CSS 스타일 지정 및 반응성

Flexbox는 시각적으로 매력적이고 반응성이 뛰어난 레이아웃을 만드는 데 중요한 역할을 했습니다. 가로(데스크톱), 세로(모바일) 모두 요소 배치를 간소화했습니다.

처음에는 .coming-soon-container에서 display: flex을 병렬 데스크탑 레이아웃으로 사용했습니다. 미디어 쿼리(@media (max-width: 768px))는 flex-direction를 모바일용 column-reverse으로 전환하여 세부정보 아래에 이미지를 배치했습니다.

플렉스박스 CSS:

<code class="language-css">.coming-soon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .coming-soon-container {
    flex-direction: column-reverse;
  }
}</code>

4단계: 이메일 입력 및 화살표 아이콘 디자인

이메일 양식은 깔끔하고 현대적인 느낌으로 디자인되었습니다. 입력 필드와 제출 버튼(화살표 아이콘)은 시각적으로 눈에 띄게 디자인되었습니다.

입력 및 아이콘용 CSS:

<code class="language-css">.input-container {
  position: relative;
  width: 385px;
}

/* ... (input and span styles) ... */</code>

5단계: 반응형 히어로 이미지

object-fit 속성을 ​​사용하면 히어로 이미지가 왜곡 없이 반응적으로 크기가 조정됩니다.

이미지 컨테이너용 CSS:

<code class="language-css">.image-container {
  width: 40%;
  height: 100vh;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}</code>

6단계: JavaScript 이메일 검증

이메일 형식을 확인하기 위해 JavaScript를 사용하여 클라이언트측 이메일 검증이 구현되었습니다. 정규식은 표준 이메일 패턴과 비교하여 입력을 확인했습니다.

JavaScript 유효성 검사 기능:

<code class="language-javascript">function validateEmail() {
  // ... (validation logic) ...
}</code>

결론

이 "출시 예정" 페이지 프로젝트는 반응형 디자인과 양식 검증 기술을 연마했습니다. 레이아웃, 맞춤형 스타일, 모바일 우선 원칙에 Flexbox를 활용하여 깔끔하고 기능적인 디자인을 만들었습니다. 프론트엔드 개발 스킬을 연마하기 위한 프론트엔드 멘토의 도전을 적극 추천합니다. 전체 코드는 GitHub: GitHub 링크

에서 확인할 수 있습니다.

위 내용은 반응형 '출시 예정' 페이지 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!