[UI/UX]coding 기초 - CSS- multimidea, table

📌멀티 미디어 태그

---

✔️1. audio

---

소리파일을 재생하기 위해 사용하고'이 음원파일은 해당 브라우저에서 지원되지 않습니다.'라는 문구를 태그 사이에 넣어줘야 한다.

[기본형]

  - <audio src="연결경로" 속성="값" ></audio>
  : 대부분의 브라우저에서 호환 가능한 음원파일을 출력할때 사용한다.

  - <audio src="연결경로" 속성="값" >
      <source src="연결경로" type="audio/mp3">
      <source src="연결경로" type="audio/wav">          
      <source src="연결경로" type="audio/wma">    
      <source src="연결경로" type="audio/aac">    
    </audio>
  : 호환되지 않는 음원파일을 다양한 환경에서 지원할때 사용한다.

[속성]

  - autoplay : 오디오를 자동 재생한다.
  
  - controls : 웹 화면에 오디오 재생바를 출력한다.
  
  - muted : 음소거
  
  - preload : 재생버튼을 누르기 전에 오디오 파일을 다운로드하여 준비한다.
              속성값 none / metadata / auto
              none은 사용자가 오디오를 틀지 않거나 서버가 최소한의 트래픽을 유지해야할때
              사용한다. 즉, 미리 다운로드하여 준비하지 않는다.
              
              metadata는 사용자의 의도에 따라 해당 음원을 재생할수도 있고 재생하지 않을수도
              있을때 메타데이터(예를들어 길이나 소량의 내용)을 미리 다운로드 받아 준비해
              주는 것을 말한다.

              auto는 사용자의 의도와는 관계 없이 모든 데이터를 미리 다운받아 준비하는 것을
              말한다. 용량이 큰 경우 브라우저의 성능과 데이터를 낭비할 수도 있음.
              
  - loop : 반복재생

✔️ 2. video

---

• 동영상은 박스의 형태이므로 width와 height속성을 넣을 수 있다.
  이외의 다른 속성은 audio와 동일하다.

• 동영상을 자동재생하기 위해서는 muted속성을함께 포함해야한다.

• audio와 마찬가지로 동영상 파일이 지원되지 않는 환경을 고려하여 '이 동영상은 해당 브라우저에서 지원되지 않습니다.'와 같은 문구를 반드시 포함해야 한다.

  [기본형]

  -<video src="연결경로" 속성></video>
  -<video src="연결경로" 속성>
    <source src="연결경로" type="video/mp4">
    <source src="연결경로" type="video/wav">
    <source src="연결경로" type="video/webm">
   </video>

  [속성]

  - audio속성들은 모두 사용가능하다.
  
  - width : 동영상의 넓이를 지정한다.
  
  - height : 동영상의 높이를 지정한다.
  
  - poster : 동영상이 지원되지 않는 환경에서 보여줄 대체 이미지.
            대체 이미지가 있다면 대체 텍스트는 생략한다.
            

📌table 태그 (표를 만드는 태그)

---

• table태그는 웹사이트에서 게시판과 같은 영역 , 일반적인 표를 만들때에 주로 사용된다.

• table태그 안에 자식 태그중 tr은 칸들을 묶어주는 한 줄을 의미하고, td는 한 칸을 의미한다.
  한 행의 td의 갯수는 모두 동일해야 한다. 모두 block 속성을 가진다.★
  

[기본형]

  <table> -> 표 전체
  
    <tr> -> 행. 칸들을 묶어주는 한 줄
    
      <td>내용</td> -> 열. 1칸
      
    </tr>
  </table>

✔️th, caption, figcaption

---

• th는 제목을 나타내는 한 칸을 지정한다. 또한 글자가 굵게 표시되고, 칸의 중앙에 나오는 것이 기본값이다.

• td태그는 내용칸을 의미하고 글자는 왼쪽정렬되어 표시된다.

• caption태그는 표 전체에 제목을 붙일때 사용한다. table태그의 바로 안쪽에 출력해야 한다.

• figcaption태그도 표 전체에 제목을 붙일때 사용하고 table태그의 위나 아래쪽에 출력한다.
  

📌table 태그 (표 합치기)

---

✔️colspan과 rowspan

---

• colspan은 가로 방향으로 rowspan은 세로 방향으로 칸을 합칠때 사용하는 속성이다.

• 속성에는 숫자를 쓸 수 있는데 속성이 쓰여진 해당 칸부터 숫자만큼 합쳐진다.
  이 속성들은 td나 th처럼 '칸'을 의미하는 태그에 사용해야 한다.

  [기본형]

  <td colspan='2'>내용</td> : 해당 칸은 가로로 2칸짜리임
    <td rowspan='2'>내용</td> : 해당 칸은 세로로 2칸짜리임

📌table 태그 (표의 구조)

---

✔️thead, tbody, tfoot

---

  <thead>태그는 제목을 나타내는 영역으로 제목들을 포함한다. 
  해당 태그안에는 제목을 나타낼 tr과 th들로 구성되어 있어야 한다.

  <tbody>는 제목에 따른 본문 내용을 표시하는 공간이다. 여러 tr과 td들로 구성된
  영역이다.

  <tfoot>는 표의 요약내용을 나타낼때 사용한다. 예를 들어 총 게시물의 갯수나
  표의 통계 내용 같은것을 포함하고 생략이 가능한 영역이다.
    

[기본형]

  <table>
    <thead>tr과 th가 들어간다</thead>
    <tbody>tr과 th,td가 들어간다</tbody>
    <tfoot>tr과 th,td가 들어간다</tfoot>
  </table>

✔️< colgroup>, < col/>

---

  - 한 열(세로줄)에 있는 모든 셀(칸)에 같은 스타일을 적용하고 싶을때 사용한다.
  
  - <col/>태그는 두 줄 이상의 열을 묶어 같은 스타일을 지정하려면 span속성을 사용할 수 있다.
  만약 <col span='2'>형식으로 두 줄을 묶어주면 세로 두 줄에 동일한 스타일을 지정할 수 있다.
  
  - <colgroup>은 <col>들을 묶어주는 태그이다. col의 갯수는 tr안의 td또는 th의 갯수와 같아야 한다.
  
  - col태그 안에는 width속성을 함께 쓸 수 있고, col마다 차지할 영역을 지정할 수 있다.

[기본형]

  <table>
    <colgroup>
      <col span='2' width='10%'/>
      <col /> 
      <col />
    </colgroup>
  </table>
  

📌table 태그 (표를 꾸미는 css속성)

---

✔️1. border-collapse

---

border-collapse속성은 표와 표사이의 여백을 없애고 한 줄로 표현해준다.
이 속성은 table태그자리에 선언되어야 한다.

[속성]

  - collapse : table과 td사이의 여백을 없애고 border를 한 줄로 합친다.
  - separate : 기본값으로 table과 td사이 테두리를 따로 표시한다.
  

✔️2. border-spacing

---

 - table태그에 border를 사용하게 되면 table과 td사이의 간격을 지정하는 속성이다.
 
 - border-collapse:collapse일땐 사용할 수 없고, border-spacing도 table태그에 지정해야한다.
 
 - border-spacing의 값을 1개만 쓰면 모두 동일한 간격을 가지고 값을 2개로 나눠 쓰면
 첫 번째 자리는 좌우 간격의 자리, 뒤의 자리는 세로 간격의 자리이다.
  

✔️3. empty-cells

---

  표에서 내용이 없는 칸이 있을 때 해당 칸에 있는 border를 보여줄것인지 안보여줄것인지
  정하는 속성이다. 마찬가지로 border-collapse:collapse일땐 사용할 수 없다.

[속성]

  - show : 내용이 없더라도 빈 셀 주위에 테두리를 표시해준다. 기본값
  
  - hide : 내용이 없는 칸은 테두리를 없앤다.