HTML 기초 문법(3)

폼(Form)

• form : 폼의 시작과 끝을 정의하는 태그
• input, select : 사용자 입력을 받는 입력상자, 선택버튼을 만드는 태그
• label : 입력상자마다 제목을 붙이는 태그
• button : 버튼을 만드는 태그

 

form 태그

폼을 정의하는 태그. 원하는 서버의 주소로 데이터를 전송

주요 속성

• action : 데이터를 전송할 url 주소
• method : 데이터를 전송할 방법. 주로 get과 post 중 사용 (노출o : get, 노출x : post)
• enctype : 데이터를 전송할 때 전송 인코딩 형식을 지정

 

input 태그

입력상자를 만드는 태그. 홀태그 형식

주요 속성

• type : 입력 형태를 지정. text, password, button, submit(바로 전송), radio(중첩x), checkbox(중첩o) 등
• name : 데이터를 전송할 방법. 주로 get과 post 중 사용 (노출o : get, 노출x : post)
• value : 입력 상자의 값을 지정

• password로 지정하면 입력 내용이 마스킹되어 화면에 노출되지 않음

 

select 태그

드롭다운 선택 박스를 만듦. option 태그를 사용하여 선택지를 추가

* value 값이 서버로 실전송되는 값!

 

 

textarea 태그

두 줄 이상 긴 글을 입력 받도록 해주는 입력 칸을 만듦. 쌍 태그 구조

* textarea 내부의 content는 줄 바꿈을 인식

 

label 태그

입력 칸을 설명해주는 레이블을 표시

• label : 화면 form 관련 요소들을 수식하는 역할 → 사용자 눈에 보임
• name : 서버가 보기 위한 이름표, 전송되는 Data 수식 → 사용자 눈에 안보임

 

fieldset, legend 태그

여러 입력 태그를 하나의 그룹으로 묶고 원하는 제목을 다는 것

메타 태그(Meta tag)

• 웹문서의 정보(메타데이터)를 알려주기 위해 작성하는 태그
• 태그 내에 위치하고 홀 태그 형식으로 사용

 

meta 태그 : charset

웹 문서의 문자 인코딩을 알려주는 역할

<meta charset="UTF-8">

 

meta 태그 : viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width : 웹 문서가 표현되는 영역의 너비 결정
• initial-scale : 처음 화면에 보여질 때 배율을 결정
• user-scalable, maximum-scale, minimum-scale 등 사용 가능

 

meta 태그 : author, description, keyword

검색 엔진이나 외부 웹 서비스에 알려질 정보들을 표현

<meta name="author" content="인프런">
<meta name="keywords" content="HTML">
<meta name="description" content="웹 개발 오리지널">

 

meta 태그 : open graph

open graph 메타 태그를 사용하면 sns에 더 자세한 정보를 알려줄 수 있음

<meta property="og:title" content="인프런"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://www.inflearn.com"/>
<meta property="og:image" content="https://cdn.inflearn.com/public/main/profile/default profile.png"/>

 

iframe 태그

다른 웹 페이지를 표시할 수 있는 태그

<iframe width="500" height="300" src=https://www.inflearn.com frameborder="0"> </iframe>

• src : iframe에 표시될 웹 문서 주소
• width, height : 높이, 너비 (px기준, %도 가능)
• frameborder : 테두리 표시 여부 (1,0)
• scrolling : 스크롤바 표시 여부 (yes, no, auto)
• name : a 태그에서 참조할 이름 (target = url)