HTML5 & CSS3 : 회원가입 창 만들기 - input 태그

2022.10.26.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 29

---

Review

오늘은 예제를 풀어보는 시간을 많이 주셨다.
input 태그를 배웠는데 엄청 신기하고 재밌는 속성이 많이 있었다.

선생님께서 욕심이 있으셔서 학생들에게 거의 모든 태그를 다 알려주려고 하시는 것 같다.
포토샵도 그렇게 배웠는데 속성 강의라기보다는 올인원 강의를 듣는 느낌이라 더 좋은 것 같다.
요즘은 PDF 파일도 준비해주셔서 이해하기 어려울 때는 자료를 보면서 더 자세히 이론을 공부
하고 있다.

웹 페이지 구현하는 예제를 반복해서 하고 있다보니 두려움도 점점 사라지고 즐기면서 하고 있다.
코딩은 적성에 맞아야 된다고 하는데, 나는 엄청 재미를 느끼는 편인 것 같아서 다행이다.

파이팅해야징-

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 29

<input 태그 이론>
: 선생님께서 이론을 설명하시기 전에 관련 자료를 공유해주셨다.

 

 

---

<회원가입 창 만들어보기 예제>

 

 

우선 전체를 감싸는 form 태그를 먼저 작성하고 하위에 fieldset 태그를 작성한 후
legend 태그 안에 '회원가입' 이라는 문구를 작성해준다.
label 태그 안에 나중에 알아보기 쉬운 문구로 작성하고, id와 name은 원하는 문구로 작성해준다.
되도록이면 앞과 같게 설정하는 것이 좋다.
maxlength 속성은 9개의 문구까지만 작성할 수 있다는 말이다.

여기까지 작성하면 위와 같이 나타난다.

아이디 입력란에 숫자를 작성할 수도 있는데,
maxlength를 9라고 설정해서 적을 수 있는 숫자의 개수는 9개이다.

 

이번에는 비밀번호 입력란도 만들었는데, label 태그 안에 "user_pw"로 변경해준다.
이때는 input type이 "text" 라서 비밀번호 입력란에 적는 것이 눈으로 보이게 된다.

 

input type에 "password" 라고 작성해주면 비밀번호 입력란에서 숫자를 작성해도
점으로 나타나게 된다.

 

이번에는 아이디 입력란에 size, placeholder, autofocus 3가지의 속성을 더 추가했다.

- size : 입력 필드의 보이는 너비를 문자로 지정하는 것이고, 크기의 기본값은 20이다.
- placeholder : 사용자가 값을 입력하기 전에 짧은 힌트가 입력 필드에 표시되도록 한다.
- autofocus : 페이지가 로드될 때 입력 필드가 자동으로 포커스를 받아야 함을 지정한다.

결과는 위와 같이 나타났다.

이번에는 성별 체크란을 만들었다.
label을 남/여 구분하여 각각 만들어주고, input 태그도 각각 작성한다.
radio button은 많은 선택 사항 중 하나를 선택하기 위해 사용한 것이다.
name을 다르게 하면 중복선택이 되기 때문에 name을 같게 해야한다.

 

이번에는 취미 체크란을 만들었는데, 중복 선택이 가능한 checkbox로 만들었다.
여기서는 기본적으로 중복선택이 가능하기 때문에 name을 같게 해도 상관없다.

 

이번에는 클릭 가능한 버튼을 표시하는 button 속성을 사용했다.
'Click me' 라는 button을 클릭하면 위와 같이 내용창이 나타난다.

 

 

 

원하는 색상을 선택하는 란을 만들었다.
input 태그에서 "color" 라고 입력하면 되고, id는 원하는 문구로 작성하면 된다.
그러면 저렇게 색상을 선택할 수 있게 박스가 나타난다.

 

 

 

박스를 클릭하면 위와 같이 나타난다.

 

이번에는 날짜를 선택하는 date, datetime-local, datetime 속성을 사용해보았다.

 

datetime-local과 datetime는 다르다.
datetime-local은 달력에서 선택하면 되는데, datetime은 직접 숫자를 입력해야한다.

 

아까는 위에서 아이디 입력란의 코드를 작성할 때는 autofocus 까지만 작성했는데,
이번에는 아이디를 필수로 작성해야 제출할 수 있도록 required 라는 속성도 추가했다.
fieldset 태그 안 맨 아래에 input 태그의 submit type도 작성해 보내기 버튼을 생성했다.

그러면 맨 밑에 보내기 버튼이 나타는데, 저 버튼을 누르면 위에 '이 입력란을 작성하세요.'
라는 옵션이 나타나게 된다.

또 바로 위의 결과 이미지에 '남'과 '여행' 에 체크가 되어 있는 이유는 'checked' 라는 속성을
작성했기 때문이다.
checked 속성을 사용하면 기본값으로 미리 체크가 되어있다.
그걸 사용자가 보고 사용자에게 해당하는 값으로 체크할 수 있도록 한다.

---

<input 태그 예제>


- HTML

 

radio 속성을 이용해보는 예제를 실행했다.
먼저 form 태그를 작성하고, 그 하위에 input 태그 3개를 만들어준다.
첫번째 radio button이 체크되있도록 id 뒤에 'checked' 라고 적어주었다.

 

글자만 선택해도 클릭되도록 p 태그를 만들어주고 하위에 label 태그를 이용해 위와 같이
작성해준다.

또 p 태그를 만들어주고 그 하위에 원하는 이미지를 불러오면 되는데, 이미지 크기가 너무 커서
창을 작게 줄인 화면으로 캡처했다.


- CSS

 

photo1 눌렀을 때

photo2 눌렀을 때

photo3 눌렀을 때

img에서는 이미지를 작게 줄이기 위해 width를 두고, 선택하기 전에는 이미지가 보이지 않게 했다.

밑의 3개의 코드는 체크했을 때 인접한 p 태그에 속한 이미지가 보이도록 설정하는 것인데,
인접 선택자 '~'를 이용해서 작성했다.
display: block;으로 두어 체크 상태일 때 해당 이미지가 보이도록 설정했다.

 

CSS에서 input[type=radio]에서 display: none;으로 설정하니, radio button이 사라졌다.
문구만 남게 되는데 하나씩 클릭하면 해당되는 이미지가 나타나게 된다.

 

CSS

HTML

label에 마우스 올렸을 때

선생님께서 이렇게 만들어보라고 하셔서 예제를 실행했는데 완성은 했지만 뭔가 코드가 지저분하다.
아직 검사 기능을 잘 활용하지 못해서 노가다를 하고 있달까...
일일이 값을 입력하고 확인해가면서 어찌저찌 완성은 했다.

이 예제는 이제껏 많이 해 온 것이니 설명은 생략하겠다.

---

<input 태그 응용 예제>

 

완성 이미지

- HTML

 

창 67%로 키운 것

- CSS

 

label에 마우스 올린 후

-HTML

 

- CSS

 

 

 

banner에 마우스 올린 후

이 예제를 실행한 이유는 visual div에서 input 태그를 사용하기 위함이다.
다른 것까지 해봤는데, 이 예제는 이미지가 미리 만들어져 있어서 그리 어렵지 않은 예제였다.
웹 페이지 구현하는 시간이 점점 단축되고 있는 것 같아서 기분이 좋다.
아무래도 계속 반복하는 예제를 하다보니 비슷비슷하고 즐기면서 하고 있다.

완성 - !

 

 

 

 

 

 

 

 

 

 

 

 

*이미지 출처
instagram : @postershop.kr