Sign Up / In
Last updated
Last updated
์ธํํ๋ ๋ด์ ์๋ด ๋ฌธ๊ตฌ, ์๋ฌ ๋ฌธ๊ตฌ ๋ฑ์ ์ํฉ์ ๋ง๊ณ ๋ช ํํ๊ฒ ์ ๋ฌ ๋์ด์ผ ํฉ๋๋ค. placeholder ๊ฐ์ ๊ฒฝ์ฐ ์ ์ฒด ์๋น์ค์ ๋ณด์ด์ค ํค๊ณผ ๋ง์ถ์ด ์ฌ์ฉ์๊ฐ ์ด๋ค ์ ๋ณด๋ฅผ ์ ๋ ฅํด์ผ ํ ์ง ๋ช ํํ๊ฒ ํํ๋์ด์ ธ์ผ ํฉ๋๋ค.
๋ผ๋ฒจ ํ
์คํธ๋ ๋ถ๋ช
ํ๊ณ ๋ช
ํํ๊ฒ ํํ๋์ด์ผ ํฉ๋๋ค.
์ฌ์ฉ์๊ฐ ์ธํ ํ๋์ ์ ๋ ฅํ๊ธฐ ์ ์๋ ๋ฒํผ์ ๋นํ์ฑํ ์์ผ๋ก๋๋ค. ์ฌ์ฉ์์ ์ก์ ์ด ์ถ๊ฐ ๋ ์ดํ ๋ฒํผ์ ํ์ฑํ์์ผ ๋ค์ ๋จ๊ณ๋ก์ ์ก์ ์ ์๋ ค์ฃผ๋๋ก ํฉ๋๋ค.
<div class="flx-container v-center" id="container">
<section class="frm-sect">
<div class="login-box">
<form action="" method="post">
<fieldset>
<legend>๋ก๊ทธ์ธ ์์ญ</legend>
<div class="row"><!-- ์๋ฌ ๋ฉ์์ง ํ์ฑํ ์ err ํด๋์ค, ์ฑ๊ณต ๋ฉ์์ง ํ์ฑํ ์ ok ํด๋์ค ์ถ๊ฐ -->
<label for="user-id" class="hide">์ฌ์ฉ์ ์์ด๋</label>
<input type="email" id="user-id" class="inp-st" placeholder="์ด๋ฉ์ผ ์ฃผ์๋ฅผ ์
๋ ฅํด์ฃผ์ธ์.">
</div>
<div class="row"><!-- ์๋ฌ ๋ฉ์์ง ํ์ฑํ ์ err ํด๋์ค, ์ฑ๊ณต ๋ฉ์์ง ํ์ฑํ ์ ok ํด๋์ค ์ถ๊ฐ -->
<label for="user-pw" class="hide">๋น๋ฐ๋ฒํธ</label>
<input type="password" id="user-pw" class="inp-st" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํด์ฃผ์ธ์.">
</div>
</fieldset>
<article class="status-msg-box"></article>
<div class="frm-btn-module">
<button type="submit">๋ก๊ทธ์ธ</button>
</div>
<div class="frm-util-module">
<div class="c-side">
<button type="button" class="sim-txt-btn">+ ๊ณ์ ์์ฑ</button>
</div>
</div>
</form>
</div>
</section>
</div>
/* login box */
.frm-sect .point {display:inline-block;overflow:hidden;width:0.6rem;height:0.6rem;border-radius:0.6rem;text-indent:-999.9rem;vertical-align:top;background-color:#ff4b4b;}
.login-box {width:40rem;}
.login-box h1 {overflow:hidden;width:32.1rem;height:5.6rem;margin:0 auto 6rem auto;text-indent:-999.9rem;background:url('../images/bi_rb_admin.png') no-repeat;background-size:32.1rem 5.6rem;}
.login-box .row {position:relative;margin-top:2rem;}
.login-box .row .txt-del {position:absolute;right:1.1rem;top:50%;overflow:hidden;width:2.4rem;height:2.4rem;margin-top:-1.2rem;border-radius:2.4rem;text-indent:-999.9rem;background:url('../images/ico_txt_del.png') no-repeat;background-size:2.4rem;}
.login-box .row:first-of-type {margin-top:0;}
.login-box .row.err .inp-st {border-color:#ff4b4b !important;}
.login-box .row.ok .inp-st {border-color:#511ef4;}
.login-box .frm-btn-module {}
.login-box .frm-btn-module button {display:block;width:100%;height:5rem;border-radius:0.2rem;font-size:1.4rem;line-height:5rem;color:#fff;background-color:#1769ff;}
.login-box .frm-btn-module button:hover {color:rgba(255,255,255,0.5);background-color:#0b347f;}
.login-box .frm-btn-module button:disabled, .login-box .frm-btn-module button:hover:disabled {cursor:default;opacity:0.5;border-color:#1769ff;color:#fff;background-color:#1769ff;}
.login-box .total-msg {display:none;position:relative;margin-top:1rem;padding-left:0.8rem;font-size:1.2rem;line-height:1.8rem;color:#ff4b4b;}
.login-box .total-msg:before {content:'*';position:absolute;left:0;top:0;}
.login-box .total-msg.active {display:block;}
.frm-util-module {position:relative;margin-top:3rem;}
.frm-util-module .c-side {text-align:center;}
.frm-util-module .l-side {padding-left:0.2rem;}
.frm-util-module .r-side {position:absolute;right:0;top:-0.1rem;}
<div class="flx-container v-center" id="container">
<section class="frm-sect">
<div class="login-box">
<h1>RB Insight Admin</h1>
<form action="" method="post">
<fieldset>
<legend>๋ก๊ทธ์ธ ์์ญ</legend>
<div class="row err"><!-- ์๋ฌ ๋ฉ์์ง ํ์ฑํ ์ err ํด๋์ค, ์ฑ๊ณต ๋ฉ์์ง ํ์ฑํ ์ ok ํด๋์ค ์ถ๊ฐ -->
<label for="user-id" class="hide">์ฌ์ฉ์ ์์ด๋</label>
<input type="email" id="user-id" class="inp-st" placeholder="์ด๋ฉ์ผ ์ฃผ์๋ฅผ ์
๋ ฅํด์ฃผ์ธ์.">
<button type="button" class="txt-del">์
๋ ฅ๋ ํ
์คํธ ํ๋ฒ์ ์ญ์ </button>
</div>
<div class="row"><!-- ์๋ฌ ๋ฉ์์ง ํ์ฑํ ์ err ํด๋์ค, ์ฑ๊ณต ๋ฉ์์ง ํ์ฑํ ์ ok ํด๋์ค ์ถ๊ฐ -->
<label for="user-pw" class="hide">๋น๋ฐ๋ฒํธ</label>
<input type="password" id="user-pw" class="inp-st" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํด์ฃผ์ธ์.">
</div>
</fieldset>
<article class="status-msg-box"></article>
<div class="frm-btn-module">
<button type="submit">๋ก๊ทธ์ธ</button>
</div>
<p class="total-msg active"><!-- ์๋ฌ ๋ฉ์์ง ํ์ฑํ ์ active ํด๋์ค ์ถ๊ฐ -->
์์ด๋ ๋๋ ๋น๋ฐ๋ฒํธ๋ฅผ ํ์ธํด์ฃผ์ธ์.<br>๋ก๊ทธ์ธ 1ํ ์คํจ์ ๋น๋ฐ๋ฒํธ ์ด๊ธฐํ ์ค์ ์ด ํ์ํฉ๋๋ค. (1/10)
</p>
<div class="frm-util-module">
<div class="c-side">
<button type="button" class="sim-txt-btn">+ ๊ณ์ ์์ฑ</button>
</div>
</div>
</form>
</div>
</section>
</div>
/* login box */
.frm-sect .point {display:inline-block;overflow:hidden;width:0.6rem;height:0.6rem;border-radius:0.6rem;text-indent:-999.9rem;vertical-align:top;background-color:#ff4b4b;}
.login-box {width:40rem;}
.login-box h1 {overflow:hidden;width:32.1rem;height:5.6rem;margin:0 auto 6rem auto;text-indent:-999.9rem;background:url('../images/bi_rb_admin.png') no-repeat;background-size:32.1rem 5.6rem;}
.login-box .row {position:relative;margin-top:2rem;}
.login-box .row .txt-del {position:absolute;right:1.1rem;top:50%;overflow:hidden;width:2.4rem;height:2.4rem;margin-top:-1.2rem;border-radius:2.4rem;text-indent:-999.9rem;background:url('../images/ico_txt_del.png') no-repeat;background-size:2.4rem;}
.login-box .row:first-of-type {margin-top:0;}
.login-box .row.err .inp-st {border-color:#ff4b4b !important;}
.login-box .row.ok .inp-st {border-color:#511ef4;}
.login-box .frm-btn-module {}
.login-box .frm-btn-module button {display:block;width:100%;height:5rem;border-radius:0.2rem;font-size:1.4rem;line-height:5rem;color:#fff;background-color:#1769ff;}
.login-box .frm-btn-module button:hover {color:rgba(255,255,255,0.5);background-color:#0b347f;}
.login-box .frm-btn-module button:disabled, .login-box .frm-btn-module button:hover:disabled {cursor:default;opacity:0.5;border-color:#1769ff;color:#fff;background-color:#1769ff;}
.login-box .total-msg {display:none;position:relative;margin-top:1rem;padding-left:0.8rem;font-size:1.2rem;line-height:1.8rem;color:#ff4b4b;}
.login-box .total-msg:before {content:'*';position:absolute;left:0;top:0;}
.login-box .total-msg.active {display:block;}
.frm-util-module {position:relative;margin-top:3rem;}
.frm-util-module .c-side {text-align:center;}
.frm-util-module .l-side {padding-left:0.2rem;}
.frm-util-module .r-side {position:absolute;right:0;top:-0.1rem;}
์ธ์ฆ๋ฒํธ๊ฐ ๋ฐ์ก๋ ํ์ ์นด์ดํธ๊ฐ ๋๋ฉฐ ์๋ฌ๋ ์๊ฐ ์ด๊ณผ๊ฐ ๋์์๋ ์ฌ๋ฐ์ก ๋ฒํผ์ด ํ์ฑํ๋ฉ๋๋ค.
<div class="flx-container v-center" id="container">
<section class="frm-sect">
<div class="login-box">
<div class="h-txt-box">
<div class="sol-txt">
<p>
๋ณด์์ ์ํด 2๋จ๊ณ ์ธ์ฆ์ ์งํํ์
์ผ ๋ก๊ทธ์ธ์ด ๊ฐ๋ฅํฉ๋๋ค.<br>
SMS์ผ๋ก ์ ์ก๋ ์ฝ๋๋ฅผ ์
๋ ฅํด์ฃผ์ธ์.
</p>
</div>
</div>
<form action="" method="post">
<fieldset>
<legend>2๋จ๊ณ ์ธ์ฆ ์์ญ</legend>
<div class="row col-row ok"><!-- ์
๋ ฅ ์ค๋ฅ ์ err ํด๋์ค ์ ์ฉ, ์
๋ ฅ ์๋ฃ ์ ok ํด๋์ค ์ ์ฉ -->
<span class="col-item">
<label for="user-pw" class="hide">์ธ์ฆ๋ฒํธ 4์๋ฆฌ ์
๋ ฅ</label>
<input type="tel" id="user-pw" class="inp-st" maxlength="4" placeholder="์ธ์ฆ๋ฒํธ 4์๋ฆฌ">
<span class="timer">0:00</span>
</span>
<span class="col-item">
<button type="button" disabled="disabled" class="m-btn-type key-color">์ฌ๋ฐ์ก</button>
</span>
</div>
</fieldset>
<article class="status-msg-box">
<p class="ok"><!-- ์
๋ ฅ ์ค๋ฅ ์ err ํด๋์ค ์ ์ฉ, ์
๋ ฅ ์๋ฃ ์ ok ํด๋์ค ์ ์ฉ -->
* ๋ฑ๋ก๋ ํด๋์ ํ๋ก ์ธ์ฆ๋ฒํธ๊ฐ ๋ฐ์ก๋์์ต๋๋ค.
</p>
</article>
<div class="frm-btn-module">
<button type="submit">ํด๋ํฐ ์ธ์ฆ</button>
</div>
</form>
</div>
</section>
</div>
/* layout */
.flx-container {-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;}
/* login box */
.frm-sect .point {display:inline-block;overflow:hidden;width:0.6rem;height:0.6rem;border-radius:0.6rem;text-indent:-999.9rem;vertical-align:top;background-color:#ff4b4b;}
.login-box {width:40rem;}
.login-box h1 {overflow:hidden;width:32.1rem;height:5.6rem;margin:0 auto 6rem auto;text-indent:-999.9rem;background:url('../images/bi_rb_admin.png') no-repeat;background-size:32.1rem 5.6rem;}
.login-box .row {position:relative;margin-top:2rem;}
.login-box .row .txt-del {position:absolute;right:1.1rem;top:50%;overflow:hidden;width:2.4rem;height:2.4rem;margin-top:-1.2rem;border-radius:2.4rem;text-indent:-999.9rem;background:url('../images/ico_txt_del.png') no-repeat;background-size:2.4rem;}
.login-box .row:first-of-type {margin-top:0;}
.login-box .row.err .inp-st {border-color:#ff4b4b !important;}
.login-box .row.ok .inp-st {border-color:#511ef4;}
.login-box .frm-btn-module {}
.login-box .frm-btn-module button {display:block;width:100%;height:5rem;border-radius:0.2rem;font-size:1.4rem;line-height:5rem;color:#fff;background-color:#1769ff;}
.login-box .frm-btn-module button:hover {color:rgba(255,255,255,0.5);background-color:#0b347f;}
.login-box .frm-btn-module button:disabled, .login-box .frm-btn-module button:hover:disabled {cursor:default;opacity:0.5;border-color:#1769ff;color:#fff;background-color:#1769ff;}
.login-box .total-msg {display:none;position:relative;margin-top:1rem;padding-left:0.8rem;font-size:1.2rem;line-height:1.8rem;color:#ff4b4b;}
.login-box .total-msg:before {content:'*';position:absolute;left:0;top:0;}
.login-box .total-msg.active {display:block;}
.frm-util-module {position:relative;margin-top:3rem;}
.frm-util-module .c-side {text-align:center;}
.frm-util-module .l-side {padding-left:0.2rem;}
.frm-util-module .r-side {position:absolute;right:0;top:-0.1rem;}
.pw-validation {display:none;position:absolute;right:2rem;top:50%;width:8rem;height:1rem;border-radius:1rem;margin-top:-0.5rem;background-color:#ddd;}
.pw-validation.active {display:block;}
.pw-validation .inner-field {display:block;overflow:hidden;width:0;height:1rem;border-radius:1rem;text-indent:-999.9rem;-webkit-transition:width 300ms;transition:width 300ms;}
.pw-validation .inner-field.step01 {width:25%;background-color:#ff4b4b;}
.pw-validation .inner-field.step02 {width:50%;background-color:#f6b30b;}
.pw-validation .inner-field.step03 {width:75%;background-color:#54c827;}
.pw-validation .inner-field.step04 {width:100%;background-color:#0fade9;}
.cf-validation {display:none;position:absolute;right:2rem;top:50%;overflow:hidden;width:2.4rem;height:2.4rem;border-radius:2.4rem;margin-top:-1.2rem;text-indent:-999.9rem;background:url('../images/set_ico_validate.png') no-repeat;background-size:auto 2.4rem;}
.cf-validation.active {display:block;}
.cf-validation.ok {background-position:-3.4rem 0;}
/* column row */
.col-row, .col-box {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.col-row .col-item, .col-box .col-item {position:relative;}
.col-row .col-item:first-of-type, .col-box .col-item:first-of-type {-webkit-box-flex:1;-ms-flex:1;flex:1;}
.col-row .m-btn-type {display:block;height:5rem;line-height:4.8rem;margin-left:1.8rem;}
.col-box .m-btn-type {display:block;width:12rem;height:5rem;margin-left:1rem;padding:0;line-height:4.8rem;}
.col-box .m-btn-type.narrow {width:8rem;}
.col-row .col-item .timer, .col-box .col-item .timer {position:absolute;right:2.1rem;top:50%;font-size:1.4rem;line-height:2rem;margin-top:-1rem;color:#1769ff;}
.col-box .col-item .inp-st:disabled + .timer {color:#999;}
.col-box.equal .col-item {-webkit-box-flex:1;-ms-flex:1;flex:1;width:50%;margin-left:2rem;}
.col-box.equal .col-item:first-of-type {margin-left:0;}
/* help text box */
.login-box .h-txt-box {margin-bottom:4rem;border-radius:0.2rem;text-align:center;background-color:#f5f5f5;}
.login-box .h-txt-box h2 {margin-bottom:0.9rem;font-size:1.8rem;line-height:2.7rem;color:#1769ff;}
.login-box .h-txt-box p {font-size:1.4rem;line-height:2rem;}
.h-txt-box .sol-txt {padding:2.4rem 0 2.6rem 0;}
.h-txt-box .mul-txt {padding:2rem 0;}
<div class="flx-container v-center" id="container">
<section class="frm-sect">
<div class="login-box">
<div class="h-txt-box">
<div class="sol-txt">
<article class="status-msg-box">
<p class="err"><!-- ์
๋ ฅ ์ค๋ฅ ์ err ํด๋์ค ์ ์ฉ, ์
๋ ฅ ์๋ฃ ์ ok ํด๋์ค ์ ์ฉ -->
์
๋ ฅ์๊ฐ์ด ์ด๊ณผ๋์์ต๋๋ค.
</p>
</article>
</div>
</div>
<form action="" method="post">
<fieldset>
<legend>2๋จ๊ณ ์ธ์ฆ ์์ญ</legend>
<div class="row col-row err"><!-- ์
๋ ฅ ์ค๋ฅ ์ err ํด๋์ค ์ ์ฉ, ์
๋ ฅ ์๋ฃ ์ ok ํด๋์ค ์ ์ฉ -->
<span class="col-item">
<label for="user-pw" class="hide">์ธ์ฆ๋ฒํธ 4์๋ฆฌ ์
๋ ฅ</label>
<input type="tel" id="user-pw" class="inp-st" maxlength="4" placeholder="์ธ์ฆ๋ฒํธ 4์๋ฆฌ">
<span class="timer">0:00</span>
</span>
<span class="col-item">
<button type="button" class="m-btn-type key-color">์ฌ๋ฐ์ก</button>
</span>
</div>
</fieldset>
<article class="status-msg-box">
<p class="err"><!-- ์
๋ ฅ ์ค๋ฅ ์ err ํด๋์ค ์ ์ฉ, ์
๋ ฅ ์๋ฃ ์ ok ํด๋์ค ์ ์ฉ -->
* ์ธ์ฆ๋ฒํธ๋ฅผ ์ ํํ ์
๋ ฅํด์ฃผ์ธ์. (3ํ ์คํจ ์ ์ธ์ฆ๋ฒํธ ์ฌ๋ฐ์ก)
</p>
</article>
<div class="frm-btn-module">
<button type="submit" disabled="disabled">ํด๋ํฐ ์ธ์ฆ</button>
</div>
</form>
</div>
</section>
</div>
<div class="flx-container v-center" id="container">
<section class="frm-sect">
<div class="login-box">
<div class="h-txt-box">
<div class="mul-txt">
<h2>๋น๋ฐ๋ฒํธ๋ฅผ ๋ณ๊ฒฝํด ์ฃผ์ธ์.</h2>
<p>6๊ฐ์๋ง๋ค ๋น๋ฐ๋ฒํธ ๊ต์ฒด๋ ํ์์ฌํญ์
๋๋ค.</p>
</div>
</div>
<form action="" method="post">
<fieldset>
<legend>๋น๋ฐ๋ฒํธ ๋ณ๊ฒฝ ์์ญ</legend>
<div class="row err"><!-- ์๋ฌ ๋ฉ์์ง ํ์ฑํ ์ err ํด๋์ค, ์ฑ๊ณต ๋ฉ์์ง ํ์ฑํ ์ ok ํด๋์ค ์ถ๊ฐ -->
<label for="crr-pw" class="hide">ํ์ฌ ๋น๋ฐ๋ฒํธ ์
๋ ฅ</label>
<input type="password" id="crr-pw" class="inp-st" maxlength="16" placeholder="ํ์ฌ ๋น๋ฐ๋ฒํธ ์
๋ ฅ">
</div>
<article class="part-sect active"><!-- ํ์ฑํ ์ active ํด๋์ค ์ ์ฉ -->
<p class="err">* ๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.</p><!-- ์
๋ ฅ ์ค๋ฅ ์ err ํด๋์ค ์ ์ฉ, ์
๋ ฅ ์๋ฃ ์ ok ํด๋์ค ์ ์ฉ -->
</article>
<div class="row"><!-- ์๋ฌ ๋ฉ์์ง ํ์ฑํ ์ err ํด๋์ค, ์ฑ๊ณต ๋ฉ์์ง ํ์ฑํ ์ ok ํด๋์ค ์ถ๊ฐ -->
<label for="chg-pw" class="hide">๋ณ๊ฒฝํ ๋น๋ฐ๋ฒํธ ์
๋ ฅ</label>
<input type="password" id="chg-pw" class="inp-st" maxlength="16" placeholder="๋ณ๊ฒฝํ ๋น๋ฐ๋ฒํธ ์
๋ ฅ">
<!-- <div class="pw-validation active">
<span class="inner-field step01">๋น๋ฐ๋ฒํธ ์์ ์ ํจ์ฑ ์ฒดํฌ</span> step01, step02, step03, step04 ๋จ๊ณ๋ณ๋ก ํด๋์ค ๋ถ๊ธฐ
</div> -->
</div>
<article class="msg-sect active"><!-- ํ์ฑํ ์ active ํด๋์ค ์ ์ฉ -->
<p>* ์๋ฌธ, <em>์ซ์</em>, ํน์๋ฌธ์ ํฌํจ 8~16์๋ก ์
๋ ฅํด์ฃผ์ธ์.</p><!-- ์๋ฌธ, ์ซ์, ํน์๋ฌธ์ ์ค ๋ฏธ์
๋ ฅ ์ค๋ฅ ์์ ๊ฐ์กฐ ํํ์ em ํ๊ทธ ์ถ๊ฐ -->
</article>
<div class="row ok"><!-- ์๋ฌ ๋ฉ์์ง ํ์ฑํ ์ err ํด๋์ค, ์ฑ๊ณต ๋ฉ์์ง ํ์ฑํ ์ ok ํด๋์ค ์ถ๊ฐ -->
<label for="cf-pw" class="hide">๋ณ๊ฒฝํ ๋น๋ฐ๋ฒํธ ํ์ธ</label>
<input type="password" id="cf-pw" class="inp-st" maxlength="16" placeholder="๋ณ๊ฒฝํ ๋น๋ฐ๋ฒํธ ํ์ธ">
<!-- <span class="cf-validation active ok">๋ณ๊ฒฝํ ๋น๋ฐ๋ฒํธ ๋์ผ์ฌ๋ถ ์ฒดํฌ</span> --><!-- ํ์ฑํ ์์ active ํด๋์ค ์ ์ฉ --><!-- ๋์ผํ ํ
์คํธ ์
๋ ฅ ์ ok ํด๋์ค ์ ์ฉ -->
</div>
</fieldset>
<article class="status-msg-box">
<p class="ok"><!-- ์
๋ ฅ ์ค๋ฅ ์ err ํด๋์ค ์ ์ฉ, ์
๋ ฅ ์๋ฃ ์ ok ํด๋์ค ์ ์ฉ -->
* ๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํฉ๋๋ค.
</p>
</article>
<div class="frm-btn-module">
<button type="submit">๋ณ๊ฒฝํ๊ธฐ</button>
</div>
</form>
</div>
</section>
</div>