국비지원학원/HTML,JavaScript,jQ

67일차-HTML_div tag

초코맛 2019. 1. 27. 00:32
반응형
-영역 태그(주로 CSS와 함께 쓰임)
  • <div> : 브라우저의 전체영역을 나눌때(web page의 전체 디자인을 설정할때  쓰게됨)
    • 전체 틀을 잡을 때 주로 사용
    • 기본넓이가 브라우저의 100%

      <!-- border를  속성으로 줄수 있는 태그가 아님, 눈으로 볼 수없다=>인라인 방식으로  스타일.. --> 

      <div>a</div>      a
      <div>a</div>      b
      <div>a</div>      c
  • <span> : 데이터가 있는것 까지만 영역을 나눌 때
    • 데이터를 출력해야하는 영역을 잡을 때
    • 기본 넓이는 데이터의 넓이
      <span>a</span>              abc
      <span>b</span>
      <span>c</span> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>영역을 나누는 태그</title>
</head>
<body>
<!-- div는 전체 영역을 나눌 때 :web page의 전체 디자인을 설정할때  쓰게됨 -->
<div style="border: 1px solid #333">1</div>

 

<!-- border를  속성으로 줄수 있는 태그가 아님, 눈으로 볼 수없다=>인라인 방식으로  스타일을? -->
<div>2</div>
<div>3</div>
<!-- span 데이터의 영역을 나눌 때 :특정 영역을 지정하고 값을 변경  할 때 -->
<span style="border: 1px solid #333">1</span>
<span style="background-color:#FFFF00">2</span>
<span>3</span>
</body>
</html>


*web 1.0 : 집단 지성 X, 전문가 그룹으로 신뢰성up, 응답이 느림, 모든 상황에 대해 응답할 수 없음
*web 2.0 : 집단 지성 O, 사용자 그룹으로 신뢰성은 떨어지지만 응답이 빠르고, 모든 상황에 대해 응답가능

*HTML Form Control
  • HTML에서 제공하는 객체로 사용자가 입력하는 값을 받을 수 있는 객체들 이다.
  • <input>,<select>,<textarea>
  • HTML5 에서 다양한 <input> 속성이 추가 되었다.(Explorer에서 대부분 안된다.)
*<input>      
  • 공통속성
    • <input type="" name="이름" readonly="readonly" disabled="disabled"
      • server로 전송하기 위한 방식이 get방식과 post방식이 있는데,
      • =>readonly는 값을 수정할 수 없고, 값을 서버로 전송가능한것.          <<따라서 인터넷의 대부분 readonly>>
      • =>disabled는 값을 수정할 수 없고, 서버로 전송할 수도 없다.
    • <input type="text"(한줄만 입력가능하면서 크기가 정해진 textbox?) size="보여지는 크기(대문자A기준이나 크게차이x)" maxlength="최대 입력 글자수"  value="초기값|서버로 전송할 값(클릭했다고 사라지지 않는다)" placeholder="보여질 메세지_값을 넣는순간 사라진다.(텍스트창의 hint?같은 존재)" />
    • <input type="password(***로나오는 textfield)"~(이뒤는 같다)/>
    • <input type="radio(자바의 라디오버튼과같음)" name="이름" value="서버로 전송할 값(보이진않고)" checked="checked(선택된상태)"/>
      • <<위와다르게 적힌 외의 다른 속성들은 사용할 수 없다.>>
      • <<보여질 값(보여지는 값과 서버로 전송하는 값은 전혀 상관/관련이 없다. 남자가 보여져도 m 이 전송될수 있음>>
    • <input type="checkbox(생각하는 그 체크박스..싱글?멀티?)"~(이뒤는 같다)/>
  • 눈에 보이지 않는 객체
    • <input type="hidden(사용자에게 보여지지않고 서버로 값을 전송 할 때_제일 유용함..골때린거 처리해쥼)" name="이름" value="전송할 값"/>
      • <<제일 잘 만들었다고 볼 수 있다>>
  • 이미지를 보여주려면
    • <input type="image" src="이미지 경로" name="이름"/>
      • <form> tag안에 있으면 전송의 기능을 한다(제출submit의 기능이 있어 잘 쓰지 않는다.)
  • 파일전송할 때(파일선택버튼?을만들어 놓으면 알아서 파일다이어로그가 뜬다)
    • <input type="file(접속자의 HDD를 열어보기때문에 보안이슈가 있어, 문제가 발생할 수 있어 javascripte에선 사용하지 않는다.)" name="이름"/>    <<안됨>>
  • 전송 할 때 (전송 버튼)
    • <input type="submit" value="버튼의 라벨"/>      <<전송기능을 가짐>>
  • 취소 할 때 (취소 버튼) 
    • <input type="reset' value="버튼의 라벨"/>         <<초기화 기능을 가짐->원래 페이지가 로딩되었던 상태로 돌아간다.>>
  • 버튼 모양
    • <input type="button" value="버튼의 라벨"/>     <<버튼 모양을 만들어 주는것으로 제일 많이 사용한다. submit, reset잘 안씀>>
<<form태그 안에 들어가 있어야 일을 한다?>>

*select(콤보박스)
  • <select size="보여 줄 옵션 수" name="이름">
    • <option value="서버에 전송할 값" selected="selected">사용자에게 보여질 값</option>
    • ......
  • </select>
*textarea
  • <textarea name="이름" cols="컬럼의 수" rows="행의 수">보여질 값</textarea>


<<<<<<<<<<<<<<<<<<<<<<<<<<<숙제1,숙제2>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>숙제1</title>
</head>
<body>
<table border="1" cellspacing="0">
 <tr>
  <td background="../common/images/sist_logo.jpg" rowspan="5" width="150" align="center">사진</td><td colspan="4" align="center" height="40">이력서</td>
 </tr>
 <tr>
  <td width="100">이름</td><td width="200">ooo</td><td width="100">이메일</td><td width="400">park@gmail.com</td>
 </tr>
 <tr>  <td>전화번호</td><td></td><td colspan="2"></td> </tr>
 <tr>  <td>주소</td><td colspan="3"></td> </tr>
 <tr>  <td>상세주소</td><td colspan="3"></td> </tr>
</table>
<hr/>
<table border="1" cellspacing="0">
 <thead>
 <tr>
  <th width="100">년</th>  <!-- 950 -->
  <th width="60">월</th>
  <th width="60">일</th>
  <th width="580">학력 및 자격사항</th>
  <th width="150">발령청</th>
 </tr>
 </thead>
 <tbody>
 <tr>  <td height="30"></td><td></td><td></td><td></td><td></td> </tr>
 <tr>  <td height="30"></td><td></td><td></td><td></td><td></td> </tr>
 <tr>  <td height="30"></td><td></td><td></td><td></td><td></td> </tr>
 <tr>  <td height="30"></td><td></td><td></td><td></td><td></td> </tr>
 <tr>  <td height="30"></td><td></td><td></td><td></td><td></td> </tr>
 <tr>  <td height="30"></td><td></td><td></td><td></td><td></td> </tr>
 <tr>  <td height="30"></td><td></td><td></td><td></td><td></td> </tr>
 <tr>  <td height="30"></td><td></td><td></td><td></td><td></td> </tr>
 </tbody>
 <tfoot>
 <tr>
  <td height="30"></td><td></td><td></td><td colspan="2" align="right">상기 사항은 사실임&nbsp;&nbsp;&nbsp;&nbsp;</td>
 </tr>
 </tfoot>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>숙제2</title>
</head>
<body>
<table border="1" cellspacing="0">
 <tr>
  <td width="150" rowspan="2" colspan="2" align="center">
  업무일지<br/><br/>2019년 1월 25일
  </td><td width="20" rowspan="2">결재</td>
  <td width="80" align="center">계</td>
  <td width="80" align="center">과장</td>
  <td width="80" align="center">차장</td>
  <td width="80" align="center">부장</td>
  <td width="80" align="center">이사</td>
  <td width="80" align="center">대표이사</td>
 </tr>
 <tr>
  <td height="80"></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 <tr>
  <td></td><td colspan="6" align="center">업무 내용</td><td colspan="2" align="center">담당</td>
 </tr>
 <tr>
  <td height="200" width="20">금일실시사항</td>
  <td colspan="6" valign="top">
  <ol type="1">
  <li>요구사항정의서 작성</li>
  <li>DB ERD 작성(관리자,사용자)</li>
  <li>테이블 설계서 작성</li>
  <li>UI설계서(관리자 part) 작성</li>
  </ol>
  </td>
  <td colspan="2" align="center">ooo</td>
 </tr>
 <tr>
  <td height="200">진행일 예정사항</td>
  <td colspan="6" valign="top">
  <ol type="1">
  <li>내일은 쉽니다.</li>
  </ol>
  </td>
  <td colspan="2" align="center">ooo</td>
 </tr>
 <tr>
  <td height="12">비고</td><td colspan="8"></td>
 </tr>
</table>
</body>
</html>



 
반응형
저작자표시

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

69일차-CSS  (0) 2019.01.30
68일차-HTML Form Control  (0) 2019.01.29
67일차-HTML_table tag  (0) 2019.01.26
66일자-HTML Tag  (0) 2019.01.25
65일차-HTML  (0) 2019.01.24

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글67일차-HTML_div tag

관련글

티스토리툴바