첫번째 날 못 배웠던 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0; padding:0;}
ul,li{list-style:none}
a{text-decoration: none; color: #000;}
a:hover{text-decoration: underline;}
select{width: 180px; height: 20px;}
</style>
</head>
<body>
<div>
<ul>
<li>이름 : <input type="text" placeholder ="이름을 입력하세요"></li>
<li>아이디 : <input type="text" placeholder ="아이디를 입력하세요"></li>
<li>패스워드: <input type="text" placeholder = "패스워드를 입력하세요"></li>
<li>패스워드 확인 : <input type="text"></li>
<li>
이메일 : <input type="text" placeholder = "이메일을 입력하세요">@
<select name="email">
<option value="gmail.com">gmail.com</option>
<option value="naver.com" selected>naver.com</option>
<option value="hanmail.com">hanmail.com</option>
</select>
</li>
<button oneclick><a href ="#">회원가입</a></button>
</ul>
</div>
</body>
</html>처음으로 select element 써봄 select로 선택할 수 있는 옵션을 준다.
그리고 옵션 중에 겉으로 보일 옵션한테 selected를 붙여준다.
>> 그럼 '이메일 선택' 이라는 글을 겉으로 보이고 싶으면 option에 value를 주지말고
<option selected>이메일 선택</option> 이런 식으로 넣어도 작동할까?
>> 블로그에서 복붙 했는데 뒤에 붙은 속성값에는 무슨 의미가 있는지 모르겠다.
아마 회원가입 후 정보가 서버로 넘어갈 때 정보 구분을 위해서 사용 되는 듯 하다.
~.mail이라는 텍스트 자체에는 아무런 의미가 없으니까 거기에 value를 부여해주는 것 같다.
근데 select name이라는 속성값은 뭘 의미하는지 모르겠음
>>찾아보니까 서버로 전달되는 이름을 결정해준다고 하는데 그럼 앞에 text랑 email이 따로 구분되서 저장되는건가?
input type도 처음 써봤다 설명을 어떤 식으로 해야할지 모르겠지만 정말 input의 type을 구분 지어준다
Button 에 one click 이라는 속성값을 줘서 클릭 효과를 줬다.
placeholder를 사용해 text box안에 글자를 입력함.
회원가입에 하이퍼링크 걸어봤고 저번에 썼던 css에서 a, a:hover이용해서 underline 설정을 줘봤다
RESULT
'Code' 카테고리의 다른 글
| 3.15 (0) | 2021.03.15 |
|---|---|
| 2021.3.12 (Thu) - clone NAVER (0) | 2021.03.12 |
| 2021.3.11(Thu) - Group Assignment (0) | 2021.03.11 |
| 2021.3.10 (Wed) - container/ contents (0) | 2021.03.10 |
| 2021.3.10-code {혼자 (0) | 2021.03.10 |
