KMU
[웹클] Week 3 - 웹폼2
KMU/웹클라이언트 컴퓨팅2020. 4. 6. 12:40✔ 폼 요소의 종류
폼 요소들은 폼 태그 없이 사용 가능
주로 웹서버에 전송하지 않고 사용자의 입력을 받는것이 목적이라고 하면 사용
✔ 텍스트 입력
- <input type="text">
한 줄 짜리 입력 창
- <input type="password">
암호 입력 창
: 사용자 입력 문자 대신 '*'등 다른 글자로 출력
<input type="text|password"
name = "요소이름"
maxlength="문자개수"
size="문자개수"
value="초기텍스트">maxlength : 입력할 수 있는 문자의 최대 개수
size : 입력 창의 크기, 단위는 문자 개수
- <textarea>
여러 줄 입력 창
<textarea cols="열 개수"
rows="행 개수"
name="요소이름"
wrap="OFF|HARD|SOFT">
초기 출력될 텍스트
</textarea>cols, rows : 텍스트 입력창의 크기로 가로세로 문자 수 (영어를 기준으로)
wrap : 자동 줄바꿈 처리 지정
✔ 텍스트 입력 예제
<!DOCTYPE html>
<html>
<head>
<title>텍스트 입력 폼</title>
<body>
<h3>자기 소개서 작성</h3>
<hr>
<form>
이름 :<br> <input type="text" value=""><br>
암호 :<br> <input type="password" value="" maxlength="4"><br>
자소서 :<br> <textarea cols="30" rows="5">
이곳에 자기소개서 작성
</textarea>
</form>
</body>
</html>
✔ 데이터 목록을 가진 텍스트 입력 창, <datalist>
<datalist>
- 목록 리스트를 작성하는 태그, <option> 태그로 항목 하나 표현
- <input type= "text">에 입력 가능한 데이터 목록 제공
<!DOCTYPE html>
<html>
<head>
<title>텍스트 입력 폼</title>
</head>
<body>
<hr>
<form>
학과 : <input type="text" list="major">
<datalist id="major">
<option value="소프트웨어학부"></option>
<option value="경영학부"></option>
<option value="자동차공학부"></option>
</datalist>
</form>
</body>
</html>
✔ 텍스트 / 이미지 버튼 만들기
- <input type = "button|reset|submit|image" value = "버튼의 문자열"
- <button type = "button|reset|submit"> 버튼의 문자열 </button>
<input type="button|reset|submit|image"
name="버튼이름"
value="문자열"
src="이미지 URL">- value : 버틑에 출력되는 문자열
- src : type="image"인 경우에만 필요한 것으로 이미지의 URL
<button type="button|reset|submit"
name="버튼이름"
value="문자열"> 버튼 문자열이나 이미지 </button>
예제 ) 다양한 버튼 만들기
<!DOCTYPE html>
<html>
<head>
<title>버튼이 있는 입력 폼</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<form>
검색 : <input type="text" size="10" value="">
<input type="button" value="Q1">
<button type="button">Q2</button><br>
submit 버튼 : <input type="submit" value="전송1">
<button type="submit">전송2</button><br>
reset 버튼 : <input type="reset" value="리셋1">
<button type="reset">리셋2</button><br>
이미지 버튼 : <input type="image" src="logo.png"
alt="이미지 버튼">
<button type="button"><img src="logo.png" alt="이미지 버튼"></button>
</form>
</body>
</html>
✔ 선택형 입력 : 체크박스와 라디오버튼
- <input type="checkbox">
체크박스 만들기
-<input type="radio">
라디오버튼 만들기
name 속성 값이 같은 라디오버튼들이 하나의 그룹 형성
<input type="checkbox|radio"
name="요소 이름"
value="요소 값"
checked>- value : 폼 요소가 선택된 상태일 때, 웹 서버에 전송되는 값
- checked : 이 속성이 있으면, 초기에 선택 상태로 출력
예제) 체크박스 만들기
<!DOCTYPE html>
<html>
<head>
<title>체크 박스 만들기</title>
</head>
<body>
<h3>수강과목</h3>
<hr>
<form>
<input type="checkbox" value="1" checked>웹클라이언트 컴퓨팅<br>
<input type="checkbox" value="2">프로그래밍<br>
<input type="checkbox" value="3">네트워크<br><br>
</form>
</body>
</html>
예제) 라디오버튼 만들기
<!DOCTYPE html>
<html>
<head>
<title>라디오버튼 만들기</title>
</head>
<body>
<h3>먹고 싶은 것 하나만 선택?</h3>
<hr>
<form>
<input type="radio" name="china" value="1">짜장면<br>
<input type="radio" name="china" value="2" checked>짬뽕<br>
<input type="radio" name="china" value="3">탕수육
</form>
</body>
</html>
✔ 선택형 입력 : 콤보박스
<select>
- 드롭다운 리스트에 목록 출력, 목록을 선택하는 입력 방식
-<option> 태그로 항목 하나 표현
<select name="요소 이름"
size="개수"
multiple>
</select>- size : 콤보박스 창 크기(보일 수 있는 최대 항목 개수) 디폴트는 1
- multiple : 이 속서잉 있으면 다수 항목 선택 가능
<option value="옵션 값"
selected>
항목 문자열
</option>- value : 이 항목이 선택되었을 때 웹 서버에 전송되는 값
- selected : 이 속성이 있으면 초기에 선택 상태로 출력
예제) 콤보박스 만들기
<!DOCTYPE html>
<html>
<head>
<title>콤보박스 만들기</title>
</head>
<body>
<h3>먹고 싶은 음식은?</h3>
<hr>
<form>
<select name="china">
<option value="1">짜장면</option>
<option value="2" selected>짬뽕</option>
<option value="3">탕수육</option>
</select>
</form>
</body>
</html>
✔ <label>로 폼 요소의 캡션 만들기
- <label> 태그로 캡션과 폼 요소를 한 단위로 묶음
캡션 텍스트를 명료하게 하는 장점
2가지 방법
<label>사용자 ID : <input type="text">
</label><label for="loginID"> 사용자 ID:</label>
<input type="text" id="loginID">
예제) <label> 태그로 로그인 폼 만들기
<!DOCTYPE html>
<html>
<head>
<title>로그인 폼 만들기</title>
</head>
<body>
<h3>로그인 폼</h3>
<hr>
<form name="fo" method="get">
<label>사용자 ID : <input type="text" size="15" value="">
</label><br>
<label for="pass">비밀번호 : </label>
<input id="pass" type="password" size="15" value="">
<input type="submit" value="완료">
</form>
</body>
</html>
✔ 선택형 요소의 캡션을 <label>로 감싸기
캡션 텍스트나 이미지를 선택해도 폼 요소를 선택한것으로 처리
[웹클] Week 3 - 웹폼1
KMU/웹클라이언트 컴퓨팅2020. 4. 6. 10:08✔ 웹 폼
- 웹 페이지에서 사용자 입력을 받는 폼
- 로그인, 등록, 검색, 예약, 쇼핑 등
✔ 폼 요소
폼을 만드는 다양한 태그
- <input>, <textarea>, <select> 등
✔ 간단한 로그인 폼 예제
<!DOCTYPE html>
<html>
<head>
<title>로그인 폼</title>
</head>
<body>
<h3>로그인 폼</h3>
<hr>
<form name="fo" method="get">
사용자 ID : <input type="text" size="15" value=" "><br>
비밀 번호 : <input type="password" size="15" value=" ">
<input type="submit" value="완료">
</form>
</body>
</html>
✔ 폼 작성
폼 태그 <form> 태그로 둘러싸는 모양
- name 속성
폼의 이름 지정
- action 속성
폼 데이터를 처리할 웹 서버 응용프로그램의 이름
submit 버튼이 눌리면 브라우저는 action에 지정된 웹 서버 응용프로그램 실행 요청
웹 서버 응용프로그램은 Java, JSP, PHP, C/C++ 등 다양한 언어로 작성
- method 속성
폼 데이터를 웹 서버로 전송하는 형식
대표적인 전송 방식 : GET, POST
<form action="웹 서버 응용 프로그램의 URL"
enctype="데이터의 인코딩 타입"
method="GET|POST"
name="폼 이름"
target="윈도우 이름">
</form>
- action : 폼 데이터를 처리할 웹 서버 응용프로그램 이름 URL
- enctype : 폼 데이터를 웹 서버로 전송할 때 암호화 방식 지정
- method : 폼 데이터를 웹 서버에 전송하는 방식
- target : 웹 서버 응용프로그램으로부터 전송받은 데이터(HTML 문서나 이미지)를 출력할 윈도우 이름
[논회설] 200326 강의내용 정리
KMU/논리회로설계2020. 3. 26. 18:18✔ ASIC, FPGA 관련 시작
1.?
2.?
3. Circuit speed -> asic이 유리함
4. Design flexibility (debugging) -> fpga가 유리, 사실 2번이랑도 좀 연관있음
fpga를 프로그래밍 할 시 결과물이 binarycode가 아닌 선들의 list가 나온다.
compile or synthesize (합성) 이렇게 했을때 결과물은 fpga의 configuration에 관한 net들의 list가 나옴
✔ Digital Systems
디지털 시스템은 현실 세계와 소통
Cyber-Physical System (CPS)
다른 디지털 시스템들과 연결,,,
아날로그 -> 디지털
adc (sensor) / dac (actuator)
light sensor (cds)
microprocessor(컴퓨터임, ㅈㄴ 가볍, 아두이노라는 것들 Atmega 라는 칩 같은걸 사용해서 이용도로 사용)
이런 시스템에선 인지 - 판단 - 제어 3요소가 있음. 세상과 소통하는 컴퓨터 시스템은 이 세가지 관점에서 해석이 가능
자율주행 자동차도 이 세가지 관점에서 보고있음
이런 센서로 어쩌고 해서 보면 직관적임
Functional Description
램프가 켜져요 -> 언제? 어두운데 움직임이 감지되면
(신발장용)
✔ 서킷과, 마이크로 프로세서 구분
✔ 디지털 카메라를 만든대
1 ) microprocessor
2 ) custom circuits
3 ) custom circuits + microprocessor (store만)
read / compress / store 세가지중에
store은 circuit과 microprocessor 차이는 매우 적음
따라서 부분적으로 miroprocessor 사용
✔ Design Loop
ㅎ 복습해 이뒤로 강의안들음
[수치해석] 1주차 과제
KMU/수치해석2020. 3. 20. 14:57파이썬으로 배우는 머신러닝
~ 56p
✔ 머신러닝 :: 데이터에서 법칙성을 추출하는 통계적 방법의 하나
✔ 머신러닝 문제의 분류
- 지도 학습 문제 : 입력에 대한 적절한 출력 구하기
- 비지도 학습 문제 : 입력 정보의 특징 찾기
- 강화 학습 문제 : 마지막 결과(전체적인 결과)가 가장 좋은 행동을 찾는 문제
In/Out 예제 < 이거 어떻게 하라고 .............? ㅇㄴ 개귀찮
[웹클] 1주차 실습 과제
KMU/웹클라이언트 컴퓨팅2020. 3. 20. 14:39html5 기본 문서 만들기
<html>
<head>
<title>html5 첫번째 실습</title>
</head>
<body>
웹 클라이언트 컴퓨팅 1주차 실습 숙제입니다
</body>
</html>
실행결과
[웹클] 1-3. HTML5 프로그램 개발 과정
KMU/웹클라이언트 컴퓨팅2020. 3. 20. 13:56✔ HTML 언어의 역사
1990년 물리학자인 Tim Berners-Lee가 정의
표준화된 태그로 웹 페이지를 작성하는 언어
- <img>, <hr>, <table>, <lr> 등
✔ HTML, CSS, Javascript, 웹 브라우저의 타임 라인
✔ HTML5 표준과 의의
- HTML5 표준 제정
W3C와 하이퍼텍스트 워킹 그룹
- 표준에 담긴 내용
웹 페이지의 구조는 HTML5 태그로, 웹 페이지의 모양은 CSS3로, 웹 페이지의 행동은 javascript로 분리 개발
HTML 태그에서 문서의 모양과 관계된 태그나 속성 폐기
웹 페이지의 플랫폼이나 장치 의존성 제거
* HTML5로 개발된 웹 페이지나 웹 애플리케이션은 PC/모바일 등의 기기나, 운영체제에 관계없이 동일한 실행 확보
* Active-X, 플래시 필요 없음
문서 작성의 개념을 넘어 웹 애플리케이션 작성을 지원하는 자바스크립트 API 표준화
✔ HTML5 이전의 웹과 HTML5를 도입한 웹의 비교
✔ HTML5의 기능
- HTML5 전체 기능
웹 문서 작성을 위한 HTML 태그 셋
웹 애플리케이션 작성을 위한 API
- HTML5 기능 요약
웹 폼(Web Form)
오디오, 비디오
캔버스(Canvas)
SVG(Scalable Vector Graphic)
✔ HTML5 문서 편집
HTML5 문서 편집기
- 텍스트 편집기
메모장, 한글, 워드 등 아무 텍스트 편집기 가능
좋은 편집기 (Atom, Eclipse, Sublime Text ...)
.html인 텍스트 파일로 저장
텍스트의 기본 문자셋 UTF-8
* HTML 파일이나 CSS3, 자바스크립트 파일 모두 UTF-8 코드로 저장되어야 함
- WYSIWYG (What You See Is What You Get) 편집기
Adobe Dreamweaver, CoffeeCup, FCKeditor 등
HTML5 태그 정보 제공
출력되는 모습을 보면서 작성 가능
간단한 오류 체크
[웹클] 1-2. 웹 페이지 구성
KMU/웹클라이언트 컴퓨팅2020. 3. 20. 13:15✔ 페이지 소스 보기
✔ 웹 페이지 구성
웹 페이지 구성 3요소
- 웹 페이지의 구조와 내용 HTML
- 웹 페이지의 모양 CSS
- 웹 페이지의 행동 및 응용 프로그램 Javascript
웹페이지는 3요소를 분리하여 개발
✔ HTML, CSS, Javascript로 분리된 웹 페이지 만들기
1. HTML 태그로 문서의 구조와 내용 만들기
2. CSS 코드로 문서 모양 만들기
3. Javascript 코드로 사용자 인터페이스 처리
[웹클] 1-1. 웹개요
KMU/웹클라이언트 컴퓨팅2020. 3. 20. 11:51✔ 웹의 기본 목적과 구성
웹의 역사 및 웹이 사용되는 범위 등등 …
✔ 웹 서버와 웹 클라이언트로 이루어진 웹
웹 서버 - 웹클라이언트(브라우저)
인터넷엔 수많은 웹 서버가 연결되어 있고 이를 클라이언트로 서버에 보고자 하는 페이지 요청
✔ 웹 서버와 웹 클라이언트의 작동
인터넷에 있는 수많은 컴퓨터, 서버는 IP를 가짐
DNS 서버로 IP와 도메인 주소를 변환함
ex) kookmin.ac.kr -> 도메인 서버 -> IP주소 연결
✔ 웹 브라우저의 종류
내가 원하는 웹사이트를 볼 수 있도록 하는 도구
Chrome, IE, FireFox …
✔ 웹 브라우저의 시장 점유율 비교
데스크탑 Chrome / 모바일 Chrome % Safari (iPhone)
✔ 웹 페이지의 주소, URL
http://www.oracle.com:80/technetwork/java/index.html
프로토콜/서버주소:포트번호/경로명/경로명2/파일이름
프로토콜 : HTTP, https, file, ftp, telnet, mailto, news 등
서버주소 : 웹 페이지를 가진 컴퓨터의 인터넷 주소, IP주소 (도메인)
TCP/IP 포트 번호 : 서버가 브라우저로부터 접속을 기다리는 TCP/IP 포트 번호. 프로토콜마다 다르며, HTTP의 경우 80, telnet은 23
경로명 : 웹 서버 내 웹 페이지 파일의 폴더 경로
파일이름 : 웹 페이지의 HTML 파일 이름
위의 주소의 경우엔 index.html 문서 불러온 것
✔ 웹 브라우저와 웹 서버 사이의 통신, HTTP
1. 웹 클라 -> 웹 서버 연결 요청
2. 웹 서버 -> 웹 클라 연결 수락
3. HTML 페이지 요청 (클라 -> 서버)
4. HTML 페이지 읽기 (서버)
5. HTML 페이지 전송 (서버->클라)
6. HTML 페이지 해독 및 출력 (클라이언트)
이거 쓰면서 느낀점 > 웹 글자 졸라이상하다 웹우베베웹