input타입의 종류, 각각의 타입별로 활용할 수 있는 HTML 속성

1) 학습한 내용
input타입의 종류, 각각의 타입별로 활용할 수 있는 HTML 속성

input타입의 종류, 각각의 타입별로 활용할 수 있는 HTML 속성에 대해 설명

ex) 네이버 로그인 화면
<.label for="name">이름<//label>
<.input type="text" id="name" placeholder="이름을 입력하세요.">

<.label for="mail">메일<//label>
<.input type="email" placeholder="이메일을 입력하세요." id="mail">

<.label for="pw">비밀번호<//label>
<.input type="password" placeholder="최소 6글자, 최대 12글자" id="pw">

*password = 비밀번호 노출 방지

사용자 정보를 받을 때 (필수입력정보)
*form태그 사용.

<.form method="post">
<.label for="name">이름<//label>
<.input type="text" id="name" placeholder="이름을 입력하세요." required
minlength="2" maxlength"8">

(2글자 이상 8글자 이하 입력, 8글자 이하의 글자만 인식 그 이상 인식x)

<.label for="mail">메일<//label>
<.input type="email" placeholder="이메일을 입력하세요." id="mail" required>

<.label for="pw">비밀번호<//label>
<.input type="password" placeholder="최소 6글자, 최대 12글자" id="pw" required>
minlength="10" maxlength"15">
<.button type="submit">제출<//button>
/form>

숫자을 입력할때 사용
<.<.label for="num">숫자<//label>
<.input type="number" id="num" placeholder="숫자만 입력"> min="10" max="40" step="5">

*min="10" 숫자가 시작되는 최초단위10
max="40" 최대 숫자단위
step="5" 숫자가 5씩 증감소

파일 업로드할때 사용
<.label for="upload">파일 업로드<//label>
<.input type="file" id="upload" accept="image/png">

*accept (어떤 파일의 확장명 지정)="image/png(jpg, gif 등 다른 이미지파일은 업로드 못함)"
**accept="image/png, image/jpg, image/gif"> (이렇게 하면 업로드 가능)

체크박스(복수) 사용
<.label for="n1">한국<//label>
<.input type="checkbox" id="n1" name="country" value="한국">
<.label for="n2">일본<//label>
<.input type="checkbox" id="n2" name="country" value="한국">
<.label for="n3">중국<//label>
<.input type="checkbox" id="n3" name="country" value="한국">

*name="country" 체크한 항목에 대해 서버에 전달할 때 알려주는 역할 (그룹팅)
value="한국" 서버에게 전달되는 데이터
*value="" 속성값을 입력하지 않을 시 빈 데이터가 전송

단일체크
<.label for="n1">한국<//label>
<.input type="radio" id="n1" name="country" value="한국">
<.label for="n2">일본
<.input type="radio" id="n2" name="country" value="한국">
<.label for="n3">중국<//label>
<.input type="radio" id="n3" name="country" value="한국">

*사이트 접속 시 처음부터 한국 체크되어있으면 좋겠다 (체크박스복수도 사용가능)
<.label for="n1">한국<//label>
<.input type="radio" id="n1" name="country" value="한국" checked>

텍스트에어리어
<.label for="content">문의내용<//label>
<.textarea id="content" cols="40" rows="8"><//textarea>

*cols 텍스트에어리어 넓이. 한줄에 최대몇글자까지 입력
**rows 글자를 기준으로 하여 최대 몇줄까지 입력
(그 줄을 넘어갔을 시 형태는 유지하되 자동으로 스크롤 생성)

셀렉트옵션에 대해 (각각의 항목들을 묶어서)
<.select name="job">
<.option slected disabled>직업을 선택해 주세요.<//option>
<.option velue="학생">학생<//option>
<.option velue="회사원">회사원<//option>
<.option velue="기타">기타<//option>
<//selcet>

*seleted가 들어가려면 옵션값만 존재만 해야함.

표를 만들 때 사용되는 HTML태그
<.table>
<.caption>상품 정보<.caption>
<.thead>

 <tr>
        <th>상품</th>
        <th>색상</th>
        <th>가격</th>
 </tr>

<,theda>
<.tbody>

 <tr>
        <td>맥북 16인치</td>
        <td>그레이</td>
        <td>3,000원</td>
 </tr>
 <tr>
        <td rowspan="2">아이패드 프로 12인치</td>
        <td>레드</td>
        <td>3,000원</td>
 </tr>
 <tr>
        <td>아이패드 프로 12인치</td>
        <td>블루</td>
        <td>3,000원</td>
 </tr>

*rowspan="2"상품명이 같고 색상이 다를 시 병합하는 방법

테이블 하단에 들어가는 정보 기입 tfoot>

공간을 만들때 사용되는 태그
header>

 <h1>
          <a href="#">
              <img>
          </a>
 </h1>
 <nav>
      <ul>
          <li><a href="#"메뉴3</a>
          <li><a href="#"메뉴3</a>
          <li><a href="#"메뉴3</a>
      </ul>
 </nav>

본문에 해당하는 태그

*role 꼭 넣기
article 정보가 들어가는 공간
*aside 메인 바깥에서 작성
**footer 웹사이트 가장 하단에 들어가는 것
***div 설계도면의 표기하기 힘든 임의의 작은 구역을 설정
**form사용자한테 어떠한 정보를 담아내는 공간

main role="main">

section>

      <h2>Service</h2>
 </section>section>
      <h2>Portfolio</h2>
 </section>  
 <article>
      <h2>Artilcle title</h2>
      <p>Nice to meet uuuuuuuu</p>
 </article>

<.aside> <.footer> <.div>

HMTL 영역에서 가장 중요
Inline / Block
<.spen>Inline
<.spen>Inline
<.spen>Inline

<.h1>Blcok
<.h1>Blcok
<.h1>Blcok

2) 학습내용 중 어려웠던 점
어려웠던 점은 딱히 없었던 것 같았고 강의 설명이 좋아서 이해하기 쉬웠습니다 뭐 조금 말하자면 강의가 엄청난 집중력을 발휘해야 이해하기 쉽다는 점,,?

3) 해결방법
집중력을 발휘하기 위해 박카스나 몬스터를 복용해야겠다는 생각이 들었습니다....

4) 학습소감
학교 컴퓨터가 별로 좋지 않아서 프로그램을 설치를 못하는데 이 강의를 보니 집에서 엄마에게 혼이 나는 한 깔아서 열심히 이것저것 다 해보겠슴다.