HTML - Input / Semantic
JAVA(자바), Python(파이썬) 기반의
AI 활용 응용 소프트웨어 개발자 양성 과정
찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요
31일차 수업
========복습========
웹의 구조
클라이언트(사용자, 크롬)의 요청 » 서버(공급자, 톰캣) 응답
클라이언트가 원하는 페이지를 요청하면 서버는 미리 준비된 페이지를 보여줍니다 서버에서 미리 준비된 페이지를 만들기 위한 수업!
웹페이지의 구조
HTML : 웹페이지를 만들기 위한 구조 담당
CSS : 웹페이지에 만들어진 구조를 꾸미는 스타일, 디자인 담당
JavaScript : 웹페이지에 만들어진 구조에 대한 기능 구현 담당
======== 끝 ========
31일차 수업
Input type attribute value
text : text 입력
password : password 입력, 입력값을 *로 표시함
radio : 같은 name의 radio 선택지 중 하나만 선택 가능
checkbox : checkbox
file : 파일 첨부
button : button
submit : 브라우저에서 사용자가 입력한 값을 서버로 전달
reset : 사용자가 입력한 태그 내의 값들을 초기화
Input attribute
name : input 태그의 이름, 보통 이름이 같으면 같은 기능을 하도록 구현
- 이 태그들을 클라이언트에서부터 서버, DB까지 옮길 때 쓰는 이름
value : input 태그에 담긴 기본 값
placeholder : 안내 메시지
readonly : 읽기 전용
size : input 창 크기 조절
maxlength : 입력 최댓값
disabled : 사용불가
accept : file type과 함께 사용할 시 입력받는 파일의 확장자 초기 값을 정할 수 있다 image/* 대표적
textarea
여러 줄 입력, 시작 태그와 종료 태그 안에서는 무조건 text 치환해서 적용
<textarea rows="“3”" cols="“10”">기본 내용</textarea>
select
선택지 태그
<select name="“fruit”">
<option selected="“selected”">선택해주세요</option>
<!-- 초기값 설정 -->
<option value="“apple”">사과</option>
<option>배</option>
<option>감</option>
<option>오렌지</option>
</select>
fieldset
input tag 요소들을 한 곳에 모아주는 역할
<fieldset style="“width:100px;”">
<legend>회원가입</legend>
<!-- 필드셋의 제목을 정해주는 태그 -->
<input type="“text”" />
<input type="“password”" />
</fieldset>
label
input 태그들의 요소와 아닌 요소들을 묶어줄 때 사용하는 태그
- 사용자가 해당 텍스트를 클릭할 경우
<input id="“man”" type="“radio”" name="“gender" />
<label for="“man”"> 남자 </label>
form
웹 페이지에서 사용자가 입력한 데이터들을 하나의 큰 요소로 모으는 태그
- 서버에 사용자의 입력값을 하나씩 보내는 것이 아니라 묶어서 보냄으로써 효율성 증대
id, class, name
서버와 통신할 때 사용하는 속성
서버 통신은 물론 CSS, JS 등을 이용해 id, class, name을 선택 후 value에 넣어서 사용
id : 모든 태그의 유일한 값
class : 태그의 기능 별로 묶는데 사용
name : 태그의 기능 별로 묶는데 사용
layout
공간을 보기 좋게 배치하기 위한 작업
semantic tag
<header>전체 문서의 header</header>
<nav>navigation bar</nav>
<main>
웹페이지의 main
<section>
<article></article>
</section>
</main>
<aside></aside>
<footer>꼬리말</footer>