오늘은 HTML 입력 요소인 input을 활용해서, 테무산 네이버 회원가입 페이지를 만들어봤다.
<input>
input은 사용자로부터 데이터를 받기 위해 사용하는 인터렉티브 요소로, 간편해보이지만 아주 무시무시한 녀석이다.
일단, input은 type(입력 유형)에 따라 그 쓰임과 형태가 달라진다.
type 값만 해도 text, password, submit, reset, radio, button 등등 아주 다양한 쓰임새를 가졌다.
그리고 또 하나. input에는 attribute(속성)이라는 요소가 중요하게 작용한다.
checked, disabled, max, min과 같이 input의 기본 상태를 설정하거나, 입력값을 제한하는 역할을 한다.
그런데 왜 무시무시하냐고? 이 속성들이
- 모든 type에 적용되는 것이 아니며,
- 적용된다고 해도 type에 따라 다른 영향을 미치기 때문이다.
그래서 MDN에서도 input의 type+attribute의 조합수가 매우 많고 다양하기 때문에, input을 HTML에서 가장 강력하고 복잡한 요소 중 하나라고 소개하고 있더라는 사실.
실습
아무튼, type의 종류는 매우 다양하지만 가장 많이 쓰이는 것은 text, radio, checkbox 정도이기 때문에 회원가입 페이지는 input 실습에 아주 적합했다.
완성본은 다음과 같다!
이미지 크기가 조금 부담스러운데, (테무산이지만) 뿌듯하니까 그냥 두도록 하자.
-
사용자가 직접 정보를 입력하는 곳에는 모두
input type="text"를 활용했고, 각 입력란에 어떤 정보를 입력해야 하는지placeholder속성으로 표기했다. -
오른쪽 상단 체크박스는
input type="checkbox"를 활용해 체크박스 활성화/비활성화 가능.
-
국가번호 선택란은
select로 만들었다. option은 일일이 적기 귀찮아서 5개 정도만 넣어뒀다. -
마지막으로 인증요청 버튼은 클릭하면 "인증번호가 발송되었습니다!"라는 alert-box가 뜨도록 JavaScript를 쬐끔 이용했다.
TIL
input이 활성화 됐을 때의 CSS
아무 것도 안했을 때 input은 그냥 input 선택자로 불러와서 border 없애고 배경 없애고 하면 되는데,
input을 클릭하거나 체크해서 input이 활성화된 상태에서는 어떻게 스타일을 편집하는지 오늘 알게되었다!
1️⃣ input:focus
활성화된 상태의 input 디자인은 input 선택자에 :focus를 붙여서 편집할 수 있다.
.input:focus {
outline: none;
}이렇게 적으면 .input을 클릭해서 input이 활성화(focus)됐을 때, outline을 없애준다는 것.
2️⃣ input:focus-within
input이 활성화(focus)됐을 때, input의 부모 요소 스타일을 변경하려면 :focus-within을 사용하자.
.form_item:focus-within {
border: 1px solid #09aa5c ;
}위처럼 input에 입력하고 있을 때, 부모 요소의 테두리에 변화를 줘서 강조하는 방식으로 활용할 수 있다.
3️⃣ input:checked
input type="checkbox", "radio"가 체크된 상태일 때, 스타일을 변경할 수 있다.
원래 체크박스가 활성화됐을 때의 박스 내부 색깔을 변경하기 위해 적용해본건데, 이건 input box에만 영향을 줄 뿐 체크박스 색깔에는 영향을 줄 수 없었다.
그래서 이 부분은 accent-color을 이용해서 해결했다.
#join_toggle_check {
accent-color: #09aa5c;
} 네이버의 초록색이 체크박스에도 잘 적용된 모습!
이렇게 특정 상태에 있는 요소에 스타일을 적용할 수 있게 만들어주는 기능을 가상 클래스라고 한다.
그동안 많이 써먹었던 :hover 라거나 :nth-child()도 모두 가상 클래스.
따봉 가상 클래스야 고마워!
