Input
사용자가 직접 텍스트를 입력할 수 있는 Input, Textarea 태그
type, placeholder라는 attribute가 있다.
<input type="text" placeholder="ID">
<input type="password" placeholder="비밀번호">
<input type="number" placeholder="학번">1. type="text"
-text를 입력하는 속성.
-대부분의 input type은 text.
-어느 텍스트나 입력할 수 있다.
-이름, id, 주소, 닉네임 등을 입력 받을 때 사용.
2. type="password"
-text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나온다.
-만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것.
-화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다.
3. type="number"
-숫자만 입력할 수 있다.
-만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없다.
4. placeholder
-placeholder는 도움말을 넣어주는 부분이다.
-실제 input에 입력되어있는 텍스트가 아니다.
보통 짧은 방명록이나 댓글을 입력할 때 textarea 태그를 사용합니다.
*참고
-textarea에 "소개:"라고 보이는 것은 placeholder가 아니라 텍스트다.
-input은 시작태그, 끝태그로 구성되지 않습니다. 하나의 태그가 하나의 요소다.
-textarea처럼 input에도 미리 값을 세팅해놓고 싶을 수가 있다. 그때는 value라는 attribute를 사용.
디자인 변경 - inline element
input, textarea, button은 모두 inline element라서 한 줄에 이어서 나왔다.
but,
실제 사이트를 개발할 때, input이나 textarea의 부모에 div태그로 감싸 영역을 분리하곤 한다.
<div class="input-wrap">
<input type="text">
</div>
input위에 block성질의 부모가 감싸고 있으니 서로 한 줄에 나오지 않을 것이다.
디자인 변경 - input width
input과 textarea의 가로가 모두 제각각이라서 통일시키기!.
방법>
1. input, textarea에 같은 width 값을 부여한다.
2. 부모에 width를 주고 input, textarea의 width는 100%로 설정한다.
최대한 변경이 적을 수 있도록 2번 방법으로 진행!
일단 모든 요소를 하나로 묶고 싶습니다.
물론 body라는 태그가 모든 요소를 포함하고는 있지만,
어떤 다른 요소가 추가될지 모르니 body대신에 div로 새로 감싸도록 하겠습니다.
div태그이고 class는 survey-container 입니다.
이제 survey-container에 가로값을 주고,
input과 textarea에도 100%로 가로값을 주기.
index.css에 추가!
.survey-container {
width: 200px;
}
input, textarea {
width: 100%;
}.survey-container이 가운데로 올 수 있도록 margin도 추가해주세요.
.survey-container {
margin: 100px auto;
}input, textarea 스타일
- input 요소 끼리 위아래로 붙어있어서 조금 띄우고
- 글씨 크기도 조금 키워보겠습니다.
- 요즘 스타일에 맞게 직각의 input의 테두리 반경을 조금 둥글게 해보겠습니다.
input, textarea {
font-size: 13px;
margin-bottom: 5px;
border-radius: 5px;
}
그런데 input 요소에 그림자 같은게 보이시나요?
3d처럼 표현하고 싶어하는 브라우저가 input태그에 border-style: inset; 을 default로 추가했나봅니다.
그리고 두께도 두꺼워서 1px로 바꾸겠습니다.
이번에는 input 태그에만 적용하는 css입니다.
input {
border: 1px solid black;
}
input 내부에 글씨가 너무 붙어있는 것 같아서 내부 여백도 추가하고 싶습니다.
input, textarea {
padding: 7px 12px;
}
왼쪽 textarea 결과화면을 보면 오른쪽 아래 삼각형이 있습니다.
마우스를 올려서 한 번 끌어보세요.
음.. 원하지 않던 기능이 또 들어갔습니다!
브라우저의 default 스타일입니다.
resize 기능을 없앱시다.
textarea {
resize: none;
}
placeholder, type 스타일
placeholder에 회색으로 default color가 입혀졌다.
그런데 조금 진한 것 같아서 더 연한색으로 바꿔보려고 한다.
placeholder는 attribute인데 css의 selector에 어떻게 표현해줘야 할까
input::placeholder {
color: #bbb;
}콜론 두개를 붙여서 selector를 만들어줄 수 있다
그치만! attribute를 표현한다고 모두 콜론을 쓰는 것은 아니다.
input 세개 중에서 text 타입인 input만 스타일을 입히고 싶다면,
아래와 같이 표현한다.
input[type="text"] {
}id는 필수값이라고 하니 placeholder를 빨간색으로 강조해봅시다.
input[type="text"]::placeholder {
color: red;
}
button 스타일
이제 마지막으로 버튼을 꾸며보겠습니다.
글씨 크기
글씨색
버튼 배경색
먼저 바꿔봅시다.
button {
color: white;
font-size: 15px;
background-color: #4CAF50;
}
아직 뭔가 부족한 것 같습니다.
테두리 반경도 조금 바꾸고, 테두리랑 버튼글씨가 너무 붙어있어서 padding도 추가해봅시다.
button {
padding: 5px 10px;
border-radius: 5px;
}
그나마 조금 나은가요?
제출완료를 클릭하려고 마우스를 올렸더니 평소에 웹사이트에서 봤던 손가락 모양이 나오지 않네요.
사용자가 클릭할 수 있는 요소인지 알려줘야겠습니다.
버튼에 마우스를 올리면, cursor 모양을 바꾸도록 하겠습니다.
button:hover {
cursor: pointer;
}
오! 새로운 표현의 selector입니다.
hover라는 것은 마우스를 올렸다는 의미입니다.
이렇게 상태에 따른 selector도 있습니다.
selector 표현이 정말 많네요.
https://www.w3schools.com/cssref/css_selectors.asp
위의 사이트에서 한 번 보실까요.
몇 십개가 있는 것 같은데 이 중에서 주로 사용하는 것은 많지 않습니다.
다시 cursor 모양으로 돌아가겠습니다.
cursor 프로퍼티에 pointer라는 값을 주면 손가락 모양으로 변하게 됩니다.
button이라는 태그는 무조건 클릭을 하는 요소일텐데,
브라우저는 이런 스타일이나 default로 넣어주지!
https://www.w3schools.com/cssref/pr_class_cursor.asp
cursor 종류가 많습니다.
지금 보는 화면 바로 왼쪽에 영역 크기를 변경할 수 있는 세로줄이 있죠?
마우스를 올려보세요.
cursor: col-resize; 이 적용된 것 같습니다.
기다리는 모래시계 모양도 있고, 줌인, 줌아웃, 이동 모양 등등 아주 많습니다.
저도 기억하는 것은 몇 개 안 되기에 검색해서 찾아봐야합니다.
적재적소에 cursor 모양을 잘 적용하면 멋진 사이트가 되겠네요!
button:hover를 사용한 김에 딱 하나만 더 추가해보겠습니다.
지금 버튼 위에 마우스를 올렸고, 누를 수 있는 상태라는 것을 더 명확히 알리고 싶습니다.
button:hover {
opacity: 0.8;
}
추가해서 확인해보셨나요?
마우스를 올리니 색깔이 연해진 것 같습니다.
opacity는 해당 요소를 불투명하게 만들어줍니다.
0.8이라는 값은 백분율인데,
원래의 스타일에서 80% 만큼 흐리게 해준다는 뜻입니다.
만약 opacity에 0값을 입력하면 해당요소가 0%만큼 흐려져서
화면에서 아예 보이지 않게 됩니다.
