'프로그래밍' 카테고리의 글 목록 (4 Page)

프로그래밍

HTML4 - LIST 태그 (UL , OL , DL 태그) 2019.04.18
HTML4 - Table (테이블) 2019.04.16
HTML4 - form 태그의 enctype 속성 (파일 업로드) 2019.04.16 3
HTML4 - Entity Code 2019.04.15
NODE JS - multer (파일 업로드) 2019.04.10

HTML4 - LIST 태그 (UL , OL , DL 태그)

2019. 4. 18. 13:04

◎ <li> 태그

▶ UL OL DL 의 각 리스트들을 li 로 표시한다

◎ <ul> 태그

▶ 비순서형 목록 Unordered List

▶ <li> 요소 마다 블릿이 제공됨 ( 블릿 : 특수문자)

▶ 연속으로 나열된 콘텐츠를 표현

▶ 순서가 정해져있지않아 홈페이지 대메뉴 또는 소메뉴 등이 적합하다.

▼ CSS 특징

왼쪽과 오른쪽 여백이 있다.

<ul> 과 <li> 사이에는 그어떤 문자도 태그도 올수가 없다. 와도 표현이 안된다 (ul 과 li 는 1set)

<li> 와 </li> 사이에만 사용할수 있고 li 와 li 사이에는 사용할수 없다.

<li>와 </li> 사이엔 다른 <ul> 이 올수도 있다.

ex)

<ul>
<li>
    <ul>
    <li>자유게시판1</li>
    <li>자유게시판2</li>
    <li>자유게시판3</li>
    </ul>
</li>
<li>길드홍보게시판</li>
<li>스크린샷</li>
<li>팬아트</li>
</ul>

<ul>
<li>자유게시판</li>
<li>길드홍보게시판</li>
<li>스크린샷</li>
<li>팬아트</li>
</ul>

◎ <ol> 태그

▶ 순서형 목록 Ordered List

▶ <li> 요소 마다 숫자 블릿이 제공됨

▶ 순위 또는 연속된 숫자의 리스트를 표현

▼ CSS 특징

왼쪽과 오른쪽 여백이 있다.

ol태그도 ul태그와 마찬가지로 ol과 li 사이에 다른태그는 올수없다.

또한 li태그 안에 또 ol과 ul 등의 리스트를 표현할수있다.

<ol>
<li>대마도여행</li>
<li>정글의법칙</li>
<li>슈퍼스타k</li>
<li>열혈강호</li>
</ol>

<ol>
<li>대마도여행</li>
    <ol>
    <li>1일차 비행기타기</li>
    <li>2일차 배타기</li>
    </ol>
<li>정글의법칙</li>
<li>슈퍼스타k</li>
<li>열혈강호</li>
</ol>

◎ 정의형 목록 태그

▶ <dl> 정의형 목록 지정 ( Defines a description List.)

▶ <dt> 용어 정의 (Defines Terms/names)

▶ <dd> 지정 정의 설명 (Describes each Term)

낱말 등 특정 단어를 정의할때 사용하는 요소 (국어사전 등)

제목 + 내용 형태로 범용적으로 사용하곤 한다.

▼ CSS 특징

dt는 있는그대로 나타나고 dd는 들여쓰기로 나타난다.

반드시 순서대로 표시 dl > dt > dd 무조건 3가지가 다 나타나야한다.

각 서로다른 태그 사이에는 ul ol 과 마찬가지로 다른태그를 넣을수는 없다.

<dl>
    <dt>웹</dt>
    <dd>=월드 와이드 웹 (Web)</dd>
    <dd>[명사]Web</dd>
    <dt>웹</dt>
    <dd>=월드 와이드 웹 (Web)</dd>
    <dd>[명사]Web</dd>
</dl>
//dt 두번 사용도 가능

저작자표시 비영리 변경금지

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

HTML4 - 온라인 서식 (FORM 태그) (0)	2022.01.05
HTML4 - Table (테이블) (0)	2019.04.16
HTML4 - form 태그의 enctype 속성 (파일 업로드) (3)	2019.04.16
HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02

HTML4 - Table (테이블)

2019. 4. 16. 17:15

◎ 테이블요소

▼ 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> 병합. 병합하려는 첫 번쨰 행의 셀에 제공

저작자표시 비영리 변경금지

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

HTML4 - 온라인 서식 (FORM 태그) (0)	2022.01.05
HTML4 - LIST 태그 (UL , OL , DL 태그) (0)	2019.04.18
HTML4 - form 태그의 enctype 속성 (파일 업로드) (3)	2019.04.16
HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02

HTML4 - form 태그의 enctype 속성 (파일 업로드)

2019. 4. 16. 17:13

◎ 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

HTML4 - Entity Code

2019. 4. 15. 13:11

◎Entity Code

특수문자를 특별한 코드로 표현

HTML의 문법도 특수문자와 동등하게 제공될경우 오류를 방지할 수 있음

nbsp: non-breaking space (스페이스바 1번 빈칸)
lt : less than ( < )
gt : greater than ( > )
middot : Middle dot ( )
amp : ampersand ( & )
quot : QUotation( " ) //따옴표는 없고 오로지 쌍따옴표만 된다.

&npsp; 는 띄어쓰기 역활을 한다 
html에 코드에 띄어쓰기 한칸은 표시가되나 그이상은 무시가되는데 
그럴경우 이 entity코드를 써주면 좋다

<br> 줄바꿈태크  엔터같은역활

<산.학.연>
남&여
철수가 말했다. "아 힘들어~"

---------------Entity Code-----------------------

&lt;산&middot;학&middot;&gt;<br>
남&amp;여<br>
철수가 말했다. &quot; 아 힘들어~ &quot;

저작자표시 비영리 변경금지

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

HTML4 - Table (테이블) (0)	2019.04.16
HTML4 - form 태그의 enctype 속성 (파일 업로드) (3)	2019.04.16
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28

NODE JS - multer (파일 업로드)

2019. 4. 10. 10:05

◎ multer 설치

multer 는 파일 업로드할떄 파일의 url을 편하게 뽑아주는 middleware다.

▼ 설치

npm install multer

◎ 파일 업로드 예제

upload.html

<input type="file" id="file" name="videoFile" required="" 
           accept="video/*" enctype="multipart/form-data">

router.js

import {uploadVideo} from "../middlewares";
import { postupload } from "Controller";

videoRouter.post("/upload",uploadVideo,postupload);
//파일이 업로드될 기본 경로

middlewares.js

const multerVideo = multer({ dest : "uploads/videos/"}); 
//업로드될 파일의 기본경로

export const uploadVideo = multerVideo.single('videoFile');
//single 는 오직 하나의 파일만 upload 할수 있는걸 의미
// single 안에있는 이름은 html에서 video태그의 name 이다
//multer 가 알아서 dest의 경로에 업로드를 해준다

controller.js

export const postupload = async (req,res) => {
    const { file : {path} } = req;
    res.redirect(routes.videoDetail(newVideo.id));
};

▼ 내용

HTML 에서 인코딩타입을 꼭 multipart/form-data 로 맞춰줘야한다. 그리고 FORM 을 보내면 ROUTER에서 받아서 middlewares.js의 함수를 실행후 controller.js의 함수 를 실행한다. 파일 업로드는 middlewares에서 끝나는거라 사실상 컨트롤러함수에서는 리다이렉트말곤 하는게 없다.

저작자표시 비영리 변경금지

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

NODE JS - Github 으로 로그인하기 (passport) (0)	2022.01.05
NODE JS - pug(mixin) 사용법 (0)	2022.01.05
NODE JS - WEBPACK 설치와 사용법 (0)	2019.04.10
NODE JS - express URL 파라미터 (2)	2019.03.28
NODE JS - 데이터 압축하기,URL로 파일접근하기 (0)	2019.03.27

PREV 1 2 3 4 5 6 7 ···13 NEXT

아빠개발자의 노트