gwooden_코린이

html + CSS 네이버 로그인 창 만들어보기 본문

프론트엔드/html

html + CSS 네이버 로그인 창 만들어보기

gwooden22 2022. 12. 16. 17:18
728x90

- html + CSS 네이버 로그인 창 만들어보기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NaverLogin</title>
  <link rel="stylesheet" href="css/style2.css">

</head>
<body>
  <div id="container">
    <div id="wrapper">
      <div id="logeheader">
        <a href="#"><img src="img/KakaoTalk_20221216_122142236.png"></a>
      </div>

      <div class="loginWrap">
        <form>
          <div class="lw">
            <input type="text" name="id" placeholder="아이디" required>
            <input type="password" name="password" placeholder="비밀번호" required>
            <input class="submit" type="submit" value="로그인">
         </div>

          <div class="stateIpWarp">
            <div class="stateLeft">
              <input type="checkbox" name="state" id="state">
              <label for="state">로그인 상태 유지</label>
            </div>

            <div class="ipRight">
              <label for="ip">IP 보안</label>
              <input type="checkbox" name="ip" id="ip">
            </div>
          </div>
        </form>
      </div>

     

      <div class="loginWrap2">
        <h2>더욱 간편한 로그인</h2>
        <div>
          <a href="#">QR 코드 로그인</a>
          <a href="#">일회용 번호 로그인</a>
        </div>
      </div>

      <div class="serchWrap">
        <a href="#">아이디 찾기</a> |
        <a href="#">비밀번호 찾기</a> |
        <a href="#">회원가입</a>
      </div>

      <div id = "footer">
        <img src="img/KakaoTalk_20221216_122142236.png">
        Copright @ Naver Copr.
      </div>
     
  </div>
</body>
</html>
/* font-family: 'Noto Sans KR', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Merienda:wght@600&family=Noto+Sans+KR&display=swap');

* {
  margin: 0px;
  padding: 0px;
}

body {
  font: 15px/1.8 'Noto Sans KR', sans-serif;
}

html, body {
  height: 100%;
}

#container {
  background-color: rgb(252, 252, 252);
  width: 700px;
  margin: auto;
  height: 100%;
}

#wrapper {

  width: 100%;
  padding: 100px;
  box-sizing: border-box;
}

img {
  width: 50%;
}

#logeheader {
  text-align: center;
  margin-bottom: 50px;
}


#loginWrap {
  height: 25px;
  width: 100%;
}

.lw input {
  width: 100%;
  font-size: 15px;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid lightgray;
}

.submit {
  background-color: #03C75a;
  color: white;
  cursor: pointer;
}

.stateLeft {
  float: left;
  color: rgb(131, 131, 131);
}

.ipRight {
  float: right;
  color: rgb(131, 131, 131);
}


.loginWrap2 {
  margin-top: 50px;
  text-align: center;
}


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

.loginWrap2 div a {
  border: 1px solid #03C75a;
  padding: 10px;
  width: 47%;
  box-sizing: border-box;
  float: left;
  margin-bottom: 50px; /* serchWrap 위아래 간격 */
}

.loginWrap2 div a:first-child {
  margin-right: 6%;
}

.loginWrap2 h2 {
  margin-bottom: 5%;
  color: rgb(61, 61, 61);
}

.loginWrap2 div a:hover {
  background-color: #03C75a;
  color: white;
}

.serchWrap {
  text-align: center;
  margin-bottom: 50px; /* footer 위아래 간격 마진설정 */
}

.serchWrap a {
  margin: 0 10px;
  color: #444;
}

#footer {
  text-align: center;
}

#footer img {
  width: 80px;
  vertical-align: middle;
}

.loginWrap {
  border-bottom: 1px solid #ccc;
  overflow: auto;
  padding-bottom: 20px;
}

728x90
저작자표시 비영리 변경금지

'프론트엔드 > html' 카테고리의 다른 글

html + CSS 네비바 활용한 간단한 페이지 및 sns 프로필 만들어보기  (0) 2022.12.19
css 포지션 position  (0) 2022.12.16
css 박스 사이즈  (0) 2022.12.16
css 포지션 float  (0) 2022.12.15
css 표 다뤄보기  (0) 2022.12.15
'프론트엔드/html' Related Articles more
Comments