1. Input
<input type="text" placeholder="ID"> <input type="password" placeholder="비밀번호"> <input type="number" placeholder="학번">
-
type="text"
text를 입력하는 속성
대부분의 input type은 text 다. 어느 텍스트나 입력할 수 있다.
이름, id, 주소, 닉네임 등을 입력 받을 때 사용. -
type="password"
text와 비슷한데, 뭔가를 입력하면 까만 원으로 나옵니다. 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다. -
type="number"
숫자만 입력할 수 있습니다.
만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없다. -
placeholder
placeholder는 도움말을 넣어주는 부분이다.
실제 input에 입력되어있는 텍스트가 아님.
<textarea>소개:</textarea>
textarea는 input보다 더 긴 텍스트를 입력받고 싶을 때 사용한다. 보통 짧은 방명록이나 댓글을 입력할 때 textarea 태그를 사용.
* 참고
textarea에 "소개:"라고 보이는 것은 placeholder가 아니라 텍스트다.
input은 시작태그, 끝태그로 구성되지 않는다. 하나의 태그가 하나의 요소!
textarea처럼 input에도 미리 값을 세팅할 수 있다. 그때는 value라는 attribute를 사용한다.
2. 디자인 - inline element
실제 사이트를 개발할 때 보통 input태그나 textarea태그의 부모 태그에 div태그로 감싸 영역을 분리한다.
<div class="input-wrap"> <input type="text"> </div>
이런 방법으로 각 input위에 block성질의 부모가 감싸고 있으니 한 줄에 함께 나오지 않게 된다.
3. 디자인 - input width
input과 textarea의 너비를 똑같이 하려고 한다.
여러가지 방법이 있다.
1. input, textarea에 같은 width 값을 부여.
2. 부모 태그에 width 값을 주고 input, textarea의 width는 100%로 설정.
1번 방법도 쓰긴 하지만, 만약 가로 값을 변경하자고 하면 CSS에서 모든 input과 textarea를 일일히 찾아서 변경해야 하기때문에 최대한 변경이 적을 수 있도록 2번 방법을 사용한다.
일단 모든 요소를 div 태그로 감싸 하나로 묶는다.
div 태그의 class를 지정한다. (예: survey-container)
<body> <div class="survey-container"> <div class="input-wrap> <input type="text" placeholder="ID"> </div> <!--생략--> </div> </body>css를 수정해준다.
.survey-container { width: 200px; } input, textarea { width: 100%; }
4. placeholder, type 스타일 수정
placeholder에 회색으로 default color가 적용되어있다.
더 연한색으로 바꿔보려고 할때, placeholder는 attribute인데 css의 selector를 어떻게 설정해야 할까 ?
input::placeholder { color: #bbb; }위 예시처럼 콜론 두개를 사용해서 적용 가능하다.
위 세 개의 input태그 중에서 text타입의 input에만 스타일을 입히고 싶다면 아래와 같이 하면 된다.
input[type="text"] {\ } input[type="text"::placeholder] { color: red; }
5. button 디자인
button { color: white; font-size: 15px; background-color: #4CAF50; }이렇게 글씨 색, 글자 크기, 배경 색을 변경한다.
button { padding: 5px 10px; border-radius: 5px; }테두리 반경도 수정하고, 테두리랑 버튼글씨가 너무 붙어있다면 padding도 추가한다.
button:hover { cursor: pointer; }위 같이 cursor 속성에 pointer 로 값을 지정해주면 버튼에 마우스를 올렸을 때 마우스 커서의 모습이 손가락 모양으로 변하게 된다.
https://www.w3schools.com/cssref/pr_class_cursor.asp 에서 다양한 마우스 커서를 확인 가능.
button:hover { opacity: 0.8; }
opacity 속성을 이용하여 마우스 커서를 버튼 위에 올렸을 때 투명도를 변화시킬 수 있다.
opacity는 해당 요소를 불투명하게 만들어준다.
0.8이라는 값은 백분율인데, 원래의 스타일에서 80% 만큼 흐리게 해준다는 뜻.
만약 opacity에 0값을 입력하면 해당요소가 0%만큼 흐려져서 화면에서 아예 보이지 않게 된다.
