14. 스타벅스 로그인

스타벅스 로그인 페이지

---

스타벅스 로그인 HTML

  <section class="signin">
    <h1>로그인</h1>
    <div class="signin__card">
      <h2>
        <strong>Welcome!</strong> 스타벅스에 오신 것을 환영합니다.
      </h2>
      <form>
        <input type="text" placeholder="아이디를 입력하세요." />
        <input type="password" placeholder="비밀번호를 입력하세요." />
        <input type="submit" value="로그인" />
        <p>
          * 비밀번호를 타 사이트와 같이 사용할 경우 도용 위험이 있으니,<br />
          정기적으로 비밀번호를 변경하세요!
        </p>
      </form>
      <div class="actions">
        <a href="javascript:void(0)">회원가입</a>
        <a href="javascript:void(0)">아이디 찾기</a>
        <a href="javascript:void(0)">비밀번호 찾기</a>
      </div>
    </div>
  </section>

• input type=text: text 입력
• input type=password: text 입력할 경우 가림 처리되어 text가 입력된다.
• input type=submit: 서버의 폼 핸들러로 폼 데이터를 전송하는 제출 버튼을 정의

---

스타벅스 로그인 CSS

.signin {
  margin-top: 120px;
  padding: 100px 0 150px;
  background-image: url("../images/signin_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.signin h1 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
}
.signin__card {
  width: 500px;
  margin: 0 auto;
  border-radius: 6px;
  background-color: #f6f5f0;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, .3);
  color: #555;
}
.signin__card h2 {
  padding: 30px;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.signin__card h2 strong {
  font-weight: 700;
  color: #006633;
}
.signin__card form {
  padding: 30px 22px;
}
.signin__card form input {
  width: 100%;
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
  font-size: 14px;
}
.signin__card form [type="submit"] {
  background-color: #006633;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.signin__card form p {
  font-size: 12px;
  color: #006633;
  text-align: center;
}
.signin__card .actions {
  display: flex;
  border-top: 1px solid #ddd;
}
.signin__card .actions a {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
  padding: 20px;
  color: #555;
  font-size: 14px;
  border-right: 1px solid #ddd;
}
.signin__card .actions a:last-child {
  border-right: none;
}
.signin__card .actions a:hover {
  text-decoration: underline;
}

signin class

• 위쪽 외부여백 120px
• 내부여백 위 100px 아래 150px
• 배경 이미지는 signin_bg.jpg를 사용
• 이미지를 반복하지 않는다.
• 중앙 정렬
• 이미지는 고정
• 배경은 전체적인 비율에 맞게 조절

h1

• 색은 #fff
• 글자 크기는 30px
• 글자 굵기는 700
• 좌우 기준 중앙 정렬
• 아래 외부 여백 24px

signin__card class

• 가로 500px
• 중앙 정렬
• 테두리는 둥글게
• 배경색은 #f6f5f0
• 요소 그림자는 x축 기준 2px, y축 기준 2px 그림자 20px 30% 투명도
• 색 #555

h2

• 내부여백 30px
• 글자 크기 18px
• 좌우 기준 중앙 정렬
• 아래 테두리 1px solid #ddd

strong

• 글자 굵기 700
• 색 #006633

form

• 내부 여백 위아래 30px 좌우 22px

input

• 가로 100%
• 아래 외부여백 12px
• 내부여백 15px
• 테두리 1px solid #ddd
• 테두리 4px만큼 둥글게
• outline 제거
• border-box size
• 글자 크기 14px

[type="submit"]

• 배경 색 #006633
• 테두리 제거
• 색 #fff
• 글자 크기 20px
• 요소에 마우스 커서를 가져다대면 손가락 커서로 변한다.

p

• 글자 크기 12px
• 색 #006633
• 좌우 기준 중앙정렬 

actions class

• 수평 정렬
• 위쪽 테두리 1px solid #ddd

a

• 칸 비율 1로 꽉 채움
• 요소때문에 변하는 칸 크기를 다시 1대1 비율로 맞춰줌
• 좌우 기준 중앙 정렬
• 내부여백 20px
• 색 #555
• 글자 크기 14px
• 오른쪽 테두리 1px solid #ddd

a:last-child

• 마지막 오른쪽 테두리 제거

a:hover

• a태그에 마우스 커서를 가져다대면 밑줄 생성

---

스타벅스 홈페이지에서 로그인 페이지로 접속

---

스타벅스 로그인 페이지 최종 완성