본문 바로가기
노트필기

[Web] class 0712-1

BONiii 2017. 7. 12. 12:51

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body align="center">

<fieldset>

<legend>회원가입</legend>

<!-- 서버에 값을 넘겨주기 위해선 form 안에 입력해줘야 한다. -->

<form action="">

<!--라벨안의 문자 클릭시 for의 id값으로 커서이동//

값을 입력할 수 있는 공간 생성 //

힌트 최고길이 글씨크기-->

<label for="idl">ID</label><input type="text" placeholder="ID 필요" id="idl" maxlength="10" size="40">

<br>

<input type="password" placeholder="PW 필요" size="40">

<br>

<!-- 다른형식일때 오류창 띄움 -->

<input type="email" placeholder="이메일 필요" size="40" required="required">

<br>

<input type="tel" placeholder="전화번호 필요" size="40" required="required" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"

title="형식은 ###-####-####입니다.">

<br>업로드파일을 선택하세요.<br>

<input type="file">

<br>생일날짜를 선택하세요<br>

<input type="date">

<br>좋아하는 색 선택<br>

<input type="color">

<br>성별

남자<input type="radio" name="gender" checked="checked">

여자<input type="radio" name="gender">

<br>취미

운동<input type="checkbox" checked="checked">

음악<input type="checkbox">

영화<input type="checkbox">

<br>

수량 <input type="number" min="0" max="10">

<br>

움형 <input type="range" >

<br>

<!--버튼에들어갈 글씨  -->

<input type="submit" value="회원가입" >

<input type="reset" value="초기화" >

<input type="button" value="버튼입니다.">

</form>

</fieldset>


</body>

</html>





-========================================

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body> <!--여러개 선택 가능하게 함  -->

<select multiple="multiple">

<option>대한민국</option>

<option>미국</option>

<option>중국</option>

</select>

<br>

<textarea rows="30" cols="50"></textarea>

<br>

<input type="text" list="list1">

<datalist id="list1">

<option>구</option>

<option>보</option>

<option>니</option>

<option>짱</option>

</datalist>

</body>

</html>



==========================================


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>

<p align="center">

<img alt="메인사진" src="shakeit.png" width="100" height="100"> <br>


<font size="8">Sign Up</font><br> For Our Blogging System Today!

</p>

<table align="center" width="600">

<tr  bgcolor="gray">

<td colspan="2"><h3>&nbsp&nbspStep 1 : Account Information</h3></td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><label for="name"><b>Your Name</b></label></td>

<td align="left"><input type="text" placeholder="이름을 입력하세요." size="40" id="name"></td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><label for="email"><b>E-mail</b></label></td>

<td align="left"><input type="email" placeholder="e-mail을 입력하세요." size="40" id="email" required="required"></td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><label for="Password"><b>Password</b></label></td>

<td align="left"><input type="password" placeholder="PW를 입력하세요." size="40" id="Password"></td>

</tr>

<tr  bgcolor="gray">

<td colspan="2"><h3>&nbsp&nbspStep 2 : Billing Details</h3></td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><b>Gender</b></td>

<td align="left">

Man<input type="radio" name="gender">

Woman<input type="radio" name="gender">

</td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><label for="tel"><b>Phone</b></label></td>

<td align="left">

<input type="tel" placeholder="전화번호를 입력하세요." size="40" id="tel" required="required" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" title="###-####-#### 형식 입니다."><br>

<input type="checkbox"> <font size="2">Yes, text me Update and opecial announcements</font>

</td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><label for="country"><b>Country</b></label></td>

<td align="left">

<select id="country">

<option>Choice</option>

<option>South Korea</option>

<option>U.S.A</option>

</select>

</td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><label for="addr"><b>Address</b></label></td>

<td align="left">

<input type="text" size="40" id="name">

<input type="button" value="find address" id="addr">

</td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><label for="date"><b>Your Birthday</b></label></td>

<td align="left"><input type="date" id="date"></td>

</tr>

<tr  bgcolor="gray">

<td colspan="2"><h3>&nbsp&nbspStep 3 : Your Favorite</h3></td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><b>Choice Your Hobby</b></td>

<td align="left">

Sports<input type="checkbox">

Study<input type="checkbox">

reading<input type="checkbox">

meeting<input type="checkbox">

eating<input type="checkbox">

</td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="right"><label for="color"><b>Favorite Color</b></label></td>

<td align="left">

<input type="color" id="color">

</td>

</tr>

<tr  bgcolor="gray">

<td colspan="2"><h3>&nbsp&nbspStep 4 : Talk us!</h3></td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="left" colspan="2">

<textarea rows="20" cols="90"></textarea>

</td>

</tr>

<tr hegith="50" bgcolor="whitesmoke" align="center">

<td align="center" colspan="2">

<input type="submit" value="Join">

<input type="reset" value="Reset">

</td>

</tr>

</table>

</body>

</html>


======================


<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="Test1.css">

<STYLE>

body {

margin: 0px;

}


#container {

background-color: #f0f0f0;

width: 960px;

}


#header {

background-color: #908886;

height: 45px;

}


#side {

background-color: #F5F5F5;

float: left;

width: 300px;

height: 860px

}


#content {

background-color: #DCDAD9;;

float: left;

width: 660px;

height: 860px

}


#footer {

background-color: #555555;

clear: both;

height: 100px

}

</STYLE>

<title>여러분의 홈페이지를 만들어주세요</title>

</head>

<body>

<center>

<div id="container">

<div id="header">

<h1>Welcome to 구보니 world</h1>

</div>

<div id="side">

<img src="../img/a01.png" width="250" height="250" vspace="15"

border="1">

<hr>

이름 :

<ruby>

<b><font size="5">구 보 니</font></b>

<rt>gubonny</rt>

</ruby>

<font size="2">

<br> <br> 나이 : 26 <br> 핸드폰 : 112-119-111 <br> 취미

: 생각하기 <br> 직업 : 잉여 <br> 주소 : 광주 강남구 샌프란시스코동 <br> <br>

<a href="http://gubonny.tistory.com" target="_blank">구보니 블로그</a> <br>

<a href="http://www.daum.net" target="_self">다음</a> <br>

</font>

</div>

<div id="content">

<br>

<table border="1" width="400" height="300">

<tr align="center">

<td colspan="7">2017년 07월 스케쥴 표</td>

</tr>

<tr align="center">

<td>일</td>

<td>월</td>

<td>화</td>

<td>수</td>

<td>목</td>

<td>금</td>

<td>토</td>

</tr>

<tr align="center">

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td>1</td>

</tr>

<tr align="center">

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

<td>8</td>

</tr>

<tr align="center">

<td>9</td>

<td>10</td>

<td>11</td>

<td>12</td>

<td>13</td>

<td>14</td>

<td>15</td>

</tr>

<tr align="center">

<td>16</td>

<td>17</td>

<td>18</td>

<td>19</td>

<td>20</td>

<td>21</td>

<td>22</td>

</tr>

<tr align="center">

<td>23</td>

<td>24</td>

<td>25</td>

<td>26</td>

<td>27</td>

<td>28</td>

<td>29</td>

</tr>

<tr align="center">

<td>30</td>

<td>31</td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr align="center">

<td colspan="7">앙~기모띠!</td>

</tr>

</table>

<hr>


<table>

<tr>

<td>

<fieldset>

<legend>Web</legend>

<ul>

<li><a href="http://www.naver.com">네이버</a></li>

<li><a href="http://www.daum.com">다음</a></li>

<li><a href="http://www.google.com">구글</a></li>

</fieldset>

</ul>

</td>

<td>

<fieldset>

<legend>today schedul</legend>

<ol type="i">

<li>HTML</li>

<li><mark>HTML</mark></li>

<li>HTML</li>

</ol>

</fieldset>

</td>

<td>

<fieldset>

<legend>tomrrow schedul</legend>

<ol type="A">

<li>HTML</li>

<li>HTML</li>

<li><mark>HTML</mark></li>

</ol>

</fieldset>

</td>

</tr>

</table>

<hr>


<details>

<summary>음악동영상</summary>

<video src="../0711/everyday.mp4" controls="controls"

poster="../0711/337650.jpg"></video>

</details>

<hr>


<details>

<summary>다음 홈페이지</summary>

<iframe src="http://www.daum.net" width="100%" height="300"></iframe>

</details>

</div>

<div id="footer">

<br>

<h3>Copy@한국스마트미디어학회</h3>

</div>

</div>

</center>

</body>

</html>




=======================================


<CSS>


* H1 { color : red ;}


- h1태그의 color 스타일 속성에 스타일 값 red를 스타일링














저작자표시

'노트필기' 카테고리의 다른 글

[Web] class 0713-1  (0) 2017.07.13
[Web] class 0712-2  (0) 2017.07.12
[Web] class1-2  (0) 2017.07.11
[Web] Class01  (0) 2017.07.11
[Android] 2017.06.20(오후)  (0) 2017.06.20

'노트필기' Related Articles

티스토리툴바