Step by Security Study

회원 가입 페이지 본문

개발/웹 개발

회원 가입 페이지

jooon99 2023. 6. 17. 19:30

1. 최종 화면

 

 

 

2. 코드 설명

 1) 전체 이미지

- 페이지 배경색은 검정, 글씨는 흰색으로 지정

- bgcolor 속성을 사용하여 페이지의 배경색을 검은색(black)로 지정

- 웹 페이지에 있는 모든 <body> 태그에 속한 글씨의 색을 '흰색(white)'으로 지정

# HTML 코드
<body bgcolor="black"> 
    <h1> 회원 가입 </h1>

# CSS 코드
body{
    color:white;
}

 

폼

- 회원가입 입력 양식 지정

- <form> 태그를 사용하여 사용자로부터 입력받을 수 있는 양식 생성

- action 속성 : 사용자로부터 입력받은 데이터를 어디로 보낼 것인지 URL 지정

- method 속성 : 사용자로부터 입력받은 데이터를 서버로 보낼 때 어떤 HTTP 메서드를 사용할 것인지 지정

                        -> 서버에 데이터를 보내야 하기 때문에 POST 방식 선택

<form action="signup.php" method="POST">

 

ID 입력 칸

- input 태그의 type 속성 값을 text로 지정하여 아이디를 입력할 수 있도록 입력 칸을 생성

- name 속성을 사용하여 입력된 값을 서버로 전송할 때 어떠한 이름으로 전송할 것인지 지정(식별자)

- placeholder 속성을 사용하여 입력 칸에 어떤 값을 입력해야 하는지 알려줌

- boxsize라는 CSS 스타일 규칙을 적용하도록 지정

# HTML 코드
<h3>ID</h3>
	<input type="text" name="userid" placeholder="ID" class="boxsize">
   	<input type="button" name="userid_check" value="CHECK">

 

- 상 1px, 좌/우 1px, 하 0px margin 값 지정

- 상/하 13px, 좌/우 15px padding 값 지정

- 입력 칸의 너비는 400px

- 입력 칸의 높이는 30px

.boxsize{
    margin:1px 1px 0px;
    padding : 13px 15px;
    width: 400px;
    height: 30px;

 

PASSWORD 입력

- 패스워드를 정확하게 입력했는지 확인하기 위해 2개의 입력 칸 생성

- input 태그의 type 속성 값을 password로 지정하여 패스워드 입력 시 별표(*)로 표시하도록 함

- name 속성을 사용하여 입력된 값이 서버로 전송될 때 'userpw', 'userpw2'라는 식별자를 사용하도록 함(이름표)

- ID 입력 칸과 같이 boxsize라는 CSS 스타일 규칙을 적용하도록 지정

<div>
	<input type="text" name="userpw" placeholder="PASSWORD" class="boxsize">
	<p><input type="text" name="userpw2" placeholder="PASSWORD_CHECK" class="boxsize"></p>
</div>

 

이름 입력 폼

- input 태그의 type 속성 값을 text로 지정하여 이름을 입력할 수 있도록 입력 칸을 생성

- name 속성을 사용하여 입력된 값이 서버로 전송될 때 'username'이라는 식별자를 사용하도록 함

- boxsize라는 CSS 스타일 규칙을 적용하도록 지정

<div id="box">
	<input type="text" name="username" value="" class="boxsize"> <br>
</div>

 

생년월일

연도

- input 태그의 type 속성 값을 text로 지정하여 연도를 입력할 수 있도록 입력 칸을 생성 

- name 속성을 사용하여 입력된 값이 서버로 전송될 때 'bir_yy'이라는 식별자를 사용하도록 함

- maxlength 속성을 사용하여 년도 입력 칸에 최대 4개의 숫자만 입력하도록 설정

- style 속성을 사용하여 입력 칸의 너비는 200px, 높이는 60px로 지정

 

월

- <div> 태그로 전체를 감싸고, id 속성은 bir_mm 값을 지정

- <select> 태그를 사용하여 여러 선택 지 중 하나를 선택할 수 있도록 드롭 다운 리스트를 생성

- name 속성을 사용하여 선택된 값이 서버로 전송될 때 'bir_mm'라는 식별자를 사용하도록 함

- style 속성을 사용하여 입력 칸의 너비는 70px, 높이는 65px로 지정

 

일

- <div> 태그로 전체를 감싸고, id 속성은 bir_dd 값을 지정

- input 태그의 type 속성 값을 text로 지정하여 며칠인지 입력할 수 있도록 입력 칸을 생성

- name 속성을 사용하여 선택된 값이 서버로 전송될 때 'bir_dd'라는 식별자를 사용하도록 함

- maxlength 속성을 사용하여 '일' 입력 칸에 최대 2개의 숫자만 입력하도록 설정

- style 속성을 사용하여 입력 칸의 너비는 125px, 높이는 60px로 지정

# HTML 코드
<h3>생년월일</h3> 
<div id="bir_yy">
	<input type="text" name="bir_yy" id="yy" class="int" maxlength="4" placeholder="년도" style= "width:200px;height:60px;">
</div>
                
<div id="bir_mm">
	<span class="box">
    <select id="mm" name="bir_mm" style= "width:70px;height:65px;">
		<option>월</option>
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>                                    
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
	</select>
    </span>
</div>

<div id="bir_dd">
	<span class="box">
    	<input type="text" name="bir_dd" id="dd" class="int" maxlength="2" placeholder="일" style= "width:125px;height:60px;">
	</span>
</div>

 

- 연도, 월, 일 입력 칸은 display 속성을 사용하여 표(table)와 같이 표현하도록 함

- bir_mm, bir_dd 클래스에는 padding-left 속성을 사용하여 이미지와 같이 보이도록 함

#bir_yy {
    display: table-cell;

}

#bir_mm {
    display: table-cell;
    
    /*vertical-align: middle;*/
}

#bir_dd {
    display: table-cell;

}
#bir_mm, #bir_dd {
    padding-left: 10px;
}

 

사용자 성별

- <select> 태그를 사용하여 여러 선택 지 중 하나를 선택할 수 있도록 드롭 다운 리스트를 생성

- name 속성을 사용하여 선택된 값이 서버로 전송될 때 'gender'라는 식별자를 사용하도록 함

- style 속성을 사용하여 입력 칸의 너비는 438px, 높이는 65px로 지정

- <option> 태그를 사용하여 드롭 다운 리스트 내에서 선택할 수 있는 항목들을 만들어줌

    - value = "남자" : 서버로 송되는 값을 의미

    - <option> 태그 사이의 "남자"는 사용자가 옵션을 선택할 수 있도록 표시되는 글자

<h3>성별</h3>
<select name="gender" id="gender" style= "width:438px;height:65px;">
	<option>성별</option>
	<option value="남자">남자</option>
   	<option value="여자">여자</option>
</select>

 

이메일

- input 태그의 type 속성 값을 email로 지정하여 이메일 주소를 입력할 수 있는 칸을 생성 (자동으로 입력된 값이 이메일 형식인지 검사)

- name 속성을 사용하여 입력된 값이 서버로 전송될 때 'user_email'이라는 식별자를 사용하도록 함

- placeholder 속성을 사용하여 email@gmail.com 과 같은 형식으로 작성하라고 알려줌

- boxsize라는 CSS 스타일 규칙을 적용하도록 지정

<h3>이메일</h3>
<div id = "box">
	<input type="email" name="user_email" placeholder="email@gmail.com" class="boxsize"><br><br>
</div>

 

버튼

- <button> 태그를 사용하여 사용자가 클릭할 수 있는 버튼을 생성

- button의 type은 submit(제출하다)으로 지정하여 입력된 값이 서버로 보낼 수 있도록 설정

# HTML 코드
<button type="submit" value="Submit" id="join"> 가입하기 </button>

 

- 너비는 95% 

- padding 값은 상 21px, 좌/우 0, 하 17px 지정

- border는 0값을 주어 테두리를 없애도록 함

- cursor 속성에는 pointer 값을 지정하여 마우스 커서를 버튼 위에 두면 손가락 모양으로 변하도록 함

- 버튼 색은 흰색

- 글씨 사이즈는 20px

- 글씨 높이는 400

#join {
    width: 95%;
    padding: 21px 0 17px;
    border: 0;
    cursor: pointer;
    color: black;
    background-color: white;
    font-size: 20px;
    font-weight: 400;
}

 

가운데 정렬

- 웹 페이지에 있는 모든 <h1> 태그에 속한 글씨는 가운데로(center)로 정렬할 수 있도록 지정

- 전체 내용은 div 태그로 묶고 id는 content라는 값을 주어 아래 스타일이 적용되도록 

h1{
    text-align:center;
}

#content{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 460px;
}

 

 

 

 

 

 

 

'개발 > 웹 개발' 카테고리의 다른 글

회원 가입 기능 구현  (0) 2023.09.04
[HTML/CSS] 회원가입 페이지  (0) 2023.08.27
[HTML/CSS] 로그인 페이지  (0) 2023.08.20
[HTML/CSS] 메인 페이지  (0) 2023.08.19
'개발/웹 개발' Related Articles more