본문 바로가기
Coding/HTML

HTML - upload

by z쿳쿳z 2020. 5. 7.
728x90
반응형

hidden filed

 - 눈에 보이지 않지만, 서버 쪽으로 데이터를 전송할 때 사용

보이지 않지만 hide에 보낼 url에 표시

 

 

label

 - text에 이름표를 붙여 주는 방식, html은 코드를 설명하기 때문에 label을 써서 명확하게 구분 해주기 위해 사용하는 것이 좋다.

  *<label for = " "> name 값과 for 값을 일치 시켜 주어야 한다.

  *text를 클릭하면 input 입력값을 선택할 수 있다.

위에 2가지 코드는 같은 동작을 하며, 표현방법이 다르다. 다만, label을 붙일 부분을 전체를 감싸든지 아니면 label for와 label을 붙일 곳에 id를 같게 해야 한다

 

 

파일 업로드

 - 파일을 서버로 전송하는 방식

Iframe(보안에 취약)

 – 외부의 컨텐츠를 웹페이지 삽입 할 때 많이 사용

 - 출처가 의심되는 사이트를 가져 왔을 때, 악성코드가 실행 될 수 있다.

 - 보안을 할 수 있는 방식이 필요

   <iframe src = “http://opentutorials.org” width = ”500” height = ”500” sandbox></iframe>

  *sandbox는 html5부터 악성코드가 실행 될 수 없도록 javascript가 실행이 안됨)

 

동영상 삽입(유튜브)

 - 유튜브(소스복사 embed)(공유)복사

 - 코드를 카피해서 코딩을 넣는다.

 - <iframe src = “” ></iframe>

 

동영상 삽입(html5 버전에 추가된 태그)

 <video width=“400” controls>

 <source src=“videos/small.mp4”>

 </video>

 - 웹브라우저 마다 동영상을 지원하는 확장자가 다르다(mp4, ogv 등등), 따라서 코딩에 확장자 별로 동영상 코딩을 해주면, 웹브라우저에서 선호하는 동영상으로 재생 가능함.

  *width는 동영상의 크기

  *controls는 재생, 소리 등등의 기능들을 사용할 수 있게 해주는 속성

 

viewpoint(모바일, 태블릿 같은 작은 화면에서 작동할 수 있는 기능)

 - <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

  *initial-scale은 줌 기능.(1.0은 1:1로 나타냄)

728x90
반응형

'Coding > HTML' 카테고리의 다른 글

HTML - 삽입 및 전송  (1) 2020.05.07
HTML - 설명 및 tag  (1) 2020.05.07