<iframe width="1280" height="720"
src="https://www.youtube.com/embed/-iuX3r8PSzU"
frameborder="0" allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>-배속
document.getElementsByTagName("video")[0].playbackRate = 2.5;<브라우저에 따라 지원하는 것이 다름>
코덱
녹화를하면 얻는 원본영상
포멧
코덱을 담아 재생가능한 플레이어와 제공되는 것
- 여러줄 한번에 수정
-> ctrl+ alt+ 방향키아래
-
로컬
단점: 트래픽 확장 어려움, 서버 확장 어렵고, 들어오는 트래픽 제한 (대역폭bandwidth 문제), 정전(클라우드 서버 같은 경우 UPS)
장점: 비용 저렴(전기세+ 인터넷) -
클라우드
단점: 비용
장점: 서버확장 쉽다, 이전 쉽다, IP 할당 받거나, 도메인 연결하기 쉽고, HTTP 인증도 쉽다
Server: 서빙(24시간 돌아가는 컴퓨터, 대부분 IP 연결)
Web Server: 정적 파일을 서빙(PHP와 같은 프로그래밍언어도 처리하긴함)
App Server: 두뇌 역할
DB: 데이터 저장(이미지와 같은 경우엔 이미지 경로만 저장 이미지는 보통 스토리지에 저장 )
API Server: 카페에 카운터 직원 커피를 내릴필요는 없음(예를 들어 윈도우 API reference 책)
Forms
-> 기본정보를 입력하는 영역
- Form의 속성
- action: 입력 값을 전송할 페이지를 나타냄
- method: 폼의 데이터를 전송할 방법 정의
- get: URL로 데이터 전달할 때 사용(file같은 큰파일은 전송X, id 및 pw 같은 민감데이터전송 X)
- post: 파일 올리거나 보안이 필요한 데이터 전송할 때 사용 (주소에 입력내용 나타나지 X) <form action="012.html" method="get">
<input type="text" name="id"/>
<input type="password"/>
<button type="submit"></button>(속성 목록)
- type: 태그모양 지정
- name: 태그 이름 지정
- readonly: 읽기만 가능하게 지정
ex) 주민등록번호 입력했을 때 성별값이 자동으로 들어가는 것
- maxlength: 최대 글자 수 지정
- minlength: 최소 글자 수 지정
- required: 필수 태그 지정
ex 약관 동의)
- autofocus: 웹페이지 로딩되면 지정한곳으로 포커스바뀜
- placeholder: 입력할 값에 대한 힌트 줌
- pattern: 정규표현식 사용하여 특정범위내 유효한값 입력 받을 때 사용- label: 시각장애인 분들도 form사용할 수 있게 하기 위해 사용
(for 속성)
-> label의 for속성값과 form의 id값이 같아야한다.``` <label for="fullname">이름: </label> <input type="text" name="name" id="fullname"/> ``` - 회원가입 radio 예제
<h1>회원가입</h1>
<!-- name이 통일되면 택1로 바뀜-->
<form action="signin" method="get">
<label for="man">남</label>
<input type="radio" name="성별" value="man" id="man">
<label for="mab">여</label>
<input type="radio" name="성별" value="man" id="woman">
</form>- select
multiple ="multiple"
-> 다중선택 가능 - option 속성들
-> value 속성을 사용하여 선택값에 따라 서버에 어떤값을 전송할지 설정 - fieldset
-> 자식 요소로 사용되는 폼 컨트롤들을 그룹화 할 수있음
- fieldset과 legend의 예제 - input vs botton
버튼 요소가 인풋요소보다 스타일을 적용하기 수월하다.
::after ::before 같은 가상요소도 적용가능
Tabular data
- table
ex)
<!--table>(tr>td*4)*4-->
<table>
<caption>테이블 설명~</caption>
<thead>
<tr>
<th>통장</th>
<th>예금액</th>
<th>이자율</th>
<th>계좌번호</th>
</tr>
</thead>
<tbody>
<tr>
<td>농협</td>
<td>20억</td>
<td>2.2%</td>
<td>111</td>
</tr>
<tr>
<td>신한</td>
<td>30억</td>
<td>2.3%</td>
<td>222</td>
</tr>
<tr>
<td>국민</td>
<td>40억</td>
<td>2.4%</td>
<td>333</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>통합잔고</td>
<td colspan="3">90억</td>
<!--rowspan은 위아래 합침-->
</tr>
</tfoot>
</table>
<!--colgroup 지정해서 col 꾸며줄 수있다.-->
<table>
<caption>
이 table은 영국에서 최초로 시작되어 일년에 한바퀴 돌면서...
</caption>
<colgroup>
<col class="구분" />
<col class="이름" />
<col class="판매량" />
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>이름</th>
<th>판매량</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>해리포터</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>헝거게임</td>
<td>200</td>
</tr>
<tr>
<td>3</td>
<td>반지의제왕</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총 판매량</td>
<td>600</td>
</tr>
</tfoot>
</table>- flex grid
- flex
-> 단 방향 레이아웃 (1차원) - grid
-> 격자(가로-세로) 레이아웃 (2차원)
CSS
셀렉터selecter{ 프로퍼티property: 값value;}
-
폰트 트래픽 문제
1. 잘 사용되지 않는 폰트는 이미지화
2. 많이 사용되지 않는 폰트는 경량화
3. 많이 사용되는 폰트는 CDN을 사용하기 보다는 내부 API서버나, 로컬 서버에서 서빙 -
transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, 100px);
}
100% {
transform: translate(100px, 100px);
}
}
div {
background-color: red;
width: 100px;
height: 100px;
animation: move 1s infinite alternate;
}
</style>
</head>
<body>
<div></div>
</body>
</html>마진 병합현상
블록레벨 엘리먼트사이 인접한 상하단 마진은 겹칩이 일어남 의도된 동작이며 마진이 더 큰쪽으로 겹친다.
해결방법-> 부모요소에 display: flow-root; 준다.
새싹 개발자🍀