[Spring] Web Page 만들기 (2) 회원가입 페이지

카테고리 없음

[Spring] Web Page 만들기 (2) 회원가입 페이지

Journey Jeong 2023. 4. 10. 17:15

* css 표기 세가지 방법

(1) External Tag(익스터널태그) : CSS 파일을 통하여 head 에 CSS 파일 링크 연결

(2) Internal Tag (인터널태그): head 태그 안에 style 태그로 스타일 정의

(3) Inline Tag (인라인태그) : HTML 그 안에 스타일 속성 설정

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="common.css"> External 태그 
		<style type="text/css"></style> Internal 태그 
	</head>
	<body>
		<header style="color:red"> Inline태그
			<h1> 헤더영역 </h1>
			<div class = "wrap">
				로그인 페이지 
			</div>
		</header>
	</body>
</htm

1. CSS 적용하기

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>로그인페이지</title>
		<link rel="stylesheet" href="/css/member/signin.css">
	</head>
	<body>
		<header > 
			<h1> 헤더영역 </h1>
			<div class = "wrap">
				로그인 페이지 
			</div>
		</header>
	</body>
</html>

@charset "UTF-8"; 
COMMON
*{padding: 0; margin:0 ; box-sizing: border-box;}
h1{font-size: 0; position: absolut; left: -9999px}

SIGNIN
@charset "UTF-8";
@import url("../common.css")

2. Develope 하기 (진짜 개빡친다 ㅡㅡ)

common

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{padding: 0; margin:0 ; box-sizing: border-box;}
h1{font-size: 0; position: absolut; left: -9999px}
li{list-style: none;}
input{border: 1px solid #a9a9a9; outline: none;}
a{text-decoration: none; color: #222;} /* 글자 기존 스타일 제거 */
body{
	/* font-family: 'Monoton', cursive; */
	font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}
.view-size-log{
	width: 460px;/*  가로 크기  */
	margin: 0 auto;/*   460px 의 가로가 화면에서 가운데 정렬 폰트/ 폰트는 적용안됌  */
}

header>.wrap .logo{ 	
	/* header 태그 안의 wrap 클래스 안의 logo 클래스에 폰트 스타일 적용 */ 
	font-family: 'Monoton';
	font-weight: 600; /* 두께 */
	color: #004040 !important;
	font-size: 44px; 
}
.flex{display: flex;}
.between{justify-content: space-between;}
.center{justify-content: center;}

signin

@charset "UTF-8";
@import url("../common.css");

header>.wrap{ 
/* 상단로고 구역, Green 위아래 공간 주기 */
	padding: 80px 0 40px;
/* 가로 460 px 이고, 가운데 정렬을 주고 싶을 때  */
	text-align: center;
}
main>.wrap{
	font-size: 14px;
}
/* 아이디는 #으로 묶어야 함  */
#form-login >.wrap .menu-box{
	position: relative;
	top: 4px;
	
}
#form-login>.wrap .menu-box>.menu.view{
	border-bottom: none; /* 로그인 밑 줄을 없애기 */
	background-color: #fff;
}
#form-login >.wrap .menu-box >.menu{
	/* flex: 1; =  1대 1대 1비율 */
	width: 100%;
	text-align: center;
	border: 1px solid #a9a9a9;
	border-radius: 5px 5px 0 0 ;
	padding: 17px 0;
	background-color: #e9e9e9;
}
#form-login >.wrap .content-box{
 	background-color: #fff; /* 	겹처보이는 느낌  */
}
#form-login >.wrap .content-box>.content{display: none;}
#form-login >.wrap .content-box>.content.view{display: block;}

#form-login >.wrap form{ /* 둥근상자테두리 주기  */
	border: 1px solid #a9a9a9;
	border-radius: 5px; 
/* 안쪽 여백 주기  */
	padding: 20px 28px; 
}
#form-login>.wrap form ul>li{ 
/* 아이콘 포지선  */
	position: relative; 
}
#form-login>.wrap form ul>li .icon{
/* 아이콘 포지선  */
	position: absolute; /* 아래 태그 즉 아이디 태그와 중첩되게 끔 해준다 */
	top: calc(50% - 12px);
	left:14px;
	color: #777;
}
#form-login>.wrap form ul li:nth-of-type(2) .icon{ font-size: 23px; }
#form-login>.wrap form ul li input:focus{ 
/* input 요소를 선택했을 때 */
	border: 2px solid #004040;
}
#form-login>.wrap form ul li input:not([type=checkbox]){
/* 	input 요소 중 type가 checkbox는 제외 */
	width: 100%;
	padding: 14px 40px 13px; 
	font-size: 16px;
}
#form-login>.wrap form ul li:first-child input{ /* 아이디 테두리 */
/* 위 좌우만 둥글게, 아래는 둥글게 없음  */
	border-radius: 5px 5px 0 0; 
}
#form-login>.wrap form ul li:nth-of-type(2) input{ /* 아이디 테두리 */
/* 위 좌우만 둥글게, 아래는 둥글게 없음  */
	border-radius: 0px 0px 5px 5px; 
}
#form-login>.wrap form ul li:nth-of-type(3){
	padding: 14px 0 28px;
	color: #666;
} 
#form-login>.wrap form ul li input[type=checkbox]{
/* input 인데 checkbox 인것만 해당한다 */
/* 체크박스와 글자 라인이 맞지않아서 기존 체크박스는 지워준다. */
	display: none;
}
#form-login>.wrap form ul li .keep{
	display: flex;
}
#form-login>.wrap form ul li .keep::before{
/* lable 태그의 @텍스트 전@까지에 keep 에 before&after 요소 추가 한다 */
	content: "";
	width: 18px; 
	height: 18px;
	position: relative;
	top: 1px;
	display: inline-block; /* 이것을 줘야 위의 width와 height 가 먹힌다 */
	background-image: url("/images/icon/circle-check-regular.svg");/*  static 이 기본설정으로 되어있어서 그 뒤로부터 적으면됨 */
	filter: opacity(50%) drop-shadow(0 0 #004040);/* 색상적용 , 깔끔하지 않음 ㅠㅠ */
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 5px;

}
#form-login>.wrap form ul li input#keep:checked + .keep::before{
/* 아이디가 keep인 태그 뒤(+)에 오는 클래스 이름 keep인 태그  */
/* input 이 체크 되었을때 아래를 checked 요소로 변경해준다. */
   background-image: url("/images/icon/circle-check-solid.svg");
	
} 
#form-login>.wrap form ul li .switch{
	background-color: #a9a9a9;
	display: inline-block;
	width: 32px;
	height: 18px;
	border-radius: 9px;
	position: relative;
	margin-left: 5px; 
}
#form-login>.wrap form ul li #switch:checked + .switch{
	background-color: #004040;
}
#form-login>.wrap form ul li #switch:checked + .switch::before {
	left: 16px;
}
#form-login>.wrap form ul li .switch::before{
	/* IP 보안 버튼 */
	content: "";
	width: 14px;
	height: 14px;
	position:absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background-color: white;
	transition: left .2s; /* 버튼 느리게 이동 */
}
/* #form-login>.wrap form ul li input[type=submit]{} 아래와 동일함 */
#form-login>.wrap form ul li:last-child input{
	background-color: #004040;
	color: white;
	font-size: 18px;
	font-weight: 700;
	border-radius: 5px;
	border: none;
}

#member-info>.wrap{
	padding: 20px 0 30px;
}

#member-info >.wrap a{
	color: #777;
}
#member-info > div > ul > li:not(:last-child)> a::after{
	content: "";
	border-left: 1px solid #a9a9a9;
	height: 10px;
	display: inline-block;
	margin: 0 10px;
}
footer>.wrap{
	font-size: 12px;
	color: #777;
}
footer>.wrap a{
	color: #777;
}
footer >.wrap > ul.terms > li:not(:last-child)::after{
	content: "";
	border-left: 1px solid #a9a9a9;
	height: 10px;
	display: inline-block;
	margin: 0 10px;
}
footer >.wrap .copy{
	padding-top: 10px;
}

footer >.wrap .copy .logo{
	font-family: 'Monoton';
	color:  #004040 !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	margin-right: 5px;
	
}

/**
 * 
 */
var menuList;
var contentList;
$(function(){
	/*ol>li가 클릭 이벤트 등록:클릭이 되면 menuClicked 함수 실행*/
	 menuList=$(".menu-box > .menu");
	 contentList=$(".content-box > .content");
	 menuList.click(menuClicked);
});

function menuClicked(){
	/*this : 클릭된 태그*/
	var idx=$(this).index();
	//메뉴변경
	menuList.removeClass("view");
	$(this).addClass("view");
	//내용변경
	contentList.removeClass("view");
	contentList.eq(idx).addClass("view");
	
}

signin.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>로그인페이지</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
		<script src="/js/signin.js"></script>
		<link rel="stylesheet" href="/css/member/signin.css">
	</head>
	<body>
		<header> 
			<h1> 헤더영역 </h1>
			<div class = "wrap view-size-log">
				 <a class = "logo" href="/">
				 	GREEN
				 </a> <!-- 인덱스페이지로 이동, 하나만 있을땐 a태그 --> 	
			</div>
		</header>
		
		<main>
			<h1> 메인영역 </h1>
			<div class = "wrap view-size-log">
				<section id="form-login">
					<h1>로그인폼</h1>
					<div class="wrap"> 
						<ol class= "flex menu-box">
							<li class="menu view">
								<span>ID 로그인</span>
							</li>
							<li class="menu">일회용코드</li>
							<li class="menu">QR코드</li>
						</ol>
						<ol class="content-box">
							<li class="content veiw">
							<!-- 로그인 -->
								<form>
									<ul>
										<li>
											<span class="material-symbols-outlined icon">person</span>
											<input type="text" placeholder="아이디">
				        				</li>
				        				<li>
				        					<span class="material-symbols-outlined icon">lock</span>
				        					<input type="password" placeholder="비밀번호">
				        				</li>
				        				<li class = "flex between">
				        					<div>
				        						<input type="checkbox" id="keep">
				        						<label for="keep" class="keep">로그인 상태 유지</label>
				        					</div>
				        					<div class="flex">
				        						<span>IP보안</span>
				        						<input type="checkbox" id="switch">
				        						<label for="switch" class="switch"></label>
				        					</div>
				        				</li>
				        				<li> 
				        					<input type='submit' value='로그인'>
				        				</li>
									</ul>
								</form>
							</li>
							<li class="content"><!-- 일회용코드 -->
								<form>
									<ul>
										<li>
											<p>네이버앱의 메뉴&gt; 설정.....</p>
				        				</li>
				        				<li>
				        					<input type="text" placeholder="번호를 입력하세요">
				        				</li>
				        				<li> 
				        					<input type='submit' value='로그인'>
				        				</li>
									</ul>
								</form>
							</li>
							<li class="content"> <!-- QR코드 -->
								<form>
									<ul>
										<li>QR을 이용한 로그인</li>
									</ul>
								</form>
							</li>
						</ol>
					</div>
				</section>
				
				
				<section id="member-info">
					<h1>비밀번호/아이디 찾기 및 회원가입</h1>
					<div class="wrap"> 
						<ul class ="flex center"><!-- 비밀번호아이디찾기 -->
							<li><a href="#"> 비밀번호 찾기 </a></li>
							<li><a href="#"> 아이디 찾기 </a></li>
							<li><a href="#"> 회원가입 </a></li>
						</ul>
					</div>
				</section>
				
			</div>
		</main>
		
		<footer>
			<h1> 하단영역 </h1>
			<div class = "wrap view-size-log">
				<ul class ="flex center terms"> <!-- ul =list 태그 / 링크 걸리는 거니까 a태그로 묶음  -->
					<li><a href="#"> 이용약관 </a></li>
					<li><a href="#"> <strong> 개인정보처리방침 </strong> </a></li>
					<li><a href="#"> 책임의 한계와 법적고지 </a></li>
					<li><a href="#"> 회원정보 고객센터 </a></li>				
				</ul>
				<div class="flex center copy"> <!-- 아래 GREEN 과 Copyright 를 좌우로 배치해준다 -->
					<div><a href="#" class= "logo"> GREEN </a></div>
					<p>
						<span> Copyright &copy; </span>
						<b>NAVER Corp.</b> 
						<span> All Rights Reserved. </span>
					</p>
				</div>
			</div>
		</footer>
		
	</body>
</html>

현재글[Spring] Web Page 만들기 (2) 회원가입 페이지

Journey's study

신입 개발자 입니다.

Today :
Yesterday :

Journey's study

[Spring] Web Page 만들기 (2) 회원가입 페이지

'카테고리 없음'의 다른글

티스토리툴바

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31