반응형

◎ <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
반응형



◎ 테이블요소

▼ 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
반응형


◎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;


반응형
반응형



◎ 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에서 끝나는거라 사실상 컨트롤러함수에서는 리다이렉트말곤 하는게 없다.



반응형

+ Recent posts