[수업 D-22 ] HTML, CSS)Form Tag,
2020.08.11(화) 5주차 2일
1. 화면디자인
|
c.html 0) w3c 표준 안에선 사실 프로그램과 현장에선 바디프레임 밖에 스타일을 따로 만들어놓는 것을 선호한다. (바디내에서 스타일을 주는 인라인 방식을 선호하지 않는다.) (예: border의 테두리는 1만 허용하는 점 등) |
2. Form tag
|
1) 클라이언트 : 번호, 이름 ; 에서 데이터를 넘김 웹서버(자바) DB 2) meta : 정보를 담아 두는 곳
|
|
get 방식 : <form action="#" method="get"> (1) 이름에 Kroea 치고 전송, 그러면 주소는 d.html?irum=Korea# 이되고 그 값을 가지고 감 (2) id="id"인 element를 위해 <label 을 부여한다. (3) 즉, 입력한 아이디와 비번이 주소창에 뜨는 등 보안에 문제가 있고 다량의 메세지를 보낼 수 없는 한계(넘어가는 데이터의 제한)가 있다. Host방식 : <form action="#" method="post"> (1) 보안이 강하고, 대량의 데이터를 보낼 수 있다.
|
|
5) 오류의 종류 <form action="server_d.jsp" method="get"> #을 server_d.jsp로 바꾸었더니 오류 404가 뜸
server_d.jsp 자바를 숨기면 jsp, 자바가 보이면 servlet 자바와 HTML이 공존함 를 알아보자! |
3. CSS
selector 를 이해해야 Jquery에서 안 헤맨다.
|
웹 화면의 스타일을 담당한다.
1) w3c : 웹 표준안을 담당하는 기관 e_style.html Html/css 55번 css 요약 목록 2) |
|
인터널 방식 <style type="text/css"> h1 {font-family: 궁서; color: blue} </style> <body> <h1>인터널 방식</h1> <h2>표제태그</h2> <h1>반가워</h1> (1) h1 태그들은 다 이 영향(궁서체에 파란색 적용)을 받는다 (2) 우선순위는 인라인>인터널 (3) 클래스는 중복을 허용하나 ID는 중복을 허용하지 않음 .c1 {font-size: 40px; font-family: 돋움 serif, "Times new Roman"} 돋움이 없으면 Times new Roman서체를 써라 (4) id는 유일해아한다 클래스는 중복가능, |
|
external 방식 css 폴더> a.html 과 b.html 이 동일한 서식(동일한 스타일)이 필요하다. css 파일을 통해 서식을 만들어, 동일한 폼의 웹을 구현할 수 있다. class css에서 주로 사용 # , 아 class구나 id 자바 스크립트에서 주로 사용 (2) css 파일 만들기 new- other css file (3) 색을 표현하는 다양한 방법 padding: 5px 10px; border-top:1px solid #ff0000; border-bottom:1px dashed blue; } input { border:5px double rgb(255,255,0); background-color: rgb(0%, 100%, 0%); (4) 클래스와 아ㅣ디 부모와 자식 table tr td table tr td{ padding: 5px 10px; border-top: 1px solid /* >>> 가는 실선 */ #ff0000; border-bottom:1px dashed skyblue; } 동일한 급, strong, i : , 을 잘 보기 strong, i { font_size 26px; color: red; } <span>kbs</span> <i>sbs</i> input#good 아이디 input.btnOk{ 클래스 class="btnOk" |
|
/*동적선택지 */ 웹에서 탭을 누르면 반응하는 느낌...? input:focus{ background-color: yellow; }
|
|
Btag <div><b id="hi">div-b id:hi tag</b></div> <div><b class="hi">div-b class:hi tag</b></div> div b 조상 후손 div > b 부모자식 b{font-size: 8px;} div b{font-size: 16px;} div > b{font-size: 24px;} div span b{font-size: 32px;} div > span > b{font-size: 40x;} div b#hi{font-size: 48px;} div b.hi{font-size: 64px;} (7) lyout
2. 배운 내용 |
※ 오늘 배우고 느낀 것
1.
2.
3.