input type, 테이블 병합

[공지]
2/15(화)
- 요구사항 확인(평가) : 14:30~15:20
- 미대면 상담(설문지) - 개인톡으로 답변
* 모두의 HTML...(PDF)다운 용량은 100MG(흑백으로)
- 타인에게 배포 금지(불법)

[복습]
form태그 <form name='  ' method='  ' action='  '> 
- 역할 : 서버에게 값을 전달하기 위해 쓰인다
- 특징 : 하나의 페이지에서 여러 개 사용 가능하지만 중첩 사용은 불가(form 태그 안에 form 추가가 불가)
- method
a. post : 전달 값이 보이지 않으며 길이 제한이 없다
b. get : 전달 값이 보이며 길이 제한이 있다






<input type='checkbox' name='parameter 이름' value='서버에 전달 될 값'[checked]/>
- n개 중에 n개를 선택할 때 
  name값이 동일하면 그룹이 생성
- 서버에 값이 전달 될 때는 체크된 요소만 전달
- checked 속성을 사용하여 기본적으로 체크되도록 한다
ex) -<input checked type='checkbox' name='등산' value='hobby'>
- value는 서버로 전달되는 값으로서
   화면에 표시 될 값 "제목"(<label>제목</label>)이 반드시 동일 할 필요는 없다
- 속성은 순서가 없다
ex) <input name='' value='' type=''> 이렇게도 가능->회사가면 욕 먹으니 가능하면 정석대로
- 체크 된 항목만 서버에 전달이 된다





<input type='file' name=''[multiple] accept='파일의 종류'>
- accept='audio/*', 'video/*', 'image/*'->audio file만 video file만 image file중에서 찾는다

ex)<input type='file' name='photo' multiple accept='imag/*'>
- image파일중에서만 찾을 수 있다






<input type='submit'/>->"제출" 버튼 생성
<input type='reset'/>->"초기화" 버튼 생성
- 초기화 버튼을 누르면 입력값이 지정된 value값으로 초기화된다
<input type='button' value='버튼'/>->"버튼" 버튼 생성

*<input type='buton'>에 value값을 주지 않으면 버튼이 생성되지 않는다
type='reset','submit'은 value값을 주지 않아도 되지만 sumbit은 value값을 반드시 생성해야한다





<input type='text' name='test' value='hong'/>
<input type='search' name='findStr'/>
- 출력 : 입력상자가 생성된다
- 차이점 : type='search'는 입력상자 옆에 'x'표시가 생겨서 한꺼번에 값을 삭제 할 수 있다
- name에 지정된 값을 parameter라고 하며 반드시 있어야한다

ex)
<input type='search' name='mid' value='a1234'/>
- 서버로 넘어 갈 때는 mid=a1234로 인식하며 value값은 안써도 무관(하지만 name은 반드시 있어야한다)

*search는 인터페이스 측면에서 pc보다는 모바일 환경에서 많이 쓰인다




<input type='email' name='' value=''/>
- UI는 search와 text처럼 똑같이 입력상자가 생성
- 일부 모바일 브라우저에서는 이메일 입력에 최적화된 키보드 표시된다


*내 컴퓨터 ip주소 찾을 때 : emd창에 "ip config" 검색




<input type='rang' min='최소값' max='최대값' value='현재값'/>
- 마우스로 조절 할 수 있는 슬라이드 바 형태의 막대기가 생성
- 값이 보이진 않는다 




<input type='number' name='score' min='0' max='100' step='5' value=''/>
- 0~100사이 d(간격)=5인 숫자 중에서 선택 가능한 선택 창이 생성
- 위 아래의 버튼 조작이 쉽지 않다
- 임의의 값을 입력 할 수 있다


<input type='date' name='' value='2022-02-14'/>
- 달력을 만들어주는 태그
- 초기값은 value
- 날짜가 선택 가능하다



<input type='time' value='11:42:01'/>
- 시계를 만들어주는 태그
- 초기값은 value
- 시간이 선택 가능하다




<input type='color' value='#000ff'/>
- 색상 코드값을 선택해서 보여주는 창과 색상이 나온다

*type=date, time,color는 HTML5에서 지원하는 내용




<textarea cols='넓이' row='행수' name=''/>초기값</textarea>
- 메모 할 수 있는 박스가 생긴다
- 시작태그와 끝태그를 반드시 따로 작성해야 한다
- 시작태그와 끝태그 사이의 값은 초기값이 된다
- 입력값은 html 태그의 속성은 나타나지 않는다
- 반드시 붙여서 써야한다 띄어쓰기도 모두 초기값으로 들어가기 때문이다
ex)
"<textarea cols='넓이' row='행수' name=''/>초기값
</textarea>"
->이런식으로 쓰면 안된다
- 박스 안에 있는 문자들은 무조건 텍스트가 된다
- 여러 줄을 집어 넣을 수 있는 태그이다
- cols, row는 CSS를 사용하여 높이, 넓이 지정하는것이 일반적이다






<select name='' multiple size='표시항목 갯수'>
- 항목들을 펼쳐서 보여주는 태그
   <option value=''selected>표시 항목</option>
</select>
-----------------------------------------------
ex)<select name='job' size=3 multiple>
      <option value='학생'>학생</option>
      <option value='농업'>농업</option>
      <option value='상업'>상업</option>
      <option value='공업'>공업</option>
      <option value='서비스업'>서비스업</option>
      <option value='공무원'>공무원</option>
</select>
- 표시 항목(학생, 농업, 상업, 공업, 서비스업, 공무원)을 선택 할 수 있는 창이 나온다
- size와 multiple 속성을 생략하면 콤보박스(Combo box)형태로 나온다

*콤보박스(Combo box) : data를 선택할 수 있도록 목록을 볼 수 있는 창




<input type='url' list='list_id'/>
<datalist id='list_id'>
       <option value='' label='label'>text</option>
</datalist>
--------------------------------------------------
ex)<input type='url' list='hompage'/>
<datalist id='hompage'>
     <option value='http://www.jobtc.kr' label='강사카페'/>
     <option value='http://www.google.com' label='구글'/>
     <option value='http://www.naver.com' label='네이버'/>
     <option value='http://www.daum.net' label='다음'/>
</datalist>
- 검색창에 검색 또는 선택하고 해당 항목을 클릭하면 내용(url주소)이 보인다






<details>
    <summary>간략메모</summary>
     컨텐츠 내용...
</details>
- 항목을 감추었다가 클릭하면 나타내는 컨텐츠 내용을 표시
- 아직까지는 브라우저 특성을 많이 탄다
----------------------------------------------------------
ex)
<details>
   <summary>웹 프로그래밍 과정</summary>
   <h1>프로그래밍이란?</h1>
   <div>
   컴퓨터 프로그래밍(영어: computer programming) 또는 간단히 프로그래밍(programming, 문화어: 프로그램 작성) 혹은 코딩(coding)은 하나 이상의 관련된 추상 알고리즘을 
   특정한 프로그래밍 언어를 이용해 구체적인 컴퓨터 프로그램으로 구현하는 기술을 말한다.
   [1] 프로그래밍은 기법, 과학, 수학, 공학, 심리학적 속성들을 가지고 있다.
  </div>
</details>





<meter min='' max='' value=''/>
- prgress와 매우 유사
- 현재 상태를 표시해주는 게이지 막대 표시가 나온다
- 상태변화는 되지 않는다



<progress max='' value=''/>
- 현재 상태를 표시해주는 게이지 막대 표시가 나온다
- 상태변화는 되지 않는다



<optgroup>
- select 태그 안에서 항목들을 묶어주는 html5 추가 기능
--------------------------------------------------------
ex)
<select name='full' size='10'>
         <optgroup label='1.HTML'>
            <option value='1장'>1장</option>
            <option value='2장'>2장</option>        
         </optgroup>
         <optgroup label='2.CSS'>
            <option value='3장'>3장</option>
            <option value='4장'>4장</option>
         </optgroup>
</select>






<table/>
   <tr>
      <td>열</td>
   </tr>
</table>
- 화면 layout을 구성하기 위한 목적으로 사용되서는 안된다
- 표로 표현되는 데이터들을 위해 사용한다
- <table>태그를 만들 때 대부분 '행'이 우선이며 <tr>에 의해 만들어진다
- tr-행, td-열
-------------------------------------------------------------------------
ex)<table border='1' width='300px' height='100px'>->border는 가장자리를 나타내며, 가장자리의 두께 크기를 표현한다
  <tr align='center'>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr align='right'>
     <td>C</td>
     <td>D</td>
  </tr>
  <tr align='center'>
     <td align='left'>E</td>->세부적 지정(우선권)
     <td>F</td>
  </tr>
</table>


th : table header
a. 굵은 글자체
b. 자동으로 가운데 배치



table 병합
a. 행 병합(rowspan)
<table border='1' width='300px' height='150px'>
   <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
   </tr>
   
   <tr>
      <td>A</td>
      <td>B</td>
      <td rowspan='3'>C</td>   
   </tr>
   
   <tr>
      <td>F</td>
      <td>G</td>     
   </tr>   
</table>
 ---------------
결과
H1  H2  H3
A    B    C
D    E
F    G


b. 열병합(colspan)
ex)<table border='1' width='300px'>
   <tr>
      <th>H1</th>
      <th>H2</th>
   </tr>
   
   <tr>
      <td>A</td>
      <td>B</td>
   </tr>
   
   <tr>
      <td>C</td>
      <td>D</td> 
   </tr>
   
   <tr>
      <td colspan='2'>E</td>   
   </tr>   
</table>
--------------------------------
결과
H1     H2
A       B
C       D
E



Audio
구현 방법 : <audio src='./audio/test.mp3' controls></audio>

- autoplay
a. 고심해서 사용해야한다(거의 사용금지)->페이지가 로딩되면서 "자동실행" 된다
 1)때문에 장애가 발현이 되면 소송이 걸릴 수 있다
 2)종료, 중지기능이 반드시 있어야한다->소송걸림

- preload

- controls : 제어가능

- loop : 반복재생

- src : 파일의 위치





Video
구현 방법 : <video src='../video/test.mp4' 
controls width='400px' height='300px'></video>

- autoplay, preload, controls, loop, src
- width, height

- poster

- muted




CSS를 작성하는 3가지 방법
a. 인라인 방식 : HTML문서 안에 <style>태그를 사용하여 적용하는 방식
ex)<div style='color:#00f; border:2px solid #aaf; background-color:#eef;'>이해선</div>
    <div style='color:#00f; border:2px solid #aaf; background-color:#eef;'>홍길동</div>
    <div style='color:#00f; border:2px solid #aaf; background-color:#eef;'>일지매</div>

- 중복코드가 많이 발생한다
- 가독성이 떨어진다
- solid : 실선
- border : 외곽


b. 인터널 방식 : HTML태그 안에 style 속성을 사용하여 적용하는 방식
ex)<style>
/*internal type*/
div.internal{
   color: #00f;
   border:2px solid     #aaf;
   background-color  :  #eef;
}
</style>
<div class='internal'>이해선</div>
<div class='internal'>홍길동</div>
<div class='internal'>일지매</div>

- div. ==> div 태그에 있는 class
- p. ==> p 태그에 있는 class
- div.internal ==> div 태그 중에/클래스가/internal(=div/./internal)
- "div중에서 class가 internal속성의 글자 색깔, 바탕색 등을 집어넣는다"
- id는 무조건 1개이며 #으로 시작한다=>id=#myname일 때 id가 myname인 요소
- class는 '.'으로 시작한다=>class=.myname일 때 class가 myname인 요소
*class=.a, id=#a로 사용 할 수 있을까?=>OK

c. 익스터널 방식 : CSS파일을 생성하여 HTML문서와 연동시키는 방식(제일 많이 쓰인다->중복제거
ex)@charset "UTF-8";
/*external type*/
div.external{
color:#f00;
border:2px dotted #f44;
background-color:#fee;
}->css파일 생성

<div class='external'>이해선</div>
<div class='external'>홍길동</div>
<div class='external'>일지매</div>


<link rel='stylesheet' type='text/css' href='../css/declare.css>
- rel='stylesheet'->명령어 태그
- type='text/css'->옵션(=문서가 text파일(눈으로 볼 수 있는 파일)로 이루어져 있으며 그 내용은 css코드이다)
- href='../css/declare.css'->외부에서 가져 올 파일의 위치


*파일은 연결하는 개념은 같지만,
<a href>태그->파일로 이동
<ilnk>태그->밖에 명시된 파일을 가져온다


----------------------------------------------------------------------
[시험공지]
요구사항 분석에 따른 usecase작성법
클래스 다이어그램
시퀸스 다이어그램

개발 모델의 장단점
문항수 : 4(서술형)