HTML 태그2

1. 폼 태그 ( <form> )

폼은 사용자와 상호작용하여 정보를 입력받고 서버로 전송하기 위한 양식입니다.

 

주요 속성 :

• action : 폼 데이터를 전송할 서버의 URL
• method : 전송 방식 (get 또는 post)
• name : 폼의 이름
• target : 응답을 표시할 위치
• autocomplete : 자동 완성 기능 (on 또는 off)

 

 

2. 레이블 태그 ( <label> )

폼 요소에 이름을 붙이는 데 사용합니다. 접근성 향상에 도움이 됩니다.

 

사용 방법 : 

1. <label>레이블명 <input></label>
2. <label for="id명">레이블명</label><input id="id명">

 

 

3. 입력 태그( <input> )

다양한 유형의 사용자 입력을 받는 데 사용됩니다.

 

주요 type 속성값 : 

• text : 한 줄 텍스트 입력
• password : 비밀번호 입력
• checkbox : 다중 선택
• radio : 단일 선택
• number : 숫자 입력
• range : 슬라이더
• date : 날짜 선택
• email : 이메일 주소 입력
• file : 파일 업로드
• submit : 제출 버튼
• reset : 초기화 버튼
• button : 일반 버튼
• hidden : 숨겨진 입력 필드

기타 속성 :

• name : 입력 요소의 이름
• value : 초기값
• size : 입력 필드의 길이
• maxlength : 최대 입력 길이
• min , max : 최소값과 최대값 (number , range 등에서 사용)
• step : 증가 / 감소 간격

 

 

4. 텍스트 영역 태그 ( <textarea> )

여러 줄의 텍스트 입력에 사용됩니다.

 

속성 : 

• cols : 가로 너비 (문자 단위)
• rows : 세로 길이 (줄 단)

 

 

5. 선택 태그 ( <select> , <option> , <optgroup> )

드롭다운 목록을 생성합니다.

 

주요 속성 :

• size : 표시할 항목 수
• muliple : 다중 선택 가능
• selected : 기본 선택 항목

 

 

6. 버튼 태그 ( <button> )

클릭 가능한 버튼을 생성합니다.

 

type 속성 : 

• submit : 폼 제출
• reset : 폼 초기화
• button : 일반 버튼

 

 

7. 데이터 목록 태그 ( <datalist> )

입력 필드에 대한 미리 정의된 옵션을 제공합니다.

 

 

8. 기타 주요 속성

• disabled : 요소 비활성화
• readonly : 읽기 전용으로 설정
• autofocus : 자동 포커스 설정
• placeholder : 입력 힌트 제공
• required : 필수 입력 항목 지정

 

 

9. 시맨틱 태그

웹 페이지 구조를 의미 있게 표현하는 데 사용됩니다.

 

주요 태그 :

• <header> : 헤더 영역
• <nav> : 내비게이션 영역
• <section> : 관련 내용 영역
• <article> : 독립적인 컨텐츠 영역
• <aside> : 부가 정보 영역
• <footer> : 푸터 영역

 

 

 

10. 글로벌 속성

모든 HTML 요소에서 사용 가능한 속성입니다.

 

주요 속성 :

• id : 요소의 고유 식별자
• class : 스타일 클래스
• style : 인라인 스타일
• title : 추가 정보 (툴팁)
• lang : 언어 정보
• hidden : 요소 숨김
• data-* : 사용자 정의 데이터