반응형



◎ 테이블요소

▼ caption 표의제목

기본값이 표의 바깥 위에서 가운데 정렬 (표의크기에서)

<table> <caption>표의 제목</caption> </table>

summary 표의요약글

시각장애인 전용 속성

브라우저에 시각적으로 표현되지는 않음

표의양이 얼마인지 가늠도안되고 양이 방대하니 요약글을 먼저 듣고 넘길지 아님들을지 선택할수잇게 요약글을 넣어주는거다

<table summary="요약"> <caption>표의 제목</caption> </table>

<colgroup>,<col> 열의 그룹

<caption> 요소 다음에 위치함

첫번째 <col>요소는 표의 좌측 첫 번째 셀부터 적용됨

가로사이즈 (width)만 지정가능

<table> <colgroup> <col width="200px"> <col width="20%"> </colgroup> </table>

테이블 그룹 (thead , tfoot , tbody)

표는 유동적인 사이트로 관리하기위해서 (반응형)

그래서 표는 px보다 %로 입력해주는게 좋다

테이블의 행의그룹 thead -> tfoot -> tbody 순으로 제공

모든 행의 그룹을 제공하지 않아도 된다. - 콘텐츠의 구성에 따라 유동적으로 달라진다.

<thead> 에는 제목셀인 <th>만 제공할 수 있다.

<tfoot> <tbody> 에는 제목셀 <th>,내용셀 <td> 을 복합적으로 제공할수있다.

<table> <thead> <tr> <th>수강생 </th> <tr> </thead> <tfoot> <tr> <th>합계</th> <td>10</td> </tr> </tfoot> <tbody> <tr> <td>10</td> </tr> </tbody> </table>

tr , th , td

tr (table row = 행)

th (table header cell 제목셀)

기본 css : 가운데정렬 , 굵은글씨 , 세로 가운데 정렬

td (table data cell)

기본 css : 좌측정렬 , 세로 가운데 정렬 , 기본글씨


◎ rowspan , colspan

rowspan

<th> , <td> 병합. 병합하려는 첫 번쨰 행의 셀에 제공



colspan (column 의 약자)

<th> , <td> 병합. 병합하려는 첫 번쨰 행의 셀에 제공



반응형
반응형


◎ enctype 속성

<form>태그의 속성인 method, action, enctype 등은 입력받은 데이터를 어떻게 처리할 것인지 세부적으로 설정하는 데 사용된다. method는 전송 방식, action은 전송 목적지, enctype은 전송되는 데이터 형식을 설정한다.

▼ 내용

enctype 속성은 다음 세가지의 값으로 지정될 수 있다.

1. application/www-form-urlencoded

디폴트값이다. enctype을 따로 설정하지 않으면 이 값이 설정된다. 폼데이터는 서버로 전송되기 전에 URL-Encode 된다.

2. multipart/form-data

파일이나 이미지를 서버로 전송할 경우 이 방식을 사용한다. 그렇게 하지 않으면 웹 서버로 데이터를 넘길때 파일의 경로명만 전송되고 파일 내용이 전송되지 않기 때문이다. 그리고 이떄 메소드는 post값으로 지정해줘야 한다

3. text/plain

이 형식은 인코딩을 하지 않은 문자 상태로 전송한다.

request에 들어있는 데이터

<form action="/videos/upload" method="post" enctype="multipart/form-data"> <input type="file" id="file" name="videoFile" required="" accept="video/*"> <input type="text" placeholder="Title" name="title" required=""> <textarea name="description" placeholder="Description" required=""> </textarea> <input type="submit" value="Upload Video"> </form> /////////////////////////////////////////////////////////////////////////////////// //form 객체에 들어있는 데이터 enctype="multipart/form-data 아래는 NODE.JS로 객체확인 request.body = { title: 'abcd', description: 'efgh' }; request.file = { fieldname: 'videoFile', originalname: 'sidetoside.mp4', encoding: '7bit', mimetype: 'video/mp4', destination: 'videos/', filename: '1e8e29d1aa9431881308d7df174b4171', path: 'videos\\1e8e29d1aa9431881308d7df174b4171', size: 18667990 } /////////////////////////////////////////////////////////////////////////////////// // enctype="multipart/form-data 이 없을시 request.body = { videoFile: 'sorrynotsorry.mp4', title: 'abcda', description: 'efegfg' } request.file = undefined;

위 처럼 enctype가 있으면 type=file 인 input은 file의 대한 데이터를 request에 담는다.

enctype가 없으면 request에 file의 경로와 이름만 전송되고 file의 대한 데이터는 전송되지 않는다.




반응형

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - LIST 태그 (UL , OL , DL 태그)  (0) 2019.04.18
HTML4 - Table (테이블)  (0) 2019.04.16
HTML4 - Entity Code  (0) 2019.04.15
HTML4 - <IMG> 태그 , <a> 태그  (0) 2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그  (0) 2019.04.02

+ Recent posts