☀️ [UIUX] 1213 HTML + CSS Coding, 코딩 중급

✏️ 2024. 12월 13일 / html + css 언어, 코딩 중급 13

⛄ 멀티미디어 태그에 대해 알아보자 - 오디오 태그
☁️ 멀티미디어 태그
인터넷 초기에는 웹 사이트에서 영상이나 음원파일을 재생하기 위해 ActiveX라는 프로그램을 설치해야만 확인이 가능했습니다.
하지만 악성프로그램의 위험이 크다는 단점 때문에 멀티미디어를 재생할 수 있는 다양한 태그가 생겼습니다.
☁️ <audio>
소리 파일을 재생하기 위해 사용합니다.
웹표준에 따라 음원파일이 지원되지 않는 환경을 고려하여
'이 음원 파일은 해당 브라우저에서 지원되지 않습니다.'라는 문구를 태그 사이에 넣어주어야 합니다.

[기본형]
- <audio src="연결경로" 속성="값" ></audio>
: 대부분의 브라우저에서 호환 가능한 음원파일을 출력할 때 사용합니다.
        <source src="연결경로" 속성>
      - <audio src="연결경로" 속성="값" type="audio/mp3">
      - <audio src="연결경로" 속성="값" type="audio/wav">
      - <audio src="연결경로" 속성="값" type="audio/wma">
      - <audio src="연결경로" 속성="값" type="audio/aac">
         <source src="연결경로" 속성>
          </audio>
: 호환되지 않는 음원파일을 다양한 환경에서 지원할 때 사용합니다.

[속성]
🌙 - autoplay : 오디오를 자동 재생합니다.
🌙 - controls : 웹 화면에 오디오 재생바를 출력합니다.
🌙 - muted : 음소거
🌙 - preload : 재생버튼을 누르기 전에 오디오 파일을 다운로드하여 준비합니다.
속성값으로는 none / metadata / auto 값이 있고
none은 사용자가 오디오를 틀지 않거나 서버가 최소한의 트래픽을 유지해야할때 사용합니다.
즉, 미리 다운로드하여 준비하지 않습니다.
🌙 * metadata는 사용자의 의도에 따라 해당 음원을 재생할수도 있고 하지 않을수도 있을때,
메타데이터(예를 들어 음원의 길이나, 필요한 소량의 내용)를 미리 다운로드 받아 준비해주는 것을 말합니다.
🌙 * auto는 사용자의 의도와는 관계 없이 모든 데이터를 미리 다운받아 준비하는 것을 말합니다.
용량이 큰 경우 브라우저의 성능과 데이터를 낭비할 수도 있습니다.
🌙 - loop : 반복재생

⛄ 멀티미디어 태그에 대해 알아보자 - 비디오 태그
☁️ <video>
동영상을 출력할 때 사용합니다.
동영상은 박스의 형태이므로 width와 height속성을 넣을 수 있습니다.
이외의 다른 속성은 audio와 동일합니다. 단, 동영상을 자동 재생하기 위해서는 muted 속성을 함께 포함해야만 자동 재생이 되도록 w3c에서 제한했습니다.
audio와 마찬가지로 동영상 파일이 지원되지 않는 환경을 고려하여
'이 동영상은 해당 브라우저에서 지원되지 않습니다.'와 같은 문구를 반드시 포함해야 합니다.

      [기본형]
      - <video src="연결경로" 속성></video>
      - <video src="연결경로" 속성>
      - <video src="연결경로" type="video/mp4">
      - <video src="연결경로" type="video/wav">
      - <video src="연결경로" type="video/webm">
          </video>

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

⛄ 표를 만들어내는 태그 - 테이블 태그
☁️ <table>
table 태그는 표를 만드는 태그로, 웹사이트에서 게시판과 같은 영역을 만들 때 사용합니다.
또한 일반적인 표를 만들때에 주로 사용됩니다.
table 태그 안에는 자식태그로 tr, td 태그를 사용합니다.
모든 태그는 block 속성을 가집니다.
table 태그 안에서 tr은 칸들을 묶어주는 한 줄을 의미하고, td는 한 칸을 의미합니다.
한 행의 td 갯수는 모두 동일 해야 합니다.

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

☁️<th>, <caption>, <figcaption>
표를 만들다 보면 표에 제목을 넣고 싶을 떄가 있습니다.
이렇게 표에 제목을 넣을 때에는 행이나 열의 제목을 뜻하는 th 태그나 표 전체의 제목을 지정하는 caption 또는 figcaption 태그를 사용할 수 있습니다.
하지만 표 전체 제목을 지을 때 반드시 해당 태그를 사용해야 하는 것은 아니며,
h2~h6까지의 태그로 나타내는 것도 가능합니다.
th는 제목을 나타내는 한칸을 지정할 때 사용합니다.
또한, 글자가 굵게 표시되고 칸의 중앙에 나오는 것이 기본값입니다.
td 태그는 내용칸을 의미하고 글자는 왼쪽 정렬되어 표시됩니다.
caption 태그는 표 전체의 제목을 붙일 때 사용합니다.
table 태그의 바로 안쪽(자식태그)에 출력해야 합니다.
figcaption 태그도 마찬가지로 표 전체의 제목을 붙일 때 사용하며,
table 태그의 위나, 아래쪽(형제태그)에 출력해야 합니다.

⛄ 표에 있는 칸을 합치는 태그
☁️ colspan과 rowspan
colspan은 가로 방향으로 칸을 합칠 때 사용하는 속성입니다.
rowspan은 세로 방향으로 칸을 합칠 때 사용하는 속성입니다.
각 속성에는 숫자를 쓸 수 있는데 속성이 쓰여진 해당 칸부터 숫자만큼 합쳐집니다.
이 속성들은 td나 th처럼 '칸'을 의미하는 태그에 사용해야 합니다.

[기본형]
     <td colspan='2'>내용</td> : 해당 칸은 가로로 2칸이다.
     <td rowspan='2'>내용</td> : 해당 칸은 세로로 2칸이다.

⛄ 표의 구조
☁️ <thead>, <tbody>, <tfoot>
표의 구조를 나눌때 <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>

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

⛄ CSS 속성으로 표를 꾸며보자
1. border-collapse
table 태그에 border를 사용하게 되면, table과 td 사이는 두 줄로 표현됩니다.
이때, border-collapse 속성을 사용하면 표와 표 사이의 여백을 없애고 한줄로 표현해줍니다.
이 속성은 table 태그 자리에 선언 되어야 합니다.

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

2. border-spacing
table 태그에 border를 사용하게 되면, table과 td 사이의 간격을 지정하는 속성입니다.
border-collapse:collapse 상태일 경우에는 사용이 불가하며, 이 속성 또한 table 태그 자리에 선언 되어야 합니다.
border-spacing의 값을 1개만 쓰면 모두 동일한 간격을 가지고,
값을 2개로 나누어 쓰면 첫 번째 자리는 좌우 간격의 자리, 뒤의 자리는 세로 간격의 자리입니다.
3. empty-cells
표에서 내용이 없는 칸이 있을 때 해당 칸에 있는 border을 보여줄것인지 안보여줄것인지를 정하는 속성입니다.
마찬가지로 border-collapse:collapse 상태일땐 사용할 수 없습니다.

[속성값]
     - show : 내용이 없더라도 빈 셀 주위에 테두리를 표시해줍니다. (기본값)
     - hide : 내용이 없는 칸은 테두리를 없앱니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)