반응형



◎ 테이블요소

​

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


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

​


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

'프로그래밍 > 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
반응형



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


​

◎ WEBPACK



▼ 내용

WEBPACK 이란 다양한 신기술? 등의 프로그래밍파일들을 웹페이지에서 호환되도록 변환해주는 번듈러이다. ES6 문법이라든가 SCSS 같은 파일들을 웹브라우저에서 읽을수 있게 ES5,CSS 로 변환시켜준다.

​

▼ 설치법

webpack,webpack-cli 설치

webpack : node 에서 webpack를 사용하기 위함.

webpack-cli : 터미널에서 webpack를 사용하기 위함.

npm install webpack webpack-cli

▼ extract-text-webpack-plugin 설치법

loader 를 사용하기위한 모음 엄마같은놈(?)

npm install extract-text-webpack-plugin@next //@ 뒤에 next는 최신버전(beta)으로 설치하기 위함이다. 만약 뒤에 버전 2.4 를 설치하면 버전 2.4를 설치한다. //이건 플러그인일 뿐이고 webpack.config 에 plugins: [new ExtractCSS("styles.css")] 를 써줘야한다

▼ loader 설치

npm install css-loader postcss-loader sass-loader node-sass babel-loader

▼ post css 의 추가 플러그인 과 그외 패키지 설치

npm install autoprefixer -------------- 사용법---------------------- const autoprefixer = require("autoprefixer"); { loader: "postcss-loader", //CSS의 호환성과 관련된걸 해결해줌 EX) IE 지원문법변환 options: { // options 라는 프로퍼티를 추가해서 함수를 만들어 배열로 리턴해준다 plugin(){ return [autoprefixer({browsers : "cover 99.5%"})]; } } } ----------------------------------------------------- npm install @babel/polyfill // 최신문법을 이해하게 도와주는 플러그인

​

▼ 실행방법

기존엔 Node 에서 npm run start로 하나만 실행하였다면 이제는 콘솔 2개로 하나는 start에 썻던걸 사용하고 하나는 webpack을 실행해야한다. 그러기 위해 아래 소스를 package.json 에 적용시켜주자.

"scripts": { "dev:server" : "nodemon --exec babel-node init.js --delay 2", "dev:assets" : "webpack" //"start": "nodemon --exec babel-node init.js --delay 2" },

그리고 그후 제일 상위에 webpack.config.js 란 이름을 만들어 환경설정을 해줘야한다. 만약 이 이름을 사용하지않고 다른 이름을 사용하려면.. 해당 config 의 파일 이름을 package.json 에 지정해줘야한다.

"dev:assets" : "webpack" --config [파일명]

webpack.config.js 는 서버코드를 작성하면안된다 오로지 클라이언트코드를 위한걸 작성해야한다

그렇기 때문에 wabpack.config.js 에는 ES6 문법또는 최신 문법을 쓰면 안된다. (EX: import 등)

조금더 자세한 설명은 webpack config 파일의 주석을 보시면되겠숨돠.

​

터미널에서 실행할때는

npm run dev:assets // CSS, JS 변환 실행 명령 npm run dev:server // 서버 실행 명령 // 결국엔 둘다 실행 1번 서버 2번 어셋

▼ webpack.config.js

const path = require("path"); const ExtractCSS = require("extract-text-webpack-plugin"); const autoprefixer = require("autoprefixer"); const MODE = process.env.WEBPACK_ENV; const ENTRY_FILE = path.resolve(__dirname,"assets","js","main.js"); //path.resolve 는 이전경로는 무시하고 맨 마지막 경로만 출력 ex) path.resolve('/a', '/b') // Outputs '/b' // 또한 path.resolve 는 항상 절대url 을 생성 그리고 이것을 만들기 위해 현재의 위치를 기본으로 사용 const OUTPUT_DIR = path.join(__dirname,"static"); //path.join 은 이전 인수까지 전부 출력 ex) path.join('/a', '/b') // Outputs '/a/b' //__dirname는 파일의 절대경로 const config = { entry : ["@babel/polyfill", ENTRY_FILE], //entry 는 파일이 들어오는곳 mode : MODE, module : { //module 이 의미하는건 module를 발견할떄마다 rules 라는 조건을 따르라고한다. rules: [//rules는 test의 정규식을 따른걸 만나면 use 를 사용한다. //rules는 특정 확장자의 파일을 브라우저가 이해할수있게 변환해준 역활을 한다 { test : /\.(scss)$/, use : [ { loader : 'babel-loader' //js es6 문법을 구식으로 바꿔줌 } ] }, { test: /\.(scss)$/, //확장자가scss 인파일을 찾는다. //정규식 시작은 /\ 로시작하며 마지막엔 $/ 로 끝난다 use: ExtractCSS.extract([ //use 의 plugin 은 내부에서 또다른 plugin을 사용하고있다. //그 이유는 scss 파일을 일반적인 css 파일로 통역해야한다 { //loader 란 건 기본적으로 webpack에게 파일을 처리하는 방법을 알려주는놈 loader: "css-loader" //이걸 사용해야 webpack 가 css를 이해한다 }, { loader: "postcss-loader", //CSS의 호환성과 관련된걸 해결해줌 EX) IE 지원문법변환 options: { plugins(){ return [autoprefixer({browsers : "cover 99.5%"})]; } } }, { loader: "sass-loader" //scss or sass 를 일반 css로 바꿔주는 plugin } ]) } // 원래대로라면 프로그래밍은 처음부터 차례대로 진행되지만 config 에선 거꾸로 작업을 한다. // 그래서 sass파일읽고 -> post.css 호환성변환 -> css변환 이렇게 순서적으로 처리하는 작업을 // 진행방향역순으로 loader를 써준다라 css로더 , 호환성변환 , sass 로더 를 사용한다 ] }, output : { //output 은 파일이 나가는곳 이다. output 은 객체여야 한다 path : OUTPUT_DIR, filename : "[name].js" //[name].[format]" 파일의 이름과 파일의 확장자,형식 이다. }, plugins: [new ExtractCSS("styles.css")] // use: ExtractCSS.extract 로 extract에 저장한 파일을 export 해준다 }; //entry 로 sass or scss 파일을 읽어서 css로변환해주고 그 변환된 파일을 output 으로 파일생성해준다. module.exports = config;

▼ pakage.json

{ "name": "wetube", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "@babel/core": "^7.3.4", "@babel/node": "^7.2.2", "@babel/polyfill": "^7.4.3", "@babel/preset-env": "^7.3.4", "autoprefixer": "^9.5.0", "babel-loader": "^8.0.5", "body-parser": "^1.18.3", "cookie-parser": "^1.4.4", "css-loader": "^2.1.1", "dotenv": "^7.0.0", "express": "^4.16.4", "extract-text-webpack-plugin": "^4.0.0-beta.0", "helmet": "^3.16.0", "install": "^0.12.2", "mongoose": "^5.4.20", "morgan": "^1.9.1", "multer": "^1.4.1", "node-sass": "^4.11.0", "npm": "^6.9.0", "postcss-loader": "^3.0.0", "pug": "^2.0.3", "sass-loader": "^7.1.0", "webpack": "^4.29.6", "webpack-cli": "^3.3.0" }, "devDependencies": { "eslint": "^5.16.0", "eslint-config-airbnb-base": "^13.1.0", "eslint-plugin-import": "^2.16.0", "nodemon": "^1.18.10" }, "scripts": { "dev:server": "nodemon --exec babel-node init.js --delay 2", "dev:assets": "webpack --mode development -w",// "build:assets" 는 내코드를 server 에 올려준다 // -w 를 붙이는 이유는 watch 란 뜻이다 css 파일을 수정할때마다 webpack을 다시 실행시키기 싫어서 써놧다 //webpack.config 파일을 수정할경운 다시실행해야한다 "build:assets": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC" } //"start": "nodemon --exec babel-node init.js --delay 2" //WEBPACK_ENV=development = webpack --mode 를 붙인 이유는 mode를 설정해주기 위해서

◎ WEBPACK - LOADER 부연설명

​

▼ POST CSS

POST CSS 를 통해서 Autoprefixer 을 사용하면 각각의 브라우저 별로 호환되게 바꿔준다

:fullscreen{ } ------------------------- :-webkit-:full-screen{ // webkit 은 safari , chrome } :-moz-:full-screen{ // -moz- 는 firefox } :full-screen{ }

▼ SASS 변수만들기

//Variables.scss $bgColor : red; $sexyColor : peru; //styles.scss body{ background-color: $sexyColor; color : $bgColor; } //이렇게 scss 는 변수를 사용할수 있다.

◎ PARCEL

​

▼ 내용

PARCEL 이란 WEBPACK 과 같은 모듈 번듈러이다. 다양한 신기술? 등의 프로그래밍파일들을 웹페이지에서 호환되도록 변환해주는 번듈러이다.

​

▼지원 파일

　●CSS

　●SCSS

　●Images

　●Babel

　●PostCSS

　●PostHTML

　●TypeScript

　●ReasonML/BuckleScript

　●ReasonReact

​

설치법은 CSS 메뉴에 POST-CSS , PARCEL 에 관한게 있다 그걸 참조.

​


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

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

NODE JS - pug(mixin) 사용법  (0) 2022.01.05
NODE JS - multer (파일 업로드)  (0) 2019.04.10
NODE JS - express URL 파라미터  (2) 2019.03.28
NODE JS - 데이터 압축하기,URL로 파일접근하기  (0) 2019.03.27
NODE JS - PM2 패키지 설치  (3) 2019.03.27

+ Recent posts

티스토리툴바