HTML 핵심개념 뽀개기! (3) 테이블, 멀티미디어

 

정보를 표로 나타내고 싶을 때

<table>태그를 사용하여 나타낼 수 있다. 

테이블의 행은 <tr> 태그로, 각 데이터들은 <td> 태그로 넣을 수 있다. 

 

<pre>

        가   나   다  

a       1    2   3

b       4    5   6

</pre>

으로 나타낸 코드를 table 태그로 나타내면

아래와 같이 나타낼 수 있다.

<tr>

  <td></td> 

  <td>가</td>

  <td>나</td>

  <td>다</td>

</tr>

<tr>

  <td>a</td> 

  <td>1</td>

  <td>2</td>

  <td>3</td>

</tr>

<tr>

  <td>b</td> 

  <td>4</td>

  <td>5</td>

  <td>6</td>

</tr>

 

머리글 

<thead>태그로 감싸면 된다. 

각 행 안에 있는 것들은 제목이기 때문에 <td>가 아니라 <th>라는 태그를 넣어야한다.

 thead로 감싸고 나머지 부분은 <tbody>라는 태그로 감싸서 사용한다. 

 

바닥글

<tfoot>태그로 사용한다. 

머리글을 작성할 때와 동일하게 행은 <tr>태그로 감싸서 사용한다. 

 

 

 

테이블 스타일링 

 

표 전체에 테두리 넣기

<table>태그에 적용하면 된다.

table{
  border: 1px solid black; // 표 전체의 테두리를 검은색으로
}

th{
  border: 1px solid green; // 제목 셀의 테두리를 초록색으로
}

td{
  border: 1px solid blue; // 표 전체의 테두리를 파란색으로
}

 

테두리 겹치기

표의 테두리는 서로 간격이 있어서 테두리가 각각 다 보이게 되는데

이 간격을 없애고 테두리를 겹치게 하기 위해서는 border-collapse 라는 속성을 이해하면 된다.

border-collapse: collapse;

 

테두리 간격

테두리 사이의 간격을 border-spacing이라는 속성을 통해 정할 수도 있다.

border-spacing: 10px;

 

이미지

<img> 태그를 이용하며 

src 속성에 이미지 주소를 넣으면 된다. 

<img src="poster.jpg">

 

alt 속성을 이용하면 이미지에 대한 정보를 텍스트로 적을 수 있다.

<image src="poster.jpg" alt="스타워즈 포스터">

 

width, height 속성을 이용해서 사진의 너비와 높이를 정할 수 있다. 

<image src="poster.jpg" alt="스타워즈 포스터" width="300" height=""400>

 

 

비디오

<video> 태그를 사용하며 이미지 태그를 사용할 때처럼 src 속성을 사용하면 된다. 

<video src="movie.mp4"></video>

 

autoplay

페이지가 로딩되면 자동 재생을 한다는 의미

<video src="movie.mp4" autoplay></video>

 

muted

비디오의 소리를 끄는 옵션

<video src="movie.mp4" autoplay muted></video>

 

controls

아래 쪽에 프로그레스 바랑 재생 버튼이 생기게 할  수 있다. 

<video src="movie.mp4" autoplay muted controls></video>

 

width, height

위 속성을 이용해서 비디오의 너비와 높이를 정할 수 있다. 

 

iframe

<iframe>태그를 사용하여 다른 HTML 문서를 문서 안에 넣고 싶을 때 사용한다. 

src로 불러올 문서의 경로를 지정해주면 된다. 

<iframe src="banner.html" width="100" height="200"> </iframe>