인프런 실전 HTML CSS 강좌 정리 - HTML 기본3

인프런 실전 HTML CSS 강좌 정리 - HTML 기본3

---

1. 블록태그

<br/>태그처럼 대행이 없지만 블록 쌓듯이 밑으로 나열되는 태그

지난번 정리했던 <div>태그와 List태그가 해당된다.

 

2. 인라인태그

블록태그와 다르게 옆으로 쭉 나열되는 태그로 인라인 요소가 들어가 있다.

오늘 정리한 <span>태그가 있다.

 

3. <span>태그

인라인 요소를 그룹화를 정의한다.

주변 요소와 구별하기 위하거나 다른 적절한 태그가 없는 경우에 사용한다.

CSS 스타일링 사용을 위해 설정하는 경우가 많다.

비교 (Compare)

블록 요소를 그룹화한다면 <div>를 사용한다.

인라인 요소를 그룹화한다면 <inline>태그를 사용한다.

 

4. <video> 태그

미디어 영상을 재생하며, <sourece> 태그와 같이 사용한다.

 

5. 폼 태그

<input>태그

데이터를 입력할 수 있는 폼 컨트롤을 정의한다.

사용자가 입력하는 컨트롤은 <form>태그 안에 설정한다.

<input> 태그는 반드시 속성값을 설정한다.

속성 (Property)

속성	값(예)	설명
checked	checked	<input>요소를  유형이 checkbox, radio의 경우 체크를 표시할 수 있다.
typeformmethod	formmethod = "get" formmethod = "post"	데이터를 보낼 때 get 방식을 보냅니다. 데이터를 보낼 때 post 방식을 보냅니다.
	formmethod = "get" :  입력한 정보가 도메인주소 뒤에 코드값으로 변환하여 서버로 전송되는 경우. 브라우저에 정보가 노출되므로 보안에 취약하다. 디폴트값. formmethod = "post" : 입력한 정보가 도메인 주소에 노출되지 않는 경우. 입력한 정보가 암호화되어 서버로 전송되는 경우. 은닉화 처리.
type	type = "button"  type = "checkbox"  type = "color"  type = "date "  type = "datetime-local "  type = "email"  type = "file"  type = "hidden"  type = "image"  type = "month"  type = "number"  type = "password"  type = "radio"  type = "range"  type = "reset"  type = "search"  type = "submit"  type = "tel"  type = "text"  type = "time"  type = "url"  type = "week"	<input> 요소의 유형을 버튼으로 설정합니다.  <input> 요소의 유형을 체크박스로 설정합니다.  <input> 요소의 유형을 컬러 선택으로 설정합니다.  <input> 요소의 유형을 날짜(year, month, day) 선택으로 설정합니다.  <input> 요소의 유형을 시간(year, month, day, time) 선택으로 설정합니다.  <input> 요소의 이메일 주소의 필드를 설정합니다.  <input> 요소의 파일 업로드 버튼을 설정합니다.  <input> 요소의 필드를 숨깁니다.  <input> 요소의 이미지 버튼을 설정합니다.  <input> 요소의 월과 년도를 설정합니다.  <input> 요소의 숫자를 입력하기 위한 필드를 설정합니다.  <input> 요소의 패스워드 필드 설정합니다.  <input> 요소의 패스워드 라디오 버튼을 설정합니다.  <input> 요소의 범위 선택 버튼을 설정합니다.  <input> 요소의 범위 리셋 버튼을 설정합니다.  <input> 요소의 문자를 입력하기 위한 검색 텍스트 필드를 설정합니다.  <input> 요소의 데이터 전송 버튼을 설정합니다.  <input> 요소의 전화번호를 입력하기 위한 필드를 설정합니다.  <input> 요소의 텍스트를 입력하기 위한 필드를 설정합니다.  <input> 요소의 시간을 입력하기 위한 컨트롤을 설정합니다.  <input> 요소의 URL 입력하기 위한 컨트롤을 설정합니다.  <input> 요소의 주(week)와 년도를 설정합니다.

 

https://keunsoop.tistory.com/31

인프런 실전 HTML CSS 강좌 정리 - HTML 기본2