a, list, form tag

남자김용준·2021년 9월 1일
0

HTML

목록 보기
2/4

하이퍼링크 태그

웹페이지를 이용하면서 어떤 버튼이나 텍스트를 클릭하면 다른 페이지로 이동하게 해주는 것이 a(anchor) 태그이다.

새 창으로 열어서 해당 페이지로 이동하려면 _blank 를, 현재 창에서 해당 페이지로 바로 이동하려면 _self 를 사용한다

리스트 태그

웹페이지에서 리스트를 작성할 때 ul 또는 ol이라는 리스트 태그를 연 후 그 안에서 li라는 태그를 열어 사용한다.

ul 태그와 ol 태그는 리스트 앞에 번호가 붙는지 붙지 않는지에 따라 구분한다. ul 태그를 사용하면 번호가 붙지 않고, ol 태그를 사용하면 번호가 붙는다.

form 태그

회원가입 등의 정보를 적을 때 사용하는 태그가 form 태그이다.

<form name="폼 태그 이름" method="데이터 전송 방식" action="정보를 보낼 주소"></form>

form 태그 안에 사용하는 여러가지 입력 태그가 존재한다.

input 태그

<input type="타입" name="입력 폼의 이름" maxlength="최대 입력 가능 글자 수"/>

type 속성은 값에 따라 입력 폼이 될 수 있고, 비밀번호 입력 폼이 될 수도 있다.
지원하는 type

  • text
  • password
  • checkbox
  • radio
  • button
  • file (파일 업로드)
  • search (검색어 입력 폼)
  • reset
  • submit
  • email
  • url
  • number
  • color
  • range 등등

placeholder는 input태그와 함께 사용할 수 있다. 입력 창에 어떤 내용을 입력해야 하는 지 알려주는 기능이다.

label 태그

label 태그는 input 태그와 짝을 이루어 사용한다. input 태그가 어떤 걸 의미하는 지 사용자가 볼 수 있는 명칭을 부여할 때 label 태그를 사용한다. input 태그의 id 값을 label 태그의 for 프로퍼티 값으로 사용하여 짝을 이룰 수 있다. 이렇게 일치시키면 label 태그를 클릭한 것만으로 해당 input 태그를 클릭하는 것과 같은 효과를 얻게 된다.

select 태그

select box를 만들 때 사용하는 태그로 select 태그 안에서 여러 개의 값을 표시하려면 value가 담긴 option 태그를 사용해야 한다.

<select name="birthMonth">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
profile
frontend-react

0개의 댓글