728x90
[form 과 input]
- input type="text"
- input type="text" value "aaaa"
--> aaaa글자를 고정으로 채워줌 - input type="text" placeholder "aaaa"
--> 배경글자. 가이드 문구에 활용 - (참고) input type="text" name "age"
--> age 라는 이름으로 서버에 전달됨(서버개발시 필요)
[드롭다운 메뉴 만들기]
<select>
<option>1번</option>
<option>2번</option>
<option>3번</option>
[submit 버튼 만들기]
방법1. <input type="submit"> <--제출이라는 이름으로 버튼생성
방법2. <button type="submit">전송</button>
input[속성명=속성값]
--> type이 text 인것만 명령 주는 것
input[type=text] {
padding: 10px;
font-size: 20px;
border: 2px solid black;
border-radius: 5px;
}
[셀렉터에 콤마사용으로 여러개 동시 선택]
한꺼번에 표현 가능함
div, input, textarea {
box-sizing: border-box;
}
[label 태그]
<div>
<input id="sub" type="checkbox">
<label for="sub">Subscribe</label>
<button class="yellow-button">SEND</button>
<div>
- subscribe 누를 때 input 누르는 것과 동일
(글자만 눌러도 체크가 된다는 것)
[버튼 오른쪽 하단에 고정하기]
.yellow-button {
display: block;
margin-left: auto;
728x90
반응형
'CSS' 카테고리의 다른 글
pseudo-class 인터랙티브 버튼 만들기 (0) | 2023.07.07 |
---|---|
테이블 만들기 (0) | 2023.07.07 |
웹 페이지 꾸미기 (0) | 2023.07.07 |
Selector 응용 (0) | 2023.07.07 |
div 박스 생성 (0) | 2023.06.28 |