스타벅스 만들기 7 - 로그인

프망생·2025년 4월 13일

웹사이트 만들기

목록 보기
7/10

      <form>
        <input type="text" placeholder="아이디를 입력해 주세요." />
        <input type="password" placeholder="비밀번호를 입력해 주세요." />
        <input type="submit" value="로그인" />
        <p>
          * 타 사이트와 비밀번호를 동일하게 사용할 경우 도용의 위험이 있으므로, 정기적인 <br />
          비밀번호 변경을 해주시길 바랍니다.
        </p>
      </form>

form, input

input : 사용자에게 데이터를 입력받는 역할
type="text" : 문자 타입을 입력받기 위한 요소
input type="password" : 비밀보호 타입을 입력받기 위한 요소
input type="submit" : 타입을 'submit'을 사용하면 해당 버튼이 선택 시 실제로 서버로 form 태그 내의 내용을 전송하게 해준다.

속성 선택자

.signin__card form [type="submit"] {
  background-color: #006633;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

[type="submit"] : 타입의 속성이 submit인 요소를 선택할 수 있다.

특정 글씨 강조

 <div class="signin__card">
      <h2>
        <strong>Welcome!</strong> 스타벅스 코리아에 오신 것을 환영합니다.
      </h2>
 </div>
.signin__card h2 strong {
  font-weight: 700;
  color: #006633
}

strong : strong 태그는 주로 특정 글자를 강조할 때 사용한다.

profile
안녕하세요. 프론트엔드 지망생입니다.

0개의 댓글