본문 바로가기
코딩 공부/CSS

CSS 예제들

Largomaru 2022. 10. 23. 18:00

배운 것을 활용한 페이지 구현

1. 인덱스 페이지

<style>
table {
	width: 700px;
	margin: auto;
}
h2 {
	background: skyblue;
}
.menu {
	background: #D4F4FA;
	height: 50px;
	text-align: right;
}
.nav {
	background: #D1B2FF;
	height: 300px;
}
.section {
	background: #C4B73B;
	height: 150px;
}
.footer {
	background: #3DB7CC;
	height: 50px;
	text-align: center;
}
</style>
</head>
<body>
	<table>
		<tr>
			<th colspan="2"><h2>CARE LAB</h2></th>
		</tr>
		<tr>
			<td colspan="2"></td>
		</tr>
		<tr class="menu">
			<td colspan="2">login register</td>
		</tr>
		<tr>
			<td class="nav" rowspan="2">
			nav<br><br>cafe<br>mail<br>webtoon
			</td>
			<td class="section">section</td>
		</tr>
		<tr>
			<td class="section">section</td>
		</tr>
		<tr class="footer">
			<td colspan="2">
				footer | About Us | Recruitment | Partnership |	Terms of service
			</td>
		</tr>
	</table>
</body>

 

 

 

2. 로그인 페이지

<style>
       #wrap {  width:700px; height: 500px; margin:0 auto; overflow: auto; border: 1px solid;}
       header{  float: top; text-align:center; border-bottom: 1px solid;}
       nav { border-bottom: 1px solid;}
       article { float: left; border-right: 1px solid; width:50%; height:250px;  text-align:center;}
       aside {  display: inline; width:50%; height:250px; overflow: auto; }
       footer {  float: bottom; width:100%; border-top: 1px solid; overflow: auto;}
       h3{ text-align:center; }
      
       .inner{
			all: initial;
           display: block;
           text-align: center;
           margin:10px 0px;
       }
  
     	#login_box{ width: 250px; margin: 40px 0px 0px 410px; }
		.idpw_box {float: left;}
     	.idpw_box input { width:150px; height: 30px;}
     	div button { width:70px; height: 72px;}
     	.a_box{margin: 5px; }
     	a {text-decoration: none; color: black;}
   </style>
</head>
<body>
   <div id="wrap">
       <header> <h1> header</h1> </header>
      
       <nav> <h3>nav</h3> </nav>
       <article>
           <h3>article</h3>
           <header class="inner">header</header>
           <article class="inner">article</article>
           <footer class="inner">footer</footer>
       </article>
   
       <aside>
           <h3>aside</h3>
			<div id="login_box">
             <div class="idpw_box">
                 <input type="text" placeholder="아이디"><br>
                 <input type="password" placeholder="비밀번호">
             </div>
             <div>
                 <button>로그인</button>
             </div>
             <div class="a_box">
                 <a href="register.jsp">회원가입</a> / <a href="member_search.jsp">ID/PW찾기</a>
             </div>
           </div>
       </aside>
       <footer> <h3>footer</h3> </footer>
   </div>
</body>

 

 

 

3. 상담예약 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>quiz8</title>
<style>
@import
	url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');
body {
	background-color: #D7B5AE;  padding: 0 0 0 20px;
	color: white;  font-family: 'Noto Serif KR', serif;
}
#consulting_day {
	height: 52px;
}
.day_box {
	text-align: center;	line-height: 50px;
	float: left;		height: 50px;
	width: 100px;		border-radius: 10px;	background-color: #B07F74;
}
.selectiong_datebox {
	float: left;	padding: 13px 0 0 30px;
}
#nameboxs {
	height: 52px;
}
.name_box {
	text-align: center;	line-height: 50px;
	float: left;	height: 50px;
	width: 100px;	border-radius: 10px;	background-color: #B07F74;
}
.inname_box {
	float: left;	padding: 13px 0 0 30px;
}
#gender_boxs {
	height: 52px;
}
.gender_box {
	text-align: center;	line-height: 50px;
	float: left;	height: 50px;
	width: 100px;	border-radius: 10px;	background-color: #B07F74;
}
.ingender_box {
	float: left;
	padding: 13px 0 0 30px;
}
#mobile_boxs {
	height: 52px;
}
.mobile_box {
	text-align: center;	line-height: 50px;	float: left;
	height: 50px;	width: 100px;	border-radius: 10px;
	background-color: #B07F74;
}
.inmobile_box {
	float: left;
	padding: 13px 0 0 30px;
}
#mail_boxs {
	height: 52px;
}
.mail_box {
	text-align: center;	line-height: 50px;
	float: left;	height: 50px;
	width: 100px;	border-radius: 10px;	background-color: #B07F74;
}
.inmail_box {
	float: left;	padding: 13px 0 0 30px;
}
#subject_boxs {
	height: 52px;
}
.subject_box {
	text-align: center;vline-height: 50px;
	float: left;	height: 50px;
	width: 100px;	border-radius: 10px;	background-color: #B07F74;
}
.insubject_box {
	float: left;	padding: 0px 0 0 30px;
}
button {
	width: 80px;	height: 50px;
	border-radius: 10px;	border: 2px outset #B07F74;
	background-color: #B07F74;	color: white;
	font-family: 'Noto Serif KR', serif;
}
</style>
</head>
<body>
	<h2>빠른 상담 예약</h2>
	<p>직접 방문하시면 효과적인 공부방법을 체계적으로 상담 해 드립니다.</p>
	<div id="consulting_day">
		<div class="day_box">상담일시</div>
		<div class="selectiong_datebox">
			<input id="datepicker" type="date"> <select name="time">
				<option value="am10">오전 10시</option>
				<option value="am11">오전 11시</option>
				<option value="pm2">오후 2시</option>
				<option value="pm3">오후 3시</option>
				<option value="pm4">오후 4시</option>
			</select>
		</div>
	</div>
	<div id="nameboxs">
		<div class="name_box">이름</div>
		<div class="inname_box">
			<input name="name" type="text">
		</div>
	</div>
	<div id="gender_boxs">
		<div class="gender_box">성별</div>
		<div class="ingender_box">
			<input type="radio" value="female" name="gender"> 여 <input
				type="radio" value="male" name="gender">남
		</div>
	</div>
	<div id="mobile_boxs">
		<div class="mobile_box">연락처</div>
		<div class="inmobile_box">
			<select name="time">
				<option value="am10">010</option>
				<option value="am11">011</option>
				<option value="pm2">016</option>
			</select> <input name="mo_middle" type="text"
				oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
				maxlength='4'> <input name="mo_bottom" type="text"
				oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
				maxlength='4'>
		</div>
	</div>
	<div id="mail_boxs">
		<div class="mail_box">이메일</div>
		<div class="inmail_box">
			<input name="mail_first" type="text"> @ <input
				name="mail_domein" type="text">
		</div>
	</div>
	<div id="subject_boxs">
		<div class="subject_box">궁금한 점</div>
		<div class="insubject_box">
			<textarea rows="3" cols="50" name="subject" placeholder="구체적으로 써주세요"></textarea>
		</div>
	</div>
	<br>
	<br>
	<div>
		개인정보 수집 약관 동의서<br>
		<br>
		<textarea rows="20" cols="100" name="terms" readonly>
Ⅰ. 개인정보의 수집 및 이용 동의서
	- 이용자가 제공한 모든 정보는 다음의 목적을 위해 활용하며, 하기 목적 이외의 용도로는 사용되지 않습니다.
① 개인정보 수집 항목 및 수집·이용 목적
	 가) 수집 항목 (필수항목)
		- 성명(국문), 주민등록번호, 주소, 전화번호(자택, 휴대전화), 사진, 이메일, 나이, 재학정보, 병역사항,
		외국어 점수, 가족관계, 재산정도, 수상내역, 사회활동, 타 장학금 수혜현황, 요식업 종사 현황 등 지원
		신청서에 기재된 정보 또는 신청자가 제공한 정보
	 나) 수집 및 이용 목적
		- 장학생 선발 전형 진행
		- 장학생과의 연락 및 자격확인
		- 장학생 자원관리
② 개인정보 보유 및 이용기간
		 - 수집·이용 동의일로부터 개인정보의 수집·이용목적을 달성할 때까지
③ 동의거부관리
		- 귀하께서는 본 안내에 따른 개인정보 수집, 이용에 대하여 동의를 거부하실 권리가 있습니다. 다만,
		귀하가 개인정보의 수집/이용에 동의를 거부하시는 경우에 장학생 선발 과정에 있어 불이익이 발생할 수
		있음을 알려드립니다
	</textarea>
	</div>
	<div id="agreecheck">
		<input type="checkbox" value="checked" name="agree">개인정보 수집동의<br>
		<br>
	</div>
	<a href="quiz10.jsp"><button>문의하기</button></a>
</body>
</html>

 

 

저작자표시 비영리 변경금지

'코딩 공부 > CSS' 카테고리의 다른 글

CSS Table  (0) 2022.10.22
CSS header session footer등의 구조  (0) 2022.10.21
CSS 예제 (clear, overflow, box-sizing)  (0) 2022.10.20
CSS 예제 (ul, li, border, margin, position)  (0) 2022.10.19
CSS  (0) 2022.10.18

'코딩 공부/CSS' Related Articles

티스토리툴바