HTML 태그정리 - 2

Description List

• 사용 용도
  - 용어를 정의할때 사용하는 정의 리스트
  • Key-Value 형태로 제공하고 싶을때 사용
  • Description List를 사용하고 싶을때는 태그를 사용하여 알린다.
  • Description Term은 Key값에 해당. 태그를 사용한다.
  • Description Data Value값에 해당. 태그를 사용한다.

<dl>
  <dt>학습</dt>
  <dd>배워서 익힘.</dd>
  <dd>심리, 경험의 결과로 나타나는 비교적 지속적인 행동의 변화나 그 잠재력의 변화.</dd>
</dl>

Div & Span

HTML태그 안에서 아무 의미를 가지고 있지 않은 태그들이지만, CSS 작업을 해야할때 구분을 지어주기 위해 필요한 태그로서 의미가있다.

• div -> 문서안에 어디서든 위치 할 수 있다.
• span -> 텍스트안에 문장에 변화를 주고싶을때 span태그를 걸어 CSS에서 설정할 수 있다.
• 위 태그는 꼭 필요한 순간이 아니라면 지양하는것이 좋다.

Form - 기본구조

사용자로부터 Input값을 받기 위해 사용하는 태그
🔔Syntex Alert🔔

• Form의 필수 Attribute
  • action = "API주소"
  • method = "GET | POST"
• Form태그의 기본구조

  <form action="#" method=""> </form>

Form - Input

사용자에게 Input값을 받기 위해 생성하는 Field
🔔Syntex Alert🔔

• Input Attribute
  • type = "?"
• Type 종류
  • text - 기본 입력창
    - placeholder - 아무값도 입력하지 않았을때 기본적으로 보여주는 텍스트
    - minlength, maxlength - 입력할 수 있는 최소,최대길이
    - required - 필수로 입력해야 하는 태그
    - disabled - 블락처리
    - value - 초기값
  • email - 이메일을 입력할 수 있는 태그 @ 필수
  • password - 입력값이 보이지 않게 처리
  • url - url값을 입력할 수 있는 태그
  • number - 숫자만 입력받을 수 있는 태그
  • file - 파일을 업로드할 수 있는 태그
    - accept - 첨부할 수 있는 확장자명 설정

  <form action="#" method="GET">
  	<input type="text" placeholder="이름을 입력하시오." maxlength="5" 
           required value="홍길동"/>
    <input type="email" placeholder="이메일을 입력하시오." />
    <input type="password" placeholder="비밀번호를 입력하시오." minlength="5"
           maxlength="10"/>
    <input type="url" placeholder="url값을 입력하시오." />
    <input type="number" placeholder="나이를 입력하시오." />
    <input type="file" placeholder="파일을 업로드하시오." accept=".png,.jpg" />
  </form>

Form - Label

Input 태그에 id를 적어 Label을 클릭해도 Form이 선택되는 기능을 담당한다.

  <form action="#" method="GET">
    <label for="user-name">이름</label>
    <input type="text" placeholder="이름을 입력하시오." id = "user-name"/>
  </form>