-
간단실습) 회원가입 양식 폼 만들기일단 만들기 2022. 1. 18. 14:04
회원가입 폼을 만드는 이유!
이 실습을 통해서 HTML, CSS, 자바스크립트의 주요 개념과 관계를 이해할 수가 있어요.
이번 실습의 흐름은
1) HTML 기분 문서 구조 작성
2) CSS를 통해 디자인 하기
3) 자바스크립트를 통해서 DOM에 접근하고 디자인 변경하기
입니다!
그럼 시작!
1. IDE에서 다이나믹웹 프로젝트생성, 프로젝트에 폴더를 생성.
(서버 연동되어있는 가정입니다! 톰캣 등을 설치해서 연동 후 해주세요)
(저는 이클립스를 사용해서 보여드릴게요. 편한거 쓰세요)
2. 폴더에 html 파일을 생성한다.
저는 이렇게 webtest라는 프로젝트를 생성했고요,
src-main-webapp 위치에 폴더를 하나 생성해 준 뒤 html파일을 생성하면 됩니다.
가입이니까 간단하게 joinform.html로 이름 정했습니다.
3.<h>(제목)태그와 <form>태그를 이용해서 양식을 만들어본다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> </body> </html>html파일을 생성하니까 템플렛이 위와 같이 기본으로 세팅되어있죠?
여기에 제목 태그와 폼 태그를 이용해서 간단한 양식을 작성해보겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>회원 가입 폼 테스트</title> </head> <body> <h2>회원 가입</h2> <hr> <div id="joinform"> <form name="form1"> <label>이름</label><br> <input type="text" name="name" size="50"><br> <hr> <label>전화번호</label><br> <input type="text" name="phonenumber" size="50"><br> <button type="button" onClick="signup()">가입하기</button> </form> </div> </body> </html>저는 위와 같이 작성해봤어요.
4. 파일 저장하고 실행해보기
HTML파일의 경우에는 테스트를 위해서 서버를 연동하는 것은 꼭 필요한 작업이 아니에요.
그래서 그냥 html파일에서 오른쪽 클릭하고 오픈-웹브라우저 눌러보시면 됩니다.
파일을 꼭 저장한 뒤에 실행해야 변경된 게 보인다는 점 기억하세요~
(너무도 당연한 이야기지만 가끔 까먹는다..)
기본 입력 양식이 잘 구현된 걸 확인하셨나요?
근데 좀 밋밋하죠? 다음은 뭘 해야할까요?
5.CSS로 디자인 꾸미기
HTML는 CSS로 꾸며주는 거 다 아시죠?
태그는 너무 많으니까 잘 골라서 사용하시면 되고,
아이디는 직관적으로 만들어서 사용하시면 됩니다.
html안에서 css작업을 하고 싶다면
<style> 이 공간에 작업 </style>
스타일 태그를 사용해서 위와 같이 작업하시면 됩니다.
여기까지 작업하면 <h2>인 회원가입을 작업한거라서 이렇게 나옵니다. (코드는 아래에 공유)
더해서 이름과 전화번호도 간단하게 꾸며볼게요.
태그 추가해주면, 화면은 아래와 같이 구현됩니다.
태그들이 의미하는 것이 알 듯 말 듯 하다면 일일이 검색해서 알아가야합니다..
다양한 CSS속성에 대해 이해하고 있으면 작업하기가 훨씬 수월하겠죠?
이렇게 공부할 것이 하나하나^^늘어나는 점~
오늘 작성한 코드!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>회원 가입 폼 테스트</title> <style> h2 { background-color: skyblue; text-align: center; padding: 15px 0; border-radius: 3px; } #joinform { padding: 20px 20px; border-radius: 8px; margin: auto; width: 50%; background-color: lightblue; } </style> </head> <body> <h2>회원 가입</h2> <hr> <div id="joinform"> <form name="form1"> <label>이름</label><br> <input type="text" name="name" size="50"><br> <hr> <label>전화번호</label><br> <input type="text" name="phonenumber" size="50"><br> <button type="button" onClick="signup()">가입하기</button> </form> </div> </body> </html>'일단 만들기' 카테고리의 다른 글
파이썬 DB연결 게시판 기능 (웹X, 콘솔구현) (0) 2022.02.16 파이썬 DB연결 회원관리 프로그램 (웹X, 콘솔구현) (0) 2022.02.15 HTML,CSS,JS로 웹 그림판 만들기 완성 (코드) (0) 2022.01.04 HTML,CSS,JS(자바스크립트)로 웹 그림판 만들기 3 (0) 2022.01.03 HTML,CSS,JS(자바스크립트)로 웹 그림판 만들기 2 (0) 2022.01.01