[DAY49] UI 구현 능력단위 평가, 서블릿 연습문제(5개)
- 작업형 평가 : 만들 파일 1개, html, css, js 다 넣은 후 zip으로 압축해서 제출하기
(LMS가 html 첨부가 안됌-> 압축해서 제출하기)
- 50점
- 구두 발표 : -> 서술형 문제로 (태그를 답안으로 입력하면 실제 html 구성요소로 바뀌어서 제출되어서 답안이 없어지는 형식으로 되어서 : 코드가 싶으면 다 '화면 캡쳐'해서 '붙여넣기'해서 제출하기)
=> 소스코드 제출 : 캡쳐해서 제출
=> 설명적어야 하는거면 : 직접 입력해서 제출하기
- 50점
(2.구두발표 먼저 하기 -> 1. 작업형 평가 하기)
(디자인은 제일 '마지막'에 풀기)
(html 뼈대 살려서 기본형태 제출 -> javascript event 문제 작업하기 -> css 내용 제일 마지막에 풀기)
(css는 전체 배점 15점 됨)
(css : 10개 중 5개 이상만 맞으면 됨)
1.구두발표
-내답안
2) 표준 이벤트 모델
3) 인라인 이벤트 모델
<답>
피드백 : 로그인 폼을 작성할때 input type=radio 요소도 form 태그 내부에 두어야 하는데 form 태그 외부로 벗어났습니다. 태그를 만들때
<div><section></section></div>처럼 부모-자식 관계가 명확해야하는데
<div><section></div></section>처럼 부모-자식 관계가 깨진 부분이 있습니다.
인라인 이벤트를 작성할때 버튼이 아닌 div 태그에 이벤트를 작성했습니다. 서브밋이 안된 이유는 타입이 submit이 아닌 버튼을 사용했기 때문입니다. 타입을 submit으로 변경하고 이벤트를 onsubmit이벤트로 변경해야 합니다.
2.포트폴리오
1) 기능(HTML)
(1) 전체 내용을 div로 묶으시오. '로고 이미지'를 header 태그에 배치하시오. '로고 이미지' 아래부터 '로그인 버튼'까지 section 태그에 배치하시오. 나머지 영역은 모두 footer태그에 배치하시오
(2) '로고 이미지'를 클릭하면 학원 홈페이지로 이동하도록 처리하시오.
a태그와 submit 태그를 이용해서 처리하시오. 로고 이미지는 학원 홈페이지에서 찾아 넣으시오.(https://www.gdu.co.kr/main/main.html)
(3) '회원구분을 위해서 체크해 주세요'의 오른쪽에 있는 '수강생'과 '일반회원' 텍스트를 클릭해서 input type=radio를 선택할 수 있도록 label태그를 활용하시오.
(4) '로그인 버튼'을 클릭하면 입력한 아이디와 비밀번호를 post 방식으로 submit할 수 있도록 처리하시오. action 속성값은 "/"로 작성하시오.
(5)'회원가입 버튼'과 '아이디/비밀번호 찾기 버튼'을 클릭하면 비어 있는 링크 'javascript:void(0)'**으로 이동하도록 처리하시오.
javascript:void(0)
: a태그의 href속성에 사용하는 경우, 이는 클릭했을 때 아무 동작도 하지 않는 빈 하이퍼링크를 만드는 것을 의미한다. "회원가입"이라는 텍스트는 사용자에게 클릭 가능한 링크처럼 보이지만 실제로는 아무런 동작도 수행하지 않는다.
-> 이러한 패턴은 종종 JavaScript 이벤트 핸들러와 함께 사용되고, JavaScript코드가 클릭 이벤트를 감지하고 사용자 지정 동작을 수행하도록 설계되니다. 예를 들면 "회원가입"리읔를 클릭하면 모달창이나 팝업 폼을 표시하거나 다른 사용자 상호작용을 시작하는데 사용될 수 있다.
POST 방식
- HTTP 프로토콜을 통해 데이터를 서버로 전송하는 방식 중 하나, 주로 웹 폼(form)을 통해 사용자가 입력한 데이터를 서버로 보낼 때 사용한다.
(1) 보안 : POST요청은 데이터를 요청 URL에 노출시키지 않고, HTTP 요청 본문(body)에 담아 전송합니다. 이는 사용자의 민감한 정보를 안전하게 서버로 보낼 수 있도록 도와준다.
(2) 데이터 양 : POST 요청은 GET요청과 달리 데이터 양에 제한이 없다. 따라서 큰 양의 데이터를 서버로 보낼 때 주로 사용된다.
(3) 대상 리소스의 변경 : 주로 서버에 어떤 변경을 요청하거나 새로운 데이터를 생성하기 위해 사용된다.(ex) 로그인 폼에서 사용자 이름과 비밀번호를 POST로 서버에 전송하여 인증을 요청할 수 있다.
(4) 캐싱 : POST요청은 보통 브라우저에 의해 캐싱되지 않는다. 따라서 브라우저가 이전 요청의 결과를 캐시하여 재사용하지 않는다.
div, span 태그 영역 설정의 차이
- div(블록요소 : 자동줄바꿈, 전체 넓이 100%차지-> default) : 박스형태로 영역이 설정되고 그 안에 정렬됨(div는 width, height크기 지정이 가능)
- span(인라인요소 : 자동줄바꿈 x,태그 내의 다른 엘리멘트 혹은 콘텐츠가 차지하는 영역만큼만 차지) : 줄 단위로 영역이 설정되기 때문에 배경색의 길이가 달라짐(지정 x)
p태그와 a태그 차이
- p태그(paragraph) : 문단(paragraph)을 정의하는데 사용, 문단은 일반 텍스트를 구조적으로 나누는데 도움을 줌, 블록 수준 요소(block-level element)로 취급
- a태그(anchor) : 앵커(anchor)을 정의, 주로 하이퍼링크를 생성하는데 사용, 사용자를 다른 웹 페이지로 이동하거나 같은 페이지 내에서 다른 위치로 스크롤하는데 사용, href 속성을 통해 하이퍼링크의 대상 URL 지정한다.
login_css
1) 디자인(CSS)
(1) 모든 구성 요소 : box-sizing은 border-box사용, padding과 margin은 0으로 지정, font-family는 Malgun Gothic, sans-serif
(2) a태그 초기화 : 밑줄 없음, 글자색 #000000
(3) 입력 요소 너비: 480px 이내, body 태그 전체 배경색 : #F5F6F7
(4) '아이디 입력란'과 '비밀번호 입력란'테두리색 : #007700
(5) '로그인 버튼' 배경색 #007700, '회원가입 버튼' 배경색 #007777, '아이디/비밀번호 찾기 버튼' 배경색 #007777
(6)
margin: 0 auto 뜻 : 가로 중앙 정렬을 설정
-> CSS를 사용하여 요소의 가로 중앙 정렬을 설정하는데 사용되는 스타일 속성, 가로 방향으로 가운데 정렬된다.
-> 0: 위쪽과 아래쪽 여백을 0으로 설정합니다. 세로 방향의 여백은 없습니다.
padding: 106px 0 53px :
-> header 요소의 안쪽 여백(padding)을 설정한다. 여백은 상자 모델(box model)에서 내용(content)주위에 적용된다. 세 개의 값이 있고 각각 위쪽(106px), 오른쪽(0), 아래쪽(53px), 왼쪽을 나타낸다. 여백은 시계방향으로 설정되고 오른쪽 여백은 0으로 설정되어 있고, 가로 방향으로는 여백이 없다
-> 106px와 53px로 설정되어 있으므로 상단과 하단에 각각 106px와 53px의 여백이 적용된다.
text-align: center : 텍스트의 가로 정렬을 설정
-> header내의 텍스트를 가로로 가운데 정렬한다. 텍스트가 중앙에 위치하게 된다.
login_html
login_js
value와 class 차이
- class : HTML요소에 CSS 스타일을 적용하거나 JavaScript를 통해 요소를 선택 및 조작할 때 사용, 여러 요소가 동일한 스타일을 공유하거나 특정 그룹의 요소를 선택하기 위해서 클래스를 할당한다.
- value : 주로 HTML 폼 요소에서 사용자가 입력한 데이터나 선택한 옵션을 나타내는 값을 설정하거나 가져올때 사용, 사용자가 입력한 값을 서버로 제출하거나 JavaScript를 사용하여 가져올 수 있다.
<input>, <textarea>, <select> 와 같은 폼 요소에서 사용-> class는 스타일링 및 선택 및 조작에 사용, value는 사용자 입력 데이터나 옵션 값을 나타내는데 사용
-> class는 스타일링을 위해 사용, value는 사용자가 선택한 회원 구분을 나타냄
1.
응답 : ul태그(목록태그 만들어서 뿌려주기)
-> 가입하기 누르면 servlet으로 가서 정답을 만들게 됨
2.
-> 계산을 눌렀을때 9,1,5 모두 세개의 데이터가 넘어가서
-> servlet이 태그를 만듦
-> 여기다가 script만들기
-> script태그, javascript태그 만들면 됨
-> alert창 띄우기
3.
-> servlet 에서 script태그만들고 안에다가 javascript넣기
-> builtin object찾아서 오늘날짜, 시간 찾기
4.
-> servlet은 자바니까 가운데서 만든 것 가지고 파일 만들수 있음(Buffered file)
-> 파일 이름 : 작성자,제목 쓰기
-> 나머지 내용: 파일의 내용들 쓰기
-> 입력한 내용이 어디로 들어가서 사용되는지
*1~4번 : submit으로 처리하면 됨
5. 번역(ajax)
-대상언어 : 한국어,일본어,영어
-> 번역버튼 누르면 바로 결과가 나옴
submit은 다른곳으로 가서 화면을 새로 만드는 것
ajax 요청해서 번역결과만 가져와서 번역 결과만 뿌림 : 화면 그대로 내용만 바뀌는것
-> 자바시간에 파파고 코드있음(네이버 파파고 - 코드 가져다가 붙이기)
10월13일 평가(★★★중요)
