audio 태그
음악 컨텐츠를 재생하기 위한 태그

<audio scr="폴더/파일명" controls autoplay loop></audio>
controls : 음악 파일을 제어할 수 있는 컨트롤러 불러옴
autoplay : 로딩이 완료된 파일을 자동으로 재생합니다. (크롬에서 정책상 autoplay 안되는 경우 js로 컨트롤)
loop: 음악 반복

<audio controls>
    <source src="flow.ogg" type="audio/ogg">
    <source src="flow.mp3" type="audio/mpeg">
</audio>
audio 태그 역시 source요소 자식으로 사용 가능하다.
크로스브라우징을 위해 여러 포맷의 파일 지원 가능

video태그
동영상 파일을 재생하기 위한 태그

controls : 음악 파일을 제어할 수 있는 컨트롤러 불러옴
autoplay : 로딩이 완료된 파일을 자동으로 재생합니다. (크롬에서 정책상 autoplay 안되는 경우 js로 컨트롤)
loop: 음악 반복

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

결국 비디오 파일은 코덱+포맷의 조합

form

정보를 입력하는 영역

폼 동작 방식
폼에 입력하고 제출하게되면, 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리, 처리 후 결과화면 같은 다른 웹 페이지를 클라이언트에 전송

이름	조작	SQL	Method
Create	생성	insert	POST
Read	읽기	select	GET
Update	갱신	update	PUT
Delte	삭제	delete	delete

form의 속성
action: 입력 값을 전송할 페이지를 나타냄

method: 폼의 데이터를 전송할 방법을 정의합니다. method의 속성에는 get과 post가 있습니다.
get은 웹서버에 데이터 요청할때 사용하며 주소에 데이터 입력하는 방식이고,post는 파일을 올리거나 보안이 필요한 데이터를 전송할때 등 사용합니다. 또한 주소에 입력 내용이 나타나지 않도록 함

get: url로 데이터를 전달할 때 사용(file 같은 큰 파일은 get으로 전송하지 않습니다. id와 pw 같은 민감 데이터 x)
post: 패킷 안에 데이터를 넣어 전달할때 사용(민감,큰 데이터)

input

type: 태그 모양 다양하게 변경 가능
name: 태그 이름 지정
readonly: 태그를 읽기 전용으로
maxlength
minlength
required
autofocus : 웹 페지이가 로딩되면 이 속성을 지정한 태그로 포커스
placeholder
pattern : 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을때 사용

🔼 input type
속성 목록
(number 태그 위아래 화살표 생기는건, 스피너ui 라고 부름)

label
input 태그를 설명하는 텍스트를 옆에 붙여 무엇을입력해야 하는지 설명할 수 있겠지만,
시각장애인들도 폼을 사용할 수 있도록 시멘틱한 label 요소 사용을 권장

사용법
Label 은 두가지 방법 있다.

  <label> 이름 : 
    <input type="text" name="name"> 
  </label>
1. label에 텍스트의 설명과 폼 입력 모두 넣기

  <label for="myName">이름 : 
  </label>
  <input type="text" name="name" id="myName">
2. 폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식

for 속성
레이블이 속한 input과 같은 폼 컨트롤을 의미함
for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야함

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

수업중간에 갑자기 나온 꿀팁

document.getElementsByTagName("video")[0].playbackRate = 2.5;
-> 콘솔에서 2.5배속 설정하기

select
드롭다운 리스트 박스 생성함. 사용자가 선택해야하는 리스트박스안의 아이템을 만들때에는 option 태그 사용

Select 의 속성들
Multiple=“multiple” 다중선택 가능하게 함
size 통해 드롭다운 리스트에서 한번에 보여줄 수 있는 option의 갯수를 조절할 수 있음.

fieldset
fieldset 요소 사용하면, 그 자식 요소로 사용되는 폼 컨트롤들을 그룹화할 수 있다
폼 내용이 방대하여 섹션별로 나눌 필요성이 있을 경우 유용하게 사용

legend
fieldset 태그 바로 뒤에 위치하며, 폼그룹의 목적을 나타내는 제목을 의미함

button

<button type="submit" > </button><!--서버로 양식 제출-->
<button type="reset" > </button><!--form의 모든 값 초기화-->

input vs button 무엇을 쓸까?
button요소는 input 요소보다 스타일 적용하기 훨씬 수월하다.
Input은 닫는 태그가 없기 때문에 value 특성에 텍스트값만 지정할 수 있지만,
button은 내부에 여러가지 자식 컨텐츠를 추가할 수 있고, ::after 나 ::before등의
가상요소 사용도 가능하다.

table
테이블 생성할때 사용.
내부에는 제목(caption)과 행(tr) 열(col) 셀(td) 셀의 제목(th)으로 구성되어있음

<table>
<caption>요일별 급식 만족도</caption>
<tbody>
  <tr>
    <th></th>
    <th scope="col">월요일</th>
    <th scope="col">화요일</th>
    <th scope="col">수요일</th>
    <th scope="col">목요일</th>
    <th scope="col">금요일</th>
    <th scope="col">토요일</th>
  </tr>      
  <tr>
    <th scope="row">메뉴</th>
    <td>돈까스</td>
    <td>짜장면</td>
    <td>볶음밥</td>
    <td>해물라면</td>
    <td>잔치국수</td>
    <td>떡볶이</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th scope="row">만족도</th>
    <td>3/5</td>
    <td>4/5</td>
    <td>1/5</td>
    <td>5/5</td>
    <td>2/5</td>
    <td>3/5</td>
  </tr>
</tfoot>
</table>

Table(표) 에 border 넣어주기.
선 겹치면

border-collapse : collapse; 

😈 css특강

어렵다는 말보단 흥미롭단 말을 해보자!

css 이전 과제 리뷰

1. 곧 죽어도 전체 큰 틀부터 잡아야한다
2. 마크업부터 다 끝내려고 하지말고, 큰 덩어리부터 순차적으로 최소한의 마크업부터 하자!

<div class="wrapper">
  내용물
  </div>

  .wrapper{
    width: 300px;
    margin : 100px auto;
/* 먼저 틀부터 시작하자. 항상 이 작업부터 시작하자 */
}

3. width값 주고 가운데정렬하기
4. img 넣기

5. 우리는 두가지 덩어리로 나눠야한다.
   그림 영역과 컨텐츠 영역
   나는 그림(여우+풀) 컨텐츠 이렇게 두가지로 나눴는데, 종찬강사님은 다르게 나누셨다.
   fox 이미지는 이 주제의 페이지니까 마크업으로 이미지 등록해주었고, 잔디밭은 그냥 꾸밈일뿐이니 배경이미지로 넣어주셨다

  <div class="wrapper">
              <img class="animal-cover" src="images/animal07.png" alt="">
              <div class="animal-ground">
                 <h1>Fox</h1>
                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec</p>
              </div>
        </div>

6. 클래스명을 fox가 아니라 적당한 수준에서 유니크하게 짓기
7. 이미지, 그라운드 태그에 배경색 넣어주기

이 부분에서 css특강의 핵심 개념이 나왔다.

마진병합현상

윗 div과 밑 div를 잘보면 가운데 빈공간이 있다. 이것은 h1의 마진이다.
마진 병합현상이란, css 만든 사람들이 의도한 동작이다.
block level elements 끼리만 일어나고, 조건은 인접해있는 상하단 마진만 겹친다 (좌우마진안겹침)
큰 사이즈의 마진 기준으로 잡힘

근데 왜 윗부분은 margin이 안생길까?
그 이유는, box의 Margin-top이랑 wrapper의 margin이랑 겹친것이다.
시작점에서 겹쳤기에 wrapper의 margin이 적용되어서 저렇게 보이는것이다!

해결법 -> 부모에게 padding, border 1px 이라도 부여하기
부모에 padding border 등의 공간이 발생하니까, 바깥 margin이랑 자식 margin 이랑 padding 기점으로 나눠지게 된다.
이 방법이 싫다면, 부모에게

display: flow-root

이 속성을 주면 마진겹침현상을 해결할 수 있다.
아니면 첨부터 margin값 리셋해주기 ㅎㅎ

8. H1,p margin 리셋해주기
9. 아래 ground 영역 30px 패딩주기(되도록 한 요소에만 깔끔하게 패딩값,마진값 주기)-> 안에 h1,p 가 아니라 어떤것이 들어가도 padding이 유지되도록!!

10.Vertical-align:top 으로 이미지 밑 하단공간 없애주기
11. 유지보수 -> 잔디밭 repeat-x

마크업은 상황에 맞게 확장성있게 추가하면 되는거다

Border-radius : 0 0 10px 10px
시계방향으로 값

다시 정리할 예정