<body>
<main>
<img
class="logo"
src="./images/codestates-logo1.png"
alt="CODE_STATES_LOGO"
/>
<fieldset>
<input type="text" id="username" placeholder="아이디" />
</fieldset>
<div class="success-message hide">사용할 수 있는 아이디입니다</div>
<div class="failure-message hide">아이디는 4~12글자이어야 합니다</div>
<div class="failure-message2 hide">영어 또는 숫자만 가능합니다</div>
<fieldset>
<input type="password" id="password" placeholder="비밀번호" />
</fieldset>
<div class="strongPassword-message hide">8글자 이상, 영문, 숫자, 특수문자(@$!%*#?&)를 사용하세요</div>
<fieldset>
<input
type="password"
id="password-retype"
placeholder="비밀번호 확인"
/>
</fieldset>
<div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>
<fieldset class="signup">
<button>회원가입</button>
</fieldset>
<script src="script2.js"></script>
</main>
</body>
<fieldset>
요소는 웹 양식의 여러 컨트롤과 레이블(<label>
)을 묶을 때 사용한다.
document.querySelector
를 이용해 엘리먼트 정보를 가져온다.// 1. 아이디 입력창 정보 가져오기
let elInputUsername = document.querySelector('#username'); // input#username
// 2. 성공 메시지 정보 가져오기
let elSuccessMessage = document.querySelector('.success-message'); // div.success-message.hide
// 3. 실패 메시지 정보 가져오기 (글자수 제한 4~12글자)
let elFailureMessage = document.querySelector('.failure-message'); // div.failure-message.hide
// 4. 실패 메시지2 정보 가져오기 (영어 또는 숫자)
let elFailureMessageTwo = document.querySelector('.failure-message2'); // div.failure-message2.hide
// 1. 비밀번호 입력창 정보 가져오기
let elInputPassword = document.querySelector('#password'); // input#password
// 2. 비밀번호 확인 입력창 정보 가져오기
let elInputPasswordRetype = document.querySelector('#password-retype'); // input#password-retype
// 3. 실패 메시지 정보 가져오기 (비밀번호 불일치)
let elMismatchMessage = document.querySelector('.mismatch-message'); // div.mismatch-message.hide
// 4. 실패 메시지 정보 가져오기 (8글자 이상, 영문, 숫자, 특수문자 미사용)
let elStrongPasswordMessage = document.querySelector('.strongPassword-message'); // div.strongPassword-message.hide
function idLength(value) {
return value.length >= 4 && value.length <= 12
}
true
, 아니면 false
를 리턴한다.
function onlyNumberAndEnglish(str) {
return /^[A-Za-z0-9][A-Za-z0-9]*$/.test(str);
}
true
, 아니면 false
를 리턴한다.test()
: 문자열에 일치하는 부분이 있는지 확인한다. true
또는 false
를 반환function strongPassword (str) {
return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}
true
, 아니면 false
를 리턴한다.function isMatch (password1, password2) {
return password1 === password2;
}
true
, 아니면 false
를 리턴한다.hide
라는 클래스를 추가하여 CSS 속성으로 display: none
을 추가한다.hide
클래스가 존재하는 경우 화면에 엘리먼트가 표시되지 않는다..hide {
display: none;
}
onkeyup
: 키보드가 눌렸다 떼어졌을 때를 의미
elInputUsername
이 키보드로 입력이 됐을 때 이벤트 핸들러 안에 있는 내용이 실행된다.
elInputUsername.onkeyup = function () {
// 값을 입력한 경우
if (elInputUsername.value.length !== 0) {
// 영어 또는 숫자 외의 값을 입력했을 경우
if(onlyNumberAndEnglish(elInputUsername.value) === false) {
elSuccessMessage.classList.add('hide');
elFailureMessage.classList.add('hide');
elFailureMessageTwo.classList.remove('hide'); // 영어 또는 숫자만 가능합니다
}
// 글자 수가 4~12글자가 아닐 경우
else if(idLength(elInputUsername.value) === false) {
elSuccessMessage.classList.add('hide'); // 성공 메시지가 가려져야 함
elFailureMessage.classList.remove('hide'); // 아이디는 4~12글자이어야 합니다
elFailureMessageTwo.classList.add('hide'); // 실패 메시지2가 가려져야 함
}
// 조건을 모두 만족할 경우
else if(idLength(elInputUsername.value) || onlyNumberAndEnglish(elInputUsername.value)) {
elSuccessMessage.classList.remove('hide'); // 사용할 수 있는 아이디입니다
elFailureMessage.classList.add('hide'); // 실패 메시지가 가려져야 함
elFailureMessageTwo.classList.add('hide'); // 실패 메시지2가 가려져야 함
}
}
// 값을 입력하지 않은 경우 (지웠을 때)
// 모든 메시지를 가린다.
else {
elSuccessMessage.classList.add('hide');
elFailureMessage.classList.add('hide');
elFailureMessageTwo.classList.add('hide');
}
}
.classList.remove('hide')
로 hide
클래스를 삭제하여 화면에 표시한다..classList.add('hide')
로 hide
클래스를 추가하여 화면에서 가린다.onkeyup
: 키보드가 눌렸다 떼어졌을 때를 의미
elInputPassword
이 키보드로 입력이 됐을 때 이벤트 핸들러 안에 있는 내용이 실행된다.
elInputPassword.onkeyup = function () {
// console.log(elInputPassword.value);
// 값을 입력한 경우
if (elInputPassword.value.length !== 0) {
if(strongPassword(elInputPassword.value)) {
elStrongPasswordMessage.classList.add('hide'); // 실패 메시지가 가려져야 함
}
else {
elStrongPasswordMessage.classList.remove('hide'); // 실패 메시지가 보여야 함
}
}
// 값을 입력하지 않은 경우 (지웠을 때)
// 모든 메시지를 가린다.
else {
elStrongPasswordMessage.classList.add('hide');
}
};
.classList.remove('hide')
로 hide
클래스를 삭제하여 화면에 표시한다..classList.add('hide')
로 hide
클래스를 추가하여 화면에서 가린다.onkeyup
: 키보드가 눌렸다 떼어졌을 때를 의미
elInputPasswordRetype
이 키보드로 입력이 됐을 때 이벤트 핸들러 안에 있는 내용이 실행된다.
elInputPasswordRetype.onkeyup = function () {
// console.log(elInputPasswordRetype.value);
if (elInputPasswordRetype.value.length !== 0) {
if(isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
elMismatchMessage.classList.add('hide'); // 실패 메시지가 가려져야 함
}
else {
elMismatchMessage.classList.remove('hide'); // 실패 메시지가 보여야 함
}
}
else {
elMismatchMessage.classList.add('hide'); // 실패 메시지가 가려져야 함
}
};
.classList.remove('hide')
로 hide
클래스를 삭제하여 화면에 표시한다..classList.add('hide')
로 hide
클래스를 추가하여 화면에서 가린다.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Spoqa Han Sans Neo', 'sans-serif';
/* font-size: 16px; */
}
body {
border: 1px solid red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
main {
border: 1px solid red;
display: flex;
flex-direction: column;
align-items: center;
width: 23rem;
height: auto;
padding: 30px;
}
.logo {
border: 1px solid blue;
width: 170px;
margin: 12px auto 30px;
}
fieldset {
border: 1px solid green;
display: flex;
flex-direction: column;
justify-content: center;
margin: 10px;
padding: 10px 12px;
}
input {
border: 1px solid purple;
width: 15rem;
}
button {
border: 1px solid purple;
cursor: pointer;
width: 16.3rem;
height: 3rem;
}
body {
background-image: url('./images/beach.jpg');
background-size: cover;
background-repeat: no-repeat;
}
hover
했을 때만 글래스 효과가 나타나게 하고 싶었다.hover
전에는 투명하게 연출하여 배경에 좀 더 시선이 머물도록 하였다. hover
하기 전main {
background: linear-gradient(124.47deg,
rgba(255, 255, 255, 0.0),
rgba(255, 255, 255, 0.0),
rgba(255, 255, 255, 0.0)); /* 배경색이 투명하게 보이게 한다 */
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(0px);
}
hover
했을 때 (커서(마우스 포인터)가 요소 위에 올라가 있을 때)main:hover {
background: linear-gradient(124.47deg,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.0),
rgba(255, 255, 255, 0.2));
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
}
hover
상태에 캡쳐)fieldset {
border-radius: 50px;
:not()
선택자 :last-of-type
가상선택자를 사용한다.:not()
은 인수로 표시되지 않은 요소와 일치한다.:last-of-type
: 요소 그룹 중에서 해당 유형의 마지막 요소를 나타낸다.hover
하기 전fieldset:not(:last-of-type){
background: linear-gradient(124.47deg,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.0),
rgba(255, 255, 255, 0.2));
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
hover
했을 때 (아이디 영역에 커서를 올림)fieldset:not(:last-of-type):hover{
background: linear-gradient(124.47deg,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.5));
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
<input>
태그에는 외곽선을 따로 설정하지 않아도 기본으로 나타나기 때문에 border: none
로 안보이게 설정했다.background-color:transparent
로 입력칸 배경을 투명하게 만들어준다.input {
border: none;
background-color:transparent;
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
}
color: rgba(255, 255, 255, 0.9)
글자색을 적용했음에도 왜 그대로일까?::placeholder
를 활용한다.input::placeholder {
color: rgb(255, 255, 255, 0.5);
}
input
박스를 클릭했을 때 보이는 외곽선을 지우기 위해 ::focus
를 활용해 outline
을 none
으로 설정한다.input:focus {
outline: none;
}
border: none;
로 .signup
영역의 외곽선을 안보이게 설정하였다..signup {
border: none;
}
hover
전button {
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
background: linear-gradient(124.47deg,
rgba(61, 151, 215, 0.2),
rgba(61, 151, 215, 0.0),
rgba(61, 151, 215, 0.2));
backdrop-filter: blur(5px);
}
hover
했을 때button:hover {
background: linear-gradient(124.47deg,
rgba(61, 151, 215, 0.8),
rgba(61, 151, 215, 0.6),
rgba(61, 151, 215, 0.8));
top: 1px;
margin-top: 1px;
}
active
상태일 때 (버튼을 눌렀을 때)button:active {
position: relative;
top: 5px;
margin-top: 5px;
}
main > div {
color: #ffffff;
font-size: 14px;
padding: 0px 30px 0px 30px;
}
글쓰는 방법부터 내용까지 잘 읽었습니다 :)