HTML 2일차 - description list, blockquote, form, input

정의 목록(description list)
   1. 용어 정리 시 사용

   2. key-value로 정보 제공 시
          
관련 태그

    dl - description list <dl> </dl>
    dt -  " term(key) <dt> </dt>  
    dd - " data(value) <dd> </dd>
    dfn - "  definition   dt의 의미를 좀 더 구체적으로 쓰려고 할 때 사용
             <dfn> </dfn> 
         
          - <dt>
                 <dfn> ABC </dfn>
             <dt>

        ->즉, dd 태그 안의 내용은 dt의 내용을 설명

주의 - dt 혼자서 따로 놀면 문법상 오류
              예) <dl>   --- x
                        <dt> ABC </dt>
                        <dd> abc </dd>
                        <dt> ㄱㄴㄷ </dt>
                    </dl>

                   
         - dl의 자식 요소로는 dt, dd만 올 수 있음
              cf> div 태그는 dt, dd 태그를 감싸는 용도로 사용 가능 - 같은 뜻으로 사용

         - dt, dd는 반드시 dl의 자식요소로 존재해야

         - 스크린리더의 경우는 <dt>와 <dd>가 1:1일 때
           쓰는 것이 사용자의 이해를 보다 쉽게 함

         - dl 태그를 여러 번 쓰는 건 자중.... 
           스크린리더 사용자의 불편함 야기시킬 수 있어

     dl, dd, dt 공부하면서 참고했던 사이트들
            https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/dl-dt-dd-.

            https://velog.io/@raram2/dl-dt-dd%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%93%B0%EB%8A%94-%EA%B1%B8%EA%B9%8C



인용(quotation)
    - blockquote (q보다 더 사용)
         - 내용 전체가 하나의 인용문일 경우 사용
         - 예) <blockquote cite="http~~~" - 인용문의 출처> 
                     우리가 겪을 수 있는 가장 아름다운 체험은 신비다. 
                     신비는 모든 참 예술과 과학의 근원이다.
                     <cite> 알버트 아인슈타인</cite> - 저자를 
                </blockquote>


q - 짧은 길이의 인용구 정의할 때 사용
 
         - 사용 시 따옴표 생성함

         - q 태그에서 cite 속성 역시 인용된 출처 명시


div, span 
 
       - 스타일링할 때 div, span으로 요소 묶음
       - 차이점)
             div - block level element
             span - inline element


form 태그
 
     - 기본 양식 : <form action = "" method="GET">
     - 사용자에게 정보를 제공받기 위해 사용
     - 속성
            - action
                  - form에서 받은 정보를 처리해줄 수 있는 URL 작성(API 주소 작성)

            - method
                  - GET : 일반적인 경우       
                  - POST : 중요한 정보 & 정보의 양이 많을 때


input 태그

       - 기본 양식 : <input type=" ~ " >
              1. text - 일반적인 문자 입력받음
                      <input type="text" placeholder="이름을 입력하세요">

              2. email - 이메일을 입력받음
                      <input type="email" placeholder="이메일을 입력하세요">

              3. password - 비밀번호 입력받음
                      <input type="password" placeholder="비밀번호를 입력하세요" minlength="8">

              4. url - url 입력받음
                      <input type="url" placeholder="github 주소를 입력하세요">

              5. number - 숫자 입력받음
                     - min, max : 받는 숫자의 최솟값, 최댓값 설정
                            예) min="12" max="20" - 12~20까지의 숫자만 입력 가능
                    <input type="number" placeholder="나이를 입력하세요" min="18">

              6. file - 파일 입력받음
                      - accept : 받는 파일 형식 제한
                            예) accept=".png, .jpg" - png, jpg 파일만 첨부 가능
                     <input type="file" accept=".jpg, .png">

       - 공통 attribute
                - placeholder : 기본적으로 보여 줄 input 내부의 text

                - maxlength = "13" 
                             - 13자 이상 입력 불가

                        - minlength = "5"
                              - 5자 이하 입력 불가

                        - required
                               - 사용자가 반드시 입력해야 함

                        - disabled
                               - 사용자가 사용 불가능

                        - value = "~"
                               - 예) <input type="text" value="2022"> - 입력칸에 2022 미리 입력됨
                               - 기본적으로 value 값 입력