프루트 2022. 5. 20. 15:28

<ol>, <ul>태그

  - ol(ordered list): 순서가 있는 목록 태그

  - ul(unordered list): 순서가 없는 목록 태그

  - 태그 사용시 <li>태그로 작성 해야한다.

  - ex)

    <ul>

          <li>목록 1</li>

          <li>목록 2</li>

    </ul>

 

<table>태그

  - tr: 표의 행

  - th: 표의 행 내부의 제목 셀

  - td: 표의 행 내부의 일반 셀

  - colspan(열이 서로 다른셀 병합), rowspan(행이 서로 다른셀 병합) 사용하여 셀 병합이 가능하다.

  - table 태그 사용 시 브라우저에서 자동으로 하단에 tbody태그가 생성된다.

 

<table태그 입력>
<웹페이지 표시>

  - border값을 주지 않으면 선이 표시가 되지 않는다.

 

<form>태그

  - 웹문서가 서로 상호작용 할 수 있도록 하는 역할을 한다.

  - button, checkbox, password, radio, submit, text, file, hidden, image의 속성이 있다.

  - form 태그의 형식은 아래와 같다.

   <form action="서버 URL" method="get 또는 post">폼의 내용</form>

  - action: 입력데이터의 전달 위치를 지정한다.

  - method: 입력데이터의 전달 방식을 선택한다.

    > get: 주소에 데이터를 입력해서 보내는 방식

       post: 주소가 변경되지 않는 방식

<form 태그 예시>
<웹페이지 표시>

<input>태그

  - 폼 요소 안에 글상자, 체크 박스 등의 폼 컨트롤을 생성 할 때 사용한다.

  - type 속성에 사용할 수 있는 컨트롤 값은 text, password, radio, checkbox, file, image, submit, reset, button, hidden      이 있다.

  - 추가적으로 placeholder(웹페이지에 미리 표시), autofocus(포커스 위치), required(필수 속성), autocomplete(자동완      성), list(datalist의 속성id)이 있다.

    <input type="컨트롤 값" value="초기값" size="크기" id="식별자" name="변수명" />

 

<button>태그

  - input 태그의 submit, reset, button의 type과 생성할 수 있는 경우가 같지만 좀 더 유연한 디자인이 가능하다.

    <button type="버튼의 종류" name="변수명" id="식별자">버튼명</button>

 

<textarea>태그

  - 여러 줄로 된 텍스트를 입력받을 때 사용한다.

  - 사용하는 속성은 cols(태그의 너비 지정), rows(태그의 높이 지정)이 있다.

   <textarea cols="너비" rows="높이">텍스트 작성</textarea>