26~28일차: 첫 번째 랜딩 페이지 개발

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보~중급 웹 개발자(HTML/CSS 기초 지식 보유자) / 프론트엔드 학습자

핵심 요약

• 재사용 가능한 UI 컴포넌트 개발: BEM 명명 규칙 기반 모듈화 구조
• 랜딩 페이지 구축 경험: 히어로 섹션, 기능 섹션, 평가 섹션 포함
• 응답형 디자인 실습 시킨 핵심 기술:

- background-clip/-webkit-text-fill-color 기반 그래디언트 텍스트 효과

- 3레이어 배경 (가로선, 세로선, 그래디언트 오버레이) 구현

- ::before 의사요소 활용한 키워드 강조 효과

섹션별 세부 요약

1. 주요 개발 내용

• Order Summary Component
• React/Tailwind CSS 사용 시 효율성 향상 예상
• BEM 패턴 적용으로 코드 가독성 향상
• Tech Book Club 랜딩 페이지
• 12시간 이상 소요된 기능 구현
• 데스크탑/태블릿/모바일 대응 미디어 쿼리 적용

2. 학습 내용

• 그래디언트 텍스트 효과
• background-clip: text / -webkit-text-fill-color: transparent 활용
• 배경 디자인 기법
• linear-gradient + repeating-linear-gradient 조합 사용
• 의사요소 활용
• ::before로 원형 패턴 이미지 삽입, 키워드 시각적 강조

3. 개발 성찰

• 응답형 CSS 작성 시 속도 저하 경험
• 프레임워크 도입 필요성 인식 (React/Tailwind CSS)
• 반복적 프로젝트 수행 통해 기술 습득 가속화 예상

결론

• 실무 중심 프로젝트 수행을 통해 응답형 디자인, CSS 고급 기법(그래디언트/의사요소) 습득
• 프레임워크 도입(React/Tailwind CSS)으로 반복 작업 효율성 향상 가능
• 반복적 개발 경험을 통해 CSS 작성 속도 및 디자인 감각 향상 예상