[Project] 네이버 로그인 페이지 제작하기 <#2 CSS로 디자인 하기>

2021. 4. 11. 01:49

<지난 시간의 결과물>

지난 시간 저는 html로 앞으로 제작할 네이버 로그인 페이지에 대해 뼈대를 세웠으며 어제 생활코딩에서 CSS 강의를 듣고 나서 오늘 CSS 코딩을 시작했습니다.

<현재까지의 결과물>

실제 네이버 로그인 페이지의 check박스의 디자인을 따라 하기 힘들어서 일반 checkbox를 이용하였고 최대한 비슷하게 만들어보려고 Live Server를 띄우면서 수정해나갔습니다.

그리고 네이버 로그인 페이지의 경우 화면의 가로길이가 770px정도를 넘어서면 UI들의 크기가 고정되고 IP 보안 표시, 맨 하단 저작권 표시가 나타나고 언어 선택 박스가 살짝 이동하는 것을 확인하였습니다.

아직 CSS에 익숙하지는 않지만 (if문을 작성하듯이..?) media 쿼리를 사용해서 가로길이가 800px를 넘어서면 UI 크기 고정, IP 보안, 저작권 표시를 할 수 있도록 하였습니다.

만들면서 느낀 점은 CSS는 생각했던 것보다 노가다가 많은 작업인 느낌이었습니다. 그리고 id와 class속성은 언제 써야 할지, div와 span은 또 언제 써야 할지 등등 추가적인 공부가 필요하다고 느꼈고 아직 영역 나누는 것에 미숙해서 더 연습해봐야겠다고 생각했습니다.

다음 시간에는 자바스크립트로 여러 가지 기능(유효성 검사, 로그인 성공&실패, 언어 변경 등등)들을 구현해볼 예정입니다.

<GitHub로 프로젝트 웹서버 호스팅>

k-junyyy.github.io/NAVER-LOGIN-PAGE/naver-login-page/login.html

네이버 로그인

k-junyyy.github.io

<login.html>

<!DOCTYPE html>
<html lnag="ko">

<head>
	<meta charset="UTF-8">
	<title>네이버 로그인</title>
	<link rel="stylesheet" href="style.css">
	<script src="login.js"></script>

</head>

<body>

	<div class="main">

		<!--웹페이지 상단-->
		<header>
			<!--language select-->

			<div class="select-lang">
				<select class="selectbox" name="job">
					<option value="">한국어</option>
					<option value="학생">English</option>
					<option value="회사원">中國語</option>
					<option value="기타">日本</option>
				</select>
			</div>

			<!--NAVER LOGO-->
			<div class="logo">
				<a href="https://www.naver.com/" target="_blank" title="네이버 홈페이지"><img src="image/NAVER_LOGO.png"
						class="image"></a>
			</div>
		</header>

		<!--로그인 부분-->
		<section class="login-wrap">

			<div class="login-id-wrap">
				<input placeholder="아이디" type="text" class="input-id"></input>
			</div>
			<div class="login-pw-wrap">
				<input placeholder="비밀번호" type="password" class="input-pw"></input>
			</div>
			<div class="login-btn-wrap">
				<button class="login-btn">로그인</button>
			</div>
			<div class="under-login">
				<span class="stay-check">
					<input type="checkbox" name="stay-btn" value="stay" class="stay-checkbox">로그인 상태 유지
				</span>
				<span class="ip-check">
					IP 보안 <input type="checkbox" name="stay-btn" value="stay" class="ip-checkbox">
				</span>
			</div>


		</section>

		<!--간편한 로그인 부분-->
		<section class="easy-login-wrap">

			<div class="easy-login">
				<p>더욱 간편한 로그인</p>
			</div>

			<div class="easy-login-box">
				<div class="qr-login">
					<a href="https://nclass.naver.com/nclasslogin.login?mode=qrcode" target="_blank" title="QR코드 로그인">QR
						코드
						로그인</a>
				</div>

				<div class="onetime-login">
					<a href="https://nclass.naver.com/nclasslogin.login?mode=number&url=https%3A%2F%2Fwww.naver.com&locale=ko_KR&svctype=1"
						target="_blank" title="일회용번호 로그인">일회용 번호 로그인</a>
				</div>
			</div>


		</section>

		<!--class,PW 찾기 및 회원가입 부분-->
		<section class="find-signup-wrap">

			<span class="find-id">
				<a href="https://nclass.naver.com/user2/help/classInquiry?lang=ko_KR" target="_blank"
					title="QR코드 로그인">아이디 찾기</a>
			</span>

			<span class="find-pw">
				<a href="https://nclass.naver.com/user2/help/pwInquiry?lang=ko_KR" target="_blank"
					title="일회용번호 로그인">비밀번호 찾기</a>
			</span>

			<span class="sign-up">
				<a href="https://nclass.naver.com/user2/V2Join?m=agree&lang=ko_KR" target="_blank"
					title="일회용번호 로그인">회원가입</a>
			</span>

		</section>

		<!--저작권 정보-->
		<footer>
			<div class="copyright-wrap">
				<span> <img src="image/NAVER_LOGO.png" width=70px> Copyright © NAVER Corp. All Rights Reserved.</span>
			</div>
		</footer>

	</div>

</body>

</html>

<style.css>

body{
    background-color: #f5f6f7;
}

select{
    width:85px;
    height:25px;
    outline: none;
    background: #f5f6f7;
    border: 1px solid #999;
}

a {
    color: black;
    text-decoration: none;
  }

.main{
    text-align: center;
	margin-top: 20px;
}


/*언어설정*/
.select-lang{
    text-align: right;
    padding-right: 10px;
}
/*네이버 로고설정*/
.image{
    height: 32px;
    padding: 20px;
    margin-bottom: 20px;
}
/*input 아이디박스*/
.login-id-wrap{

    margin: 0px 10px 8px 10px;
    padding: 10px;
    border: solid 1px #dadada;
    background: #fff;
}
/*input 아이디 form*/
.input-id{
    border: none;
    outline:none;
    width:100%;
}
/*input 패스워드박스*/
.login-pw-wrap{

    margin: 0px 10px 8px 10px;
    padding: 10px;
    border: solid 1px #dadada;
    background: #fff;
}
/*input 패스워드 form*/
.input-pw{
    border: none;
    outline:none;
    width:100%;
}
/*로그인버튼박스*/
.login-btn-wrap{
    height: 52px;
    line-height: 55px;
    margin: 0px 10px 8px 10px;
    border: solid 1px rgba(0,0,0,.1);
    background-color: #03c75a;
    color: #fff;
    cursor: pointer;
}
/*로그인버튼*/
.login-btn{
    width:100px;
    background-color: #03c75a;
    border: none;
    color:#fff;
    font-size: 18px;
    outline:none;
    cursor: pointer;
}
/*로그인 아래 박스*/
.under-login{
    height: 50px;
    border-bottom: 1px solid gainsboro;
    margin: 0px 10px 35px 10px;
}
/*로그인상태유지*/
.stay-check{
    margin-left: 7px;
    float: left;
}
/*IP보안 표시X*/
.ip-check{
    display: none;
}
/*간편한 로그인 구역*/
.easy-login-wrap{
    height: 90px;
    margin: 0px 10px 35px 10px;
}
/*간편한 로그인 텍스트*/
.easy-login{
    font-size: 20px;
}
/*QR & 일회용 로그인 박스 구역*/
.easy-login-box{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
/*QR코드 로그인*/
.qr-login{
    float: left;
    border: 1px solid #03c75a;
    background-color: #fff;
    margin: 0px 4px 0px 0px;
    line-height: 55px;
}
/*일회용 번호 로그인*/
.onetime-login{
    float: right;
    border: 1px solid #03c75a;
    background-color: #fff;
    margin: 0px 0px 0px 4px;
    line-height: 55px;
}
/*찾기 및 회원가입*/
.find-signup-wrap{
    height: 100px;
    grid-template-columns: 1fr 1fr 1fr;
}
/*찾기 및 회원가입 글자 희미하게 바꾸기*/
.find-signup-wrap a{
    color: rgb(150, 150, 150);
}
/*아이디 찾기*/
.find-id{
    margin: 3px;
    font-size: 14px;
    border-right: 1px solid gainsboro;
}
/*비밀번호 찾기*/
.find-pw{
    margin: 3px;
    font-size: 14px;
    border-right: 1px solid gainsboro;
}
/*회원가입*/
.sign-up{
    margin: 3px;
    font-size: 14px;
}
/*저작권 표시X*/
footer{
    display: none;
}


/*가로 800px 이상일때*/
@media(min-width : 800px)
{
    .main{
        width: 460px;
        margin: auto;
    }

/*언어설정*/
.select-lang{
    margin-top: 20px;
    width: 550px;
    padding-right: 10px;
}
/*네이버 로고설정*/
.image{
    margin-top: 40px;
    height: 44px;
    padding: 20px;
    margin-bottom: 40px;
}

/*IP보안 표시*/
.ip-check{
    margin-right: 7px;
    float: right;
    display:block;
}

/*저작권 표시*/
footer{
    display:block;
}

}

<GitHub Link>

github.com/K-Junyyy/NAVER-LOGIN-PAGE

GitHub - K-Junyyy/NAVER-LOGIN-PAGE: 네이버 로그인 페이지 제작하기

네이버 로그인 페이지 제작하기. Contribute to K-Junyyy/NAVER-LOGIN-PAGE development by creating an account on GitHub.

github.com

저작자표시 비영리

'👨🏻‍💻Project' 카테고리의 다른 글

[Project] Vue.js 로 ToDo App 만들기 <#2 완성> (0)	2021.04.22
[Project] Vue.js 로 ToDo App 만들기 <#1 add, delete 기능 구현 및 GitHub 호스팅하기> (0)	2021.04.21
[Project] 네이버 로그인 페이지 제작하기 <#1 HTML로 뼈대 세우기> (0)	2021.04.01
[HTML] 간단한 회원가입 form 만들기 (0)	2020.12.15
[모두의 버스 : UNIBUS 프로젝트] Python으로 공공데이터 포털 오픈API 정보 조회하기 (0)	2020.11.21

코딩 공부 일지