22-09-07-TIL

Embedded content

<audio>

음악 컨텐츠를 재생
control 바가 없다면 정지/재생 버튼을 만들어줘야 함
autoplay 크롬에서 작동 안되므로 js로 컨트롤하기!!
<audio src="폴더/파일명" controls autoplay loop ></audio>

<audio>
<audio controls autoplay loop class="bgm">
	<source src="https://drive.google.com/uc?export=download&id=1xbevC0q-fNUDuoFCSLUdot0OIO81LgpE" type="audio/mp3" >
</audio>

<video>

동영상 파일 재생
<video src='파일 위치/파일명'></video>

<video src="abcd.mp4" controls autoplay loop width="450" height="300"></video>

preload
	-> none : 비디오 미리 로딩 X
    -> metadata : 미리 로딩 X, 메타 데이터 가져옴
    -> auto : 미리 로딩

poster
	-> 영상 로딩 중 대신 보여줄 이미지 지정

<source>
	-> 브라우저에 따라 여러 파일 형식 지정

<track>
	-> kind : 종류 (subtitles(자막), captions(설명)
    -> srclang : 텍스트 트랙 언어 지정
    -> label : 텍스트 트랙 제목

<video controls poster="abc.jpeg" preload="auto" width="450" height="300">
	<source src="abc.ogv" type="video/ogg">
	<source src="abc.webm" type="video/webm">
	<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="abc">
</video>

코덱 vs 포맷

코덱 -> 녹화하면 얻는 원본 영상
포맷 -> 코덱을 담아 재생 가능한 플레이어에 전달되는 컨테이너 역할

Forms

<Forms>

정보를 입력하는 영역
action -> 입력값을 전송할 페이지는 나타냄
method -> get, post만 사용 가능

get -> 웹 서버에 데이터 요청 (URL로 데이터 전달할 때 사용)
post -> 보안 필요한 데이터 전송, 파일 등 패킷 안에 데이터 넣어 전달

<form action="012.html" method="">
    <input type="text" name="id">
    <input type="password">
</form>

🔍 폼 동작 방식

1. form에 데이터 입력
2. 웹 서버로 데이터 이동
3. Web Server에서 App Server 호출
4. App Server에서 DB로 데이터 전송
5. DB에서 CRUD 작업 발생 -> App Server 전송 -> WEB 전송 -> 클라이언트 브라우저에게 전송
6. 사용자 브라우저 -> 사용자에게 보여줌

서버 : 서빙
웹 서버 : 정적 파일을 서빙
앱 서버 : 두뇌 역할 (id, pw 데이터 들어옴)
	DB에서 데이터 가져와서 확인하기
DB : 데이터 저장
	이미지 - 이미지 경로만 저장하고 이미지는 스토리지에 저장
    이미지를 DB에 저장하는 경우 -> 텍스트로 저장됨

🔍 CRUD

이름	조작	method
Create	생성	POST
Read	읽기	GET
Update	갱신	PUT
Delete	삭제	DELETE

🔍 로컬

단점) 
트래픽 확장의 어려움
들어오는 트래픽 제한
서버 확장 어려움
정전 발생

장점)
비용 절약

🔍 클라우드

단점) 
비용

장점)
서버 확장 쉬움
도메인 연결 쉬움

<input>

폼 태그에 입력할 공간 생성

<input type="text" name="id" />

속성

속성	설명
type	태그 모양 변경(text,radio,checkbox,password 등 지정가능)
name	태그 이름 지정
readonly	읽기 전용 (수정 불가능)
maxlength	최대 글자 수 지정 (제한 두는 이유 -> 필수 입력하게 하려고)
minlength	최소 글자 수 지정
required	필수 태그 지정 (필수 입력)
autofocus	로딩 시 해당 태그로 포커스 변경
placeholder	입력 값에 힌트 줌
pattern	정규표현식을 이용하여 특정 범위 내 유효값 입력 받음

input type 종류

    <form action="012.html" method="POST">
        <input type="text" name="id" /><br />
      	<!-- mask 처리 -->
        <input type="password" name="pw" /><br />
        <input type="password" name="test" value="hello" /><br />
        <!-- input타입 알아보기 -->
      
      	<!-- button : 눌리는 버튼 -->
        <input type="button" value="눌럿!" /><br />
      
      	<!-- search : 검색 창 -->
        <input type="search" /><br />
      
      	<!-- 날짜, 시간 입력 -->
        <input type="date" /><br />
        <input type="time" /><br />
      
      	<!-- 슬라이드 바 형식 -->
        <input type="range" /><br />
      
      	<!-- 수, 색 선택 -->
        <input type="number" /><br />
        <input type="color" /><br />
      
        <!-- radio 버튼 : 택 1 -->
        <input type="radio" /><br />
        <!-- 여러개 선택 가능 -->
        <input type="checkbox" /><br />
      
        <input type="file" /><br />
        <input type="email" /><br />
      	<input type="tel" /><br />
      	<input type="url" /><br />
        <button type="submit">로그인</button>
    </form>

<label>

시멘틱한 요소로 사용
<input> 옆에 붙여서 사용

<label for="fullname">이름 :</label>
<input type="text" name="name" id="fullname">

📌 name이 통일되면 택1로 바뀜

<h1>회원가입</h1>
    <!-- name이 통일되면 택1로 바뀜 -->
<form action="015.html" method="get">
    <label for="man">남</label>
    <input type="radio" name="성별" value="man" id="man">
    <label for="woman">여</label>
    <input type="radio" name="성별" value="woman" id="woman">
    <button type="submit">회원가입</button>
</form>

<select>

드롭다운 리스트 박스 생성
multiple 속성을 사용하여 여러개 선택 가능
size 속성을 사용하여 한번에 보여주는 갯수 조정 가능

<form action="">
    <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
        <!-- multiple 여러개 선택 가능 -->
    <select name="device" id="myDevice" multiple size="4">
        <option value="iphone">아이폰</option>
        <option value="galaxy">갤럭시폰</option>
        <option value="ㅜㅜ">LG폰</option>
        <option value="ㅜㅜ">LG폰</option>
        <option value="ㅜㅜ">LG폰</option>
    </select>
</form>

<fieldset>

자식 요소로 사용되는 form들을 그룹화
섹션별 구분

    <form action="">
        <fieldset>
            <legend>개인정보</legend>
            <label for="myName">이름</label>
            <input type="text" name="name" id="myName">
            <label for="myEmail">이메일</label>
            <input type="email" name="email" id="myEmail">
        </fieldset>
        <fieldset>
            <legend>개인정보 제공 동의</legend>
            <label for="checkAgree">동의하십니까?</label>
            <input type="checkbox" name="agree" id="checkAgree">
        </fieldset>
    </form>

<legend>

⚠️ <fieldset> 바로 뒤에 위치
폼 그룹의 목적을 나타내는 제목 의미

<button>

클릭 가능한 버튼
기본값이 submit
type="button" -> 클릭 가능한 버튼 

<form action="" method="">
    <input type="text">
    <button type="submit">회원가입</button>
</form>

🔍 <input> vs <button>

<button>이 <input>보단 스타일 적용하기 수월

<textarea>

<!--여러 줄의 text 입력받기 가능-->
<textarea cols="10" rows="5"></textarea>

cols -> 입력창의 넓이 (기본값 20)
rows -> 기본적으로 보여줄 입력 줄 수

<datalist>

<select>와 <input> 섞어서 사용 가능
선택 + 입력 가능
<input>의 list와 <datalist>의 id 속성 연결

<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
    <option value="수">수</option>
    <option value="금">금</option>
    <option value="지">지</option>
    <option value="화">화</option>
</datalist>

Tabular data

<table>

테이블 생성할 때 사용
제목 : caption
행 : tr
열 : col
셀 : td
셀의 제목 : th
col 방향 : 아래로
row 방향 : 가로로
thead : 머리글
tbody : 본문
tfoot : 바닥 글
<td>나 <th> 태그 요소에 colspan, rowspan 하면 병합 가능
colspan -> row 방향으로 병합
rowspan -> column 방향으로 병합

<table>
  	<caption> 이달의 책 판매량 </caption>
        <!-- thead, tbody 둘 다 꼭 있어야함 -->
        <thead>
            <tr>
                <!-- 테이블 헤딩부분 (굵게, 중앙 정렬) -->
                <!-- ctrl+alt+클릭으로 원하는 부분 수정 -->
                <th>통장</th>
                <th>예금액</th>  
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>농협</td>
                <td>20억</td>    
            </tr>
            <tr>
                <td>신한</td>
                <td>30억</td>    
            </tr>
            <tr>
                <td>국민</td>
                <td>40억</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>통합잔고</td>
                <td colspan="3">90억</td>
                <!-- row 방향으로 병합 -->
                <!-- rowspan은 column 방향으로 병합 -->
            </tr>
        </tfoot>

    </table>

<colgroup>, <col>

<colgroup>와 그 자식 요소인 <col> 요소를 통해 공통적인 스타일 부여 (열)

<scope>

<th>요소에 scope 속성을 통해 스크린 리더기에게 읽을 방향을 정해줌
row : 행 방향 진행 (왼 -> 오)
col : 열 방향 진행 (위 -> 아래)

느낀점

오늘 너무 많은 부분들을 배웠다. 😫
저녁에 있던 CSS 특강도 너무 재밌었고 강사님께서 전체적인 큰 덩어리를 먼저 잡으라고 하셨는데 매번 까먹는것 같다.
사실 나머지 CSS 부분도 TIL에 정리해야하는데 오늘은 너무 힘들어서 내일... 해야겠다 ㅎ 😫😁