Html 로그인 소스 - Html logeu-in soseu

Question

::placeholder는 말그대로 input이나 textarea 태그의 placeholder의 css 속성을 나타내고 :placeholder-shown은 placeholder가 display 되고 있는 상태를 나타내는 의사 클래스이다.

우선 html으로 문서의 골격을 작성한다.

<html>
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    </head>
    <body>
        <header>
            <h2>Login</h2>
        </header>

        <form action="" method="POST">

            <div class="input-box">
                <input id="username" type="text" name="username" placeholder="아이디">
                <label for="username">아이디</label>
            </div>

            <div class="input-box">
                <input id="password" type="password" name="password" placeholder="비밀번호">
                <label for="password">비밀번호</label>
            </div>
            <div id="forgot">비밀번호 찾기</div>
            <input type="submit" value="로그인">

        </form>

</body>
</html>

기본적으로 placeholder가 위로 이동하는 모션이 ::placeholder 의 color를 투명하게하고 label을 placeholder 처럼 위치시킨뒤

:placeholder-shown 이 focus로 인해 사라졌을때 label의 font-size와 위치를 변경시키는 것이다.정확하게는 focus 에 label 이동을,

:not(:placeholder-shown)에 border-bottom 색상 변경 을 진행함.

STYLE

때문에 input, label을 postion absolute로 top, left를 변경할 수 있게해야하고. 이 absolute를 위해

input, label 한 쌍을 div 태그로 감싸서 position relative로 주었다.

.input-box{
  position:relative;
  margin:10px 0;
}

이제 아이디와 비밀번호 input 의 style을 지정

.input-box > input{
  background:transparent;
  border:none;
  border-bottom: solid 1px #ccc;
  padding:20px 0px 5px 0px;
  font-size:14pt;
  width:100%;
}

주변 테두리를 없애고, bottom 즉 아래 쪽 라인만 보이게 한뒤.

적당한 padding 값으로 placeholder가 padding 공간 (20px)사이로 들어갈 수 있게끔 만들어 준다.

input::placeholder{
	color:transparent;
}

그리고 여기서 placeholder의 color를 transparent(투명) 하게 만들어준다.

input:placeholder-shown + label{
  color:#aaa;
  font-size:14pt;
  top:15px;
}

자 이제 placeholder 인척 할 label의 style을 지정해주는데 이렇게 한다고해서 label의 위치가 top :15 px로 바뀌지는 않는다.

position : abolute가 없기 때문.

+ 는 인접형제선택자로 같은 부모를 가지고 바로 뒤에오는 'label' 만 선택함.

input:focus + label, label{
  color:#8aa1a1;
  font-size:10pt;
  pointer-events: none;
  position: absolute;
  left:0px;
  top:0px;
  transition: all 0.2s ease ;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}

이제 input이 focus 되었을 때 인접 형제 label 과 , label의 값을 이렇게 동시에 지정해주는데

그냥 label 은 바로 직전에 지정한 input:placeholder-shown + label 의 값에 의해 position : absolute 된 color : #aaa와 font-size: 14 그리고 top:15px를 가진 상태가 된다. 이는 CSS의 적용 우선순위가 태그에 지정한 style보다 추상클래스(:placeholder-shown + label)의 우선순위가 input:focus + label 옆에있는 label의 우선순위보다 더 높기때문인 것 같다( CSS 고수 등판해서 알려주시면 매우 감사)

하지만 위에선 focus를 사용한 같은 우선순위의 추상클래스가 라벨의 top과 font-size, color 가 코드의 위치상 더 아래쪽에 있으므로,, 위의 placeholder-shown을 이김 ㅋㅋ

input:focus, input:not(:placeholder-shown){
  border-bottom: solid 1px #8aa1a1;
  outline:none;
}

그리고 이제 placeholder-shown 이 사라지고 focus 되었을때 outline과 border-bottom의 색상을 변경한다.

끝

주의해야할 것은

placeholder는 투명으로 해놔서 잘 모르겠지만 클릭(focus)만 한다고해서 :not(:placeholder-shown)이 되는 것이 아니다. 글자를 입력해야 됨. 즉

한참 위에서 작성한 input:placeholder-shown + label에서 placeholder-shown 을 굳이 사용해서 라벨의 style을 지정해준 것은 글자가 입력되어 placeholder가 사라진 상태에서 focus가 해제되었을 때 label이 초기의 상태로 돌아오는 것을 막기 위함임.

HTML5, css 10개의 로그인 오픈 소스

weBtonG 제이쿼리 스크립트 0 9753 0 2018.03.12 22:36

https://speckyboy.com/login-pages-html5-css/ + 16020

상단 붉은색바를 클릭하시면 해당 사이트로 이동합니다.

로그인을 미리 만들어두고 나중에 사용할 수 있다면 좋겠다...

해외에서는 이렇게 오픈소스를 준비해서 제공하는 군요

상단 붉은색바를 클릭하시면 해당사이트로 이동합니다.