Re: JavaScript 교육용 A

[gyun님]

소스 코드
여기에서 이미지를 포함한 소스 코드를 얻을 수 있습니다.

코드펜
GitHub
프로젝트를 설정하는 방법
프레임-1--1-
프로젝트를 설정하려면 다음 단계를 따르세요. 👇

"Project"라는 새 폴더를 만들고 VS Code를 엽니다.
index.html, style.css, main.js 파일 생성
HTML 내부의 파일 연결
내 GitHub 저장소에서 이미지를 다운로드하세요.
이 멋진 링크를 head 태그 안에 붙여넣으세요. 그런 다음 Font Awesome 아이콘에 액세스할 수 있습니다 👇👇
<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      crossorigin="anonymous"
    />
프레임-2--1-
우리가 다룰 내용은 다음과 같습니다:
HTML 작성
CSS 추가
자바스크립트 작성
소셜 미디어 버튼 추가
이미지 추가
모바일 버전에 대한 미디어 쿼리(반응형)
프레임-20--2-
목차
HTML 작성 방법
프레임-3
body 태그 안에 이름이 붙은 클래스를 생성 .container하고 form 👇의 ID를 갖는 form 태그를 호스팅하세요.

<div class="container">

<form id="form"></form>
    
</div>
그리고 form 태그 안에 div다음과 같이 4개를 생성하세요 👇

<form id="form">

    <div class="title">Get Started</div>
    
    <div></div>
    <div></div>
    <div></div>
    
</form>
3개의 빈 div 태그 안에 아이콘 및 레이블과 함께 3개의 입력 [사용자 이름, 이메일 및 비밀번호]를 생성해 보겠습니다.

참고 : 클래스 이름을 만드는 중입니다 .error. 여기에 JavaScript를 사용하여 오류 메시지를 삽입하겠습니다.

사용자 이름 입력
<!-- User Name input -->
        
<div>
<label for="username">User Name</label>
    <i class="fas fa-user"></i>
    
    <input
        type="text"
        name="username"
        id="username"
        placeholder="Joy Shaheb"
     />
    
    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>
    
    <div class="error"></div>
    
</div>
이메일 입력
<!-- Email input -->
        
<div>
<label for="email">Email</label>
    <i class="far fa-envelope"></i>
    
    <input
        type="email"
        name="email"
        id="email"
        placeholder="abc@gmail.com"
     />
    
    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>
    
    <div class="error"></div>
    
</div>
비밀번호 입력
<!--   Password input -->
        
<div>
<label for="password">Password</label>
    <i class="fas fa-lock"></i>
    
    <input
        type="password"
        name="password"
        id="password"
        placeholder="Password here"
     />
    
    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>
    
    <div class="error"></div>
    
</div>
버튼을 만드는 방법
마지막으로 다음과 같이 양식 닫는 태그 앞에 버튼을 추가합니다.

<form>
    <!-- other codes are here -->
    
    <button id="btn" type="submit">Submit</button>
    
</form>
지금까지의 결과는 다음과 같습니다 👇

fdgdfgdfdffcvb
결과 지금까지
HTML 부분을 완료한 것을 축하합니다! 🍾🎉🥂

프레임-7
CSS를 추가하는 방법
프레임-4
CSS를 추가하여 양식 스타일을 지정해 보겠습니다. 먼저 글꼴 모음을 포함하여 브라우저의 기본 스타일을 제거하겠습니다👇

/**
* ! changing default styles of brower
**/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}
이제 양식 태그에 다음 스타일을 적용합니다.

/**
* ! style rules for form section
**/

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 50px;
}
다음으로 제목 텍스트를 다음과 같이 변경하세요. 👇👇

.title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}
지금까지의 결과 👇👇

fsdfsdsfxvxcvxd
지금까지의 결과
이제 다음과 같이 레이블 텍스트 하단에 여백을 추가합니다.

label {
  display: block;
  margin-bottom: 5px;
}
그리고 이러한 스타일을 추가하여 입력 태그의 모양과 느낌을 변경하세요 👇👇

form div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
공간 및 색상 변경 효과를 추가하려면 다음 코드를 추가하세요.

form div {
  position: relative;
  margin-bottom: 15px;
}

input:focus {
  border: 2px solid #f2796e;
}
지금까지의 결과👇👇

fdfdfdfdfvdfv
지금까지의 결과
아이콘 스타일을 지정하는 방법
이제 Font-Awesome에서 가져온 아이콘의 스타일을 지정하겠습니다. 코드를 따라가세요: ✨✨

/**
* ! style rules for form icons
**/

form div i {
  position: absolute;
  padding: 10px;
}

HTML

[gyun님]

https://www.freecodecamp.org/news/learn-javascript-form-validation-by-making-a-form/

[gyun님]

https://codepen.io/joyshaheb/pen/XWgdOyY

[gyun님]

https://infonbook.com/

[gyun님]

https://www.freecodecamp.org/