Input

<input type="">

• text 속성값: text를 입력하는 속성이며 대부분 input의 type는 text입니다. 주로 이름, 아이디, 주소, 닉네임 등을 입력할 때 사용합니다.

• password 속성값: 암호창처럼 나오며 입력하면 보이지 않게 검정색 원으로 처리 됩니다.

• number 속성값: 숫자만 입력할 수 있습니다.

• placeholder 속성: 도움말을 넣어주는 기능입니다.

• textarea 태그: 보다 긴 문장이나 글을 적을 수 있는 공간입니다. 주로 댓글을 입력할 때 사용합니다.

실제 웹개발를 할 때, <input> 이나 <textarea> 를 부모 <div> 태그로 감싸 영역을 분리하기도 합니다.

textarea {
  resize: none;  /*텍스트어리어의 크기조절창없애기*/
}

• 속성을 css를 수정하려면 ::두개를 사용하여 선택자로 사용하면 됩니다.

input::placeholder {
  color: #bbb;
}

• 같은속성 여러 중 하나만 수정하고 싶으면 []와 속성,속성값을 입력합니다.

input[type="text"] {
}

• 마우스를 버튼위로 올려놓았을 때 사용하는 효과입니다.

button:hover {   /*마우스를 올렸을때 작동*/
    cursor: pointer;  /*커서의 모양이 바뀜*/
}
button:hover {
  opacity: 0.8;    /*투명도가 바뀜*/
}

Assignment

아래 3개 assignment를 보시고 차례대로 완료해주세요!

1. 위의 강의를 보며 따라했던 결과물이 첫 번째 Assignment입니다.
   - 아래 결과처럼 보이면 성공입니다!

   input, textarea {
     width: 50%;
     padding: 7px 12px;
   }
   button {
     padding: 5px 15px;
     border-radius: 5px;
     background-color: #4CAF50;
     color: white;
     font-style: bold;
     border: 1px solid gainsboro;
   }

2. 학번은 값을 미리 세팅하고 싶네요.
   - 학번 input에 123456의 텍스트가 보일 수 있도록 해주세요.
   - placeholder가 아닌 실제 값입니다.
   - (hint: https://www.w3schools.com/tags/att_input_value.asp)

   <input type="ID" placeholder="ID(필수)" value="123456"> 

3. button에 마우스를 올리면 opacity가 변했듯이,
   - input과 textarea도 마우스를 올리면 스타일을 변경하고 싶습니다.
   - input, textarea 모두 마우스를 올리면 테두리의 색깔이 #4CAF50 으로 바뀌도록 css를 추가해주세요.

   input:hover, textarea:hover {
     border: 1px solid #4CAF50;
   }