input attributes
input 속성을 활용하여 다음과 같은 조건을 완성하기 위해서는 아래 속성 정보를 확인하면 된다.
label 태그를 사용하세요.
id 속성을 사용하세요.
입력받는 모든 항목이 필수가 되도록 작성하세요.
비밀번호는 최소 10자리 이상 입력받도록 작성하세요.
required 속성은 ‘입력이 필수’적인 항목임을 명시하고, submit 시 사용자에게 값이 필요함을 알려줍니다.
<form>
<h1>Create An Account</h1>
<label for="firstName">Fist name</label>
<input required id="firstName" type="text" placeholder="First name">
<br>
<label for="lastName">Last name</label>
<input required id="lastName" type="text" placeholder="Last name">
<br>
<label for="email">Email</label>
<input required id="email" type="email" placeholder="Email">
<br>
<label for="userName">User name</label>
<input required id="userName" type="text" placeholder="User name">
<br>
<label for="passWord">Pass word</label>
<input required minlength="10" id="passWord" type="password" placeholder="Pass word">
<br>
<label for="birthDate">Birth date</label>
<input required id="birthDate" type="date" placeholder="Birth date">
<br>
<label for="range">How happy are you?</label>
<input required id="range" type="range" placeholder="Range">
<br>
<label for="color">What is your fav.color?</label>
<input required id="color" type="color" placeholder="color">
<br>
<input type="submit" value="Create Account">
</form>flex
inline block의 문제점을 해결하기 위해 flexblock를 생각해냈다.
flexbox 사용 규칙
1. 자식 엘리먼트에는 어떤 것도 적지 말아야 함. 부모요소에게만 말해야한다.
자식 엘리먼트를 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 한다.
2. align-items : cross axis에서 작용 (세로)
3. justify-content : main axis에서 작용 (가로) (디폴트)
flex-container가 height를 가지고 있지 않으면 align-items를 사용하더라도 위치가 바뀌지 않음.
vh = viewport height (스크린에 따라 다름)
