초보 개발자의 기록

HTML & CSS 기초 본문

Korea/HTML&CSS

HTML & CSS 기초

bambinodeveloper 2020. 12. 1. 00:22
728x90

 

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 양식</title>
<!-- 
	스타일 시트를 적용하는 방법은 2가지가 있음
	1. 인라인 방식 : 해당 태그에 직접 명시하는 방식
					   적용대상이 많을 경우 효율성이 떨어짐. 최우선적으로 적용되는 방식임
	2. 임베드 방식 : style 태그에 일괄적용하는 방식
					  -문법형식 : 어떤태그를 대상으로 어떠한 처리를 할지를 표현하면 된다.
						예) td {font-size: 9pt}
	
	-->	
<style>
/*
	아래와 같은 문법형식에서 대상을 가리켜, 선택자라한다.
	ex) td 선택자
*/
table{
	border:5px dotted red; 
}
td {
	font-size: 9pt; 
}
input{
	color: white;/*그냥 color는 글씨색을 의미*/
}
select{
	background: gray;
	color: white;
}
/*선택자로 아이디를 사용할 경우#을 붙인다.*/
#t_name{
	background: pink;
}
</style>
</head>
<body>
	<table width="600px" border="2px" align="center">
		<tr>
			<td colspan="2" align="center" style="font-size: 10px">회원가입</td>
		</tr>
		
		<tr>
			<td>ID</td>
			<td>
				<input type = "text" placeholder = "아이디입력..."/>
			</td>
		</tr>
		<tr>
			<td >Password</td>
			<td>
				<input type = "password" placeholder = "비밀번호입력..."/>
			</td>
		</tr>
		<tr>
			<td >Name</td>
			<td>
				<input type = "text" id="t_name" placeholder = "이름입력..."/>
			</td>
		</tr>
		<tr>
			<td >연락처</td>
			<td>
				<select>
					<option>010</option>
					<option>011</option>
					<option>017</option>
					<option>019</option>
				</select>
				-<input type ="text" placeholder = "앞자리" size="5"/>
				-<input type ="text" placeholder = "뒷자리" size="5"/>
			</td>
		</tr>
		<tr>
			<td >취미</td>
			<td>
				여행<input type = "checkbox"/>
				독서<input type = "checkbox"/>
				운동<input type = "checkbox"/>
				IT<input type = "checkbox"/>
			</td>
		</tr>
		<tr>
			<td >email</td>
			<td>
				<input type = "text" placeholder = "메일 아이디"/>@
				<select>
					<option>네이버</option>
					<option>구글</option>
					<option>한메일</option>
				</select>

			</td>
		</tr>
		<tr>
			<td >메일수신</td>
			<td>
				예<input type = "radio" name="receive"/>
				아니오<input type = "radio" name="receive"/>
			</td>
		</tr>
		<tr>
			<td >우편번호</td>
			<td>
				<input type = "text" placeholder="우편번호" size="5" readonly/>
				<button>우편번호검색</button>
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<button>가입하기</button>
			</td>
		</tr>
	</table>

</body>
</html>
 

jenkwon92/HtmlCss_Workspace

Korea it academy HTML/CSS class. Contribute to jenkwon92/HtmlCss_Workspace development by creating an account on GitHub.

github.com

 

728x90
반응형

'Korea > HTML&CSS' 카테고리의 다른 글

CSS 배경  (0) 2020.12.04
CSS 색상  (0) 2020.12.04
HTML기초  (0) 2020.12.01
HTML과 CSS를 공부하는 이유와 목표  (0) 2020.11.30
'Korea/HTML&CSS' Related Articles more