<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>num, range 속성</title>
</head>
<body>
<form action="">
<div>
<label for="">참여인원</label>
<!-- type = number, range 일때 사용할 수 있는 속성들-->
<!-- min : 최소값 설정-->
<!-- max : 최대값 설정-->
<!-- step : 증가값 설정-->
<!-- value : 초기값 설정-->
<input type="number" id = "membercnt" min = "1" max = "20" step="1" value="0">
</div>
<div>
<label for="level">난이도</label>
<input type="range" id = "level" value="1" min="1" max="3">
</div>
<div>
<label for=""></label>
<input type="text">
</div>
</form>
</body>
</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>한 페이지 내에서 원하는 영역으로 이동하는 앵커</title>
<style>
h1 {
font-size: 70px;
}
h2 {
font-size: 58px;
}
p {
font-size: 48px;
}
</style>
</head>
<body>
<h1>앵커 만들기</h1>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<ul id="menu">
<li>
<!--해당 아이디의 영역으로 링크를 걸어줌-->
<a href="#content1">내용1</a>
</li>
<li>
<a href="#content2">내용2</a>
</li>
<li>
<a href="#content3">내용3</a>
</li>
</ul>
<!--영역의 아이디 지정-->
<h2 id="content1">내용1</h2>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
<a href="#menu">메뉴로</a>
</p>
<h2 id="content2">내용2</h2>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
<a href="#menu">메뉴로</a>
</p>
<h2 id="content3">내용3</h2>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
</p>
<p>
<a href="#menu">메뉴로</a>
</p>
</body>
</html>
id pw email tel url submit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input tag type 's sorts</title>
</head>
<body>
<form action="">
<div><label for="userID"></label>
<input type="text" id = "userId">
</div>
<div><label for="userpw"></label>
<input type="password" id = "userpw">
</div>
<div><label for="useremail"></label>
<input type="email" id ="useremail">
</div>
<div><label for="usertel"></label>
<input type="tel" id = "usertel"
pattern="[0-9]{3}-[0-9]{4}-[0-9"{4}"
>
</div>
<div><label for="userhomp"></label>
<input type="url" id ="userhomp">
</div>
<input type="submit" value = "전송하기">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
}
li {
margin : 20px;
}
li label{
width: 80px;
}
fieldset {
margin : 15px;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>주문자 정보</legend>
<ul>
<li>
<label for ="userName">이름
<input type="text" id = "userName">
</label>
<li>
<label for ="phonenumber">연락처
<input type="text" id = "phonenumber">
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지정보</legend>
<ul>
<li>
<label for= "receivename">받는사람이름
<input type="text" id="receivename">
</label>
</li>
<li>
<label for = "adress">주소
<input type="text"
id = "adress">
</label>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radio, checkbox, label</title>
<style>
ul {
list-style : none;
}
li {
margin : 20px;
}
</style>
</head>
<body>
<h3>프로그래밍 언어(복수선택)</h3>
<ul>
<li>
<label>
<input type="checkbox" value="java">자바
</label>
</li>
<li>
<label>
<input type="checkbox" value="c">
씨언어
</label>
</li>
<li>
<input type="checkbox" value="python">파이썬
</li>
</ul>
<h3></h3>
<ul>
<li><label >
<input type="radio" name = "db" value="oracle">오라클</label>
</li>
<li><label >
<input type="radio" name = "db" value="oracle">마이sql</label>
</li>
<li><label >
<input type="radio" name = "db" value="oracle">마리아디비</label>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style : none;
}
li{
margin : 20px;
}
li label {
width : 40px;
font-size : 10px;
font-weight : bold;
line-height : 25px;
}
</style>
</head>
<body>
<form action="/user/login" method="post">
<ul>
<li>
<label>아이디
<input type="text">
</label>
</li>
<li>
<label for="pass">비밀번호</label>
<input type="password" id = "pass">
</li>
<li>
<input type="submit" value="로그인">
</li>
</ul>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a1{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div>
<h3>기본 하이퍼 링크 만들기</h3>
<a href="http://www.naver.com" target="_blank">네이버</a></div>
<div>
<h3>밑줄 제거 및 글자색 변경된 하이퍼링크</h3>
<a class = "a1" a href="http://www.google.com" target="_self">구글</a></div>
<div>
<h3>이미지로 링크 만들기</h3>
<a href="http://www.bitcamp.co.kr">
<img alt = "비트캠프 로고" src="bit.jpg">
</a></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>테이블의 구조를 잡아주는</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
width: 80px;
height: 30px;
}
thead, tfoot {
background: lightgray;
}
</style>
</head>
<body>
<table>
<!-- caption+thead+tbody+tfoot-->
<caption>네이버 클라우드 과정 현황</caption>
<thead>
<tr>
<th>구분</th>
<th>신청인원</th>
<th>재적인원</th>
<th>현재인원</th>
</tr>
</thead>
<tbody>
<tr>
<th>1기</th>
<td>30</td>
<td>2</td>
<td>28</td>
</tr>
<tr>
<th>2기</th>
<td>30</td>
<td>3</td>
<td>27</td>
</tr>
<tr>
<th>3기</th>
<td>14</td>
<td>3</td>
<td>27</td>
</tr>
<tr>
<th>4기</th>
<td>3</td>
<td>3</td>
<td>27</td>
</tr>
<tr>
<th>5기</th>
<td>36</td>
<td>3</td>
<td>27</td>
</tr>
<!-- tr>th+td*3-->
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>150</td>
<td>15</td>
<td>135</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>테이블에 제목을 붙여주는 caption</title>
<style>table, th, td {
border: 1px solid black;
border-collapse: collapse;
}</style>
</head>
<body>
<figure>
<figcaption>
<p> 요즘 사용되는 <b>spa 언어</b></p>
</figcaption>
<table>
<caption>
<strong style="color: red">
front end languages
</strong>
<p>요즘 사용되는 spa언어</p>
</caption>
<tr>
<th>언어</th>
<td>제조사</td>
<td>개발일시</td>
</tr>
<tr>
<th>리액트</th>
<td>메타</td>
<td>2013</td>
</tr>
<tr>
<th>뷰</th>
<td>메타</td>
<td>2013</td>
</tr>
</table>
</figure>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>여러 열을 묶어서 스타일을 지정하는 colgroup, col</title>
<style>table, th, td {
border: 1px solid black;
border-collapse: collapse;
}</style>
</head>
<body>
<table>
<caption>
<strong style="color: red">
front end languages
</strong>
<p>요즘 사용되는 spa언어</p>
</caption>
<colgroup>
<col style = "background-color: aqua;">
<col style = "background-color: yellow;">
<col style = "background-color: lightgreen;">
</colgroup>
<tr>
<th>언어</th>
<td>제조사</td>
<td>개발일시</td>
</tr>
<tr>
<th>리액트</th>
<td>메타</td>
<td>2013</td>
</tr>
<tr>
<th>뷰</th>
<td>메타</td>
<td>2013</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>셀 병합해주는 colspan, rowspan 속성</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
tr{
height: 30px;
}
th, td {
width: 30px;
height: 15px;
}
</style>
</head>
<body>
<!--table>((tr>(th+td)*2)*2 + (tr>(th+td))*2)-->
<table>
<tr>
<th rowspan="2">이름</th>
<td rowspan="2">고기천</td>
<th rowspan="2">연락처</th>
<td rowspan="2">01000000000</td>
</tr>
<tr>
<th></th>
<td></td>
<th></th>
<td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="7">강남</td>
</tr>
<tr>
<th> 자기소개</th>
<td colspan="7"> 안녕하세요</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>😍프로그래밍언어</p>
<ul>
<li>자바
<ol>
<li>변수</li>
<li>클래스</li>
<li>스트림</li>
</ol>
</li>
<li>html
<ol>
<li>택스트</li>
<li>목록</li>
</ol>
</li>
</ul>
<ul>
<li>프로그래밍언어
<ul>
<li>자바
<ol>
<li>변수</li>
<li>변클래스</li>
<li>스트림</li>
</ol>
</li>
<li>html
<ol>
<li>텍스트</li>
<li>목록</li>
</ol>
</li>
</ul>
</li>
</ul>
</body>
</html>
댓글 영역