tag

Inline vs block

• Inline
  • 객체가 옆에 올 수 있음
  • 패딩, 마진, 크기 주기가 쉽지 않음 —> inline-block 사용 (inline 을 block 처럼 사용)
  • span, img 등
• block
  • 한 줄 다 차지
  • div 등

label, input

<!-- label 의 for 이름과 input 의 id 이름을 같게 지정 -->
<label for="name">이름</label>
<input type="text" id="name">

input

• <input type=”유형” [속성=”속성값”]>
• type

  • text : 텍스트 필드

  • password : 입력 내용이 * 로 표시

  • hidden : 사용자에게 보이지 않지만 서버로 넘겨지는 값

  • search : 검색 상자 만들기 (콤보 박스)

  • url : 웹 주소 입력 란 (https 자동 생성)

  • email : 이메일 입력 란 (형식 맞는지 확인)

  • tel : 전화번호 입력 필드

  • number, range : 숫자 입력시 스핀박스, 슬라이드 막대 이용

                             (min=”0”, max = “10”, step=”1”, value=”초기값”)
    

  • radio : 항목 중 하나만 선택

              (name, value : 서버로 넘길 값 (name 은 같은 값), checked : default checked)
    

  • checkbox : 항목 중 여러 개 선택

                    (name, value : 서버로 넘길 값 (name 은 다른 값), checked : default checked)
    

  • color : 색상 선택 상자 표기

  • datetime, datetime-local : 날짜와 시간 표시

  • date, month, week

  • file : 파일 첨부

  • submit : 전송 버튼 (value : 버튼에 표시할 내용 입력)

  • reset : 입력된 정보 전부 삭제 (value : 버튼에 표시할 내용 입력)

• 속성
  • readonly : 읽기 전용
  • placeholder : 힌트 표시
  • autofocus : 입력 커서 표시하기
  • autocomplete : 자동 완성 기능 제어
  • min, max, maxlength, step : 최소, 최대, 문자 수, 간격
  • required : 필수 필드 지정

button

• <button>
  • submit
  • reset
  • button

textarea : 한 줄 이상의 문장을 입력

• name : 텍스트 영역 이름
• cols : 가로 너비
• rows : 세로 길이 (지정한 숫자보다 많아지면 스크롤바 생성)