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) 학습소감
학교 컴퓨터가 별로 좋지 않아서 프로그램을 설치를 못하는데 이 강의를 보니 집에서 엄마에게 혼이 나는 한 깔아서 열심히 이것저것 다 해보겠슴다.
Author And Source
이 문제에 관하여(input타입의 종류, 각각의 타입별로 활용할 수 있는 HTML 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bae_seonghyun613/input타입의-종류-각각의-타입별로-활용할-수-있는-HTML-속성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)