본문 바로가기

개념정리

[개념정리 4탄] ifname / input / table / textarea / ul

input type에는 여러 종류가 있다.

  • file : 원하는 파일을 선택해서 서버로 전송하는 입력 상자이다.
  • email : 이메일을 입력받는 글상자로 @가 없으면 제출되지 않는다.
  • url : 웹사이트를 입력받는 글상자로 http로 시작하는 url을 받는다.
  • tel : 전화번호를 입력받는 글상자이다.
  • text : 말 그대로 텍스트를 넣을 수 있는 글상자이다.
  • password : 비밀번호를 입력하는 글상자이다.(글자가 가려진다.)
  • radio : 동그란 체크 박스이다.
  • button : 버튼 박스이다.
  • submit : 제출하는 박스이다.
  • checkbox : 이름 그대로 체크할 수 있는 박스이다.
  • date : 날짜를 지정할 수 있는 박스이다.

 

input 속성

 

size : 박스의 크기를 설정한다.

maxlength : 값의 최대길이를 설정한다.

checked : 미리 선택되어있는 옵션을 설정한다.(checkbox, radio)

textarea : 기본적인 글상자이다.

<textarea cols = "가로 글자 수" rows = "세로 글자 수"></textarea>

 

form 태그

웹 페이지에서 사용자로부터 입력을 받아 처리쪽으로 보내줄 때 사용하는 태그 사용자가 입력한 데이터를 서버 쪽으로 보낼 때 form 요소를 사용한다.

 

<form action = "/login" method = "GET(POST)">

<p>아이디 : <input type = "text"></p>

<p>비밀번호 : <input type = "password"></p>

<button type = "submit">로그인</button>

</form>

method 방식

get = url에 데이터를 저장하여 전송하는 방식이다.

post = body에 데이터를 저장하여 전송하는 방식이다.

 

body => 통째로 전송한다.

query => code="31234"형태로 전송한다.

param => /31234/ 형태로 전송한다.

 

ul과 ol

 

<ul> 순서가 없는 목록태그
<il></il>
...
<ul>

<ol type = "1, A, a, I, i", start="시작 될 번호"> 순서가 있는 목로태그
<il></il>>
...
<ol>

table

여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표이다.(엑셀)

<table border="테두리(숫자)", width="가로길이(%,px)", align="정렬(center,right,left)">
<tr>-----각 테이블의 층(row)
<td width="길이, height="높이", rowspan="세로병합", colspan="가로병합"></td>----데이터
<th></th>---제목
</tr>
</table>

iframe

<iframe src="삽입할 페이지의 주소 또는 문서 위치" width, height>
...
</iframe>

'개념정리' 카테고리의 다른 글

[개념정리 6탄] JavaScript 2번째  (1) 2022.10.08
[개념정리 5탄] JavaScript란?  (1) 2022.10.08
[개념정리 3탄] HTML 문법  (1) 2022.10.08
[개념정리 2탄] HTML  (1) 2022.10.08
[개념정리 1편]프론트엔드와 백엔드  (1) 2022.10.08