HTML, CSS, JavaScript로 간단한 로그인 폼 구현

카테고리

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

서브카테고리

웹 개발

대상자

• 초보 웹 개발자 및 프론트엔드 학습자
• 난이도: 초급 (HTML/CSS/JavaScript 기초 지식 필요)

핵심 요약

• HTML으로 이름, 나이, 자격 입력 필드와 제출 버튼 구성
• CSS에서 flexbox와 linear-gradient를 사용한 반응형 디자인 구현
• JavaScript로 submitForm() 함수를 통해 입력 검증과 화면 전환 처리

섹션별 세부 요약

1. What I Built (구축 내용)

• HTML
• name, age, qualification 3가지 입력 필드와 submit 버튼 구성
• CSS
• linear-gradient(to right, pink, lightyellow) 배경 적용
• .box 클래스로 중앙 정렬 및 둥근 테두리 스타일링
• .hidden 클래스로 화면 숨김/보임 처리
• JavaScript
• submitForm() 함수에서 document.getElementById로 입력값 추출
• classList.add('hidden')/classList.remove('hidden')로 폼/출력 영역 전환
• 입력값 누락 시 alert()으로 유효성 검증

2. Codes (코드 예시)

• HTML

```html

Submit

```

• CSS

```css

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: linear-gradient(to right, pink, lightyellow);

}

.box {

background: white;

padding: 20px;

border-radius: 10px;

width: 250px;

text-align: center;

}

```

• JavaScript

```javascript

function submitForm() {

const name = document.getElementById('name').value;

const age = document.getElementById('age').value;

const qualification = document.getElementById('qualification').value;

if (name && age && qualification) {

document.getElementById('formBox').classList.add('hidden');

document.getElementById('outputBox').classList.remove('hidden');

} else {

alert("Please fill all fields!");

}

}

```

3. What I Learned (학습 내용)

• document.getElementById()로 입력값 추출 방법
• .classList.add()/.remove()로 화면 요소 상태 전환
• 입력 검증을 통한 사용자 데이터 무결성 보장
• Flexbox와 배경 그라디언트를 활용한 반응형 디자인 적용

4. Today's Recap (요약 정리)

• 사용자 입력 처리, 폼 데이터 검증, 동적 화면 업데이트, CSS 디자인의 중요성 강조
• 간단한 프로젝트를 통해 코어 스킬과 신뢰도 향상 효과 확인

결론

• 입력 검증과 화면 전환 로직은 웹 애플리케이션의 핵심 기능
• flexbox와 linear-gradient는 간단한 UI도 매력적으로 변환 가능
• 반복적 실습을 통해 기초 개념의 확고한 이해를 도모해야 함