[기본 개념] 1 | (1.2) 표, 이미지

[기본 개념] 1 | (1.2) 표, 이미지

1 텍스트 입력하기

2 목록 만들기

3> 표 만들기

4> 이미지 삽입하기

5 오디오와 비디오 삽입하기

6 하이퍼링크 삽입하기

3. 표 만들기

표를 만드는 <table>, <caption> 태그

 

기본형

<table>

  <caption>표 제목</caption>

</table>

 

 표의 시작과 끝을 알려주는 <table> </table>태그를 표시하고 그 사이에 표와 관련된 태그를 넣는다.

 

 표의 제목을 붙이고 싶으면 <table> 태그 바로 아랫줄에 <caption> </caption> 태그를 사용한다. 제목은 표의 위쪽 중앙에 표시된다.

 

행을 만드는 <tr> 태그와 셀을 만드는 <td>, <th> 태그

 

기본형

<table>

  <tr>

    <td>1행 1열</td>

    <td>1행 2열</td>

  </tr>

  <tr>

    <td>2행 1열</td>

    <td>2행 2열</td>

  </tr>

</table>

 

 <tr> 태그는  행을 만들고 <td> 태그는 행 안에 있는 셀을 만든다.

 

 또한 표의 제목 행에 셀을 만들 때는 <td> 태그 대신 <th> 태그를 사용한다. <th> 태그를 사용하면 내용은 진하게 표시되고 중앙에 배열되므로 눈에 띈다.

 

표의 구조를 지정하는 <thead>, <tbody>, <tfoot> 태그

 

기본형

<table>

  <thead>

    <tr>

      <td>1행 1열</td>

      <td>1행 2열</td>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>2행 1열</td>

      <td>2행 2열</td>

    </tr>

  </tbody>

</table>

 

 제목과 본문 그리고 요약이 있는 표의 구조를 나눌 때 <thead> 와 <tbody>, <tfoot> 태그를 사용한다. 

 

 이렇게 표의 구조를 지정하면 CSS 를 사용하여 표의 제목, 본문, 요약에 다른 스타일을 적용할 수도 있다.

 

행이나 열을 합치는 rowspan, colspan 속성

 

기본형

<td rowspan="합칠 셀의 개수">셀의 내용</td>

<td colspan="합칠 셀의 개수">셀의 내용</td>

 

 행을 합치는 것은 <td> 태그나 <th> 태그에서 rowspan 속성을, 열을 합치는 것은 colspan 속성을 사용하여 몇 개의 셀을 합칠지 지정한다.

 

열을 묶어 주는 <col>, <colgroup> 태그

 

기본형

<colgroup>

  <col>

</colgroup>

 

 특정 열에 배경색을 넣거나 너비를 바꾸기 위해 열을 선택할 때 사용하는 태그가 <col> 태그와 <colgroup> 태그이다. <col> 태그는 열을 1개만 지정할 때 사용하고, <colgroup> 태그는 <col> 태그를 2개 이상 묶어서 사용한다.

 

 <col>, <colgroup> 태그는 표의 내용이 시작되는 <caption> 태그 전에 사용하여 표가 시작되기 전, 열의 상태를 알려줘야 된다.

 

 또한 <colgroup> 태그 안의 모든 열에 <col> 태그를 포함하여 작성해야 한다. 즉, 스타일 속성을 지정하지 않는 열에도 스타일 속성은 적지 않고 <col> 태그만이라도 적어야 한다.

(예를 들어 1, 3열에 스타일을 지정하고, 2열에는 스타일을 지정하고 싶지 않아도 모든 열에 <col>태그를 달아야 한다.)

 

(ex. 스타일이 없어도 <col> 을 명시 )

 

<colgroup>
  <col style="background-color:#eee;">
  <col>
  <col style="width:150px;">
</colgroup>

 

 이때, 같은 스타일 속성을 사용하면 span 속성을 사용해서 묶어줄 수 있다.

 

(ex. 스타일 속성이 같은 3, 4열을 묶어서 너비 지정 )

 

<col span="2" style="width:150px;">

4. 이미지 삽입하기

이미지를 삽입하는 <img> 태그

 

기본형

<img src="이미지 파일 경로" alt="대체용 텍스트">

 

 웹 문서에 이미지를 삽입할 때 가장 기본인 <img> 태그에서 중요한 src 와 alt 속성이 있다.

 

 scr 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 한다. 이미지 파일을 경로를 정확하게 입력하지 않으면 이미지가 화면에 나타나지 않는다.

 

 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 scr 속성에 이미지 파일의 이름만 적으면 된다. 반면에 웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일이 있으면 하위 폴더와 함께 이미지 파일 이름을 적어야 한다.

 

 alt 속성에는 화면 낭독기 등 이미지를 대신해서 읽어줄 텍스트를 입력한다. 

 

 인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타난다.

 

 웹 사이트에서 텍스트로 만든 메뉴나 로고, 또는 내용을 눈에 띄게 하기 위해 이미지로 처리하여 사용하기도 하는데 이때 alt 속성에 들어갈 텍스트는 이미지 안에 포함된 텍스트를 알려줘야 한다.

 

 <img> 태그로 이미지 파일을 삽입하면 원래 이미지 크기대로 표시된다. 이미지 파일을 수정하지 않고, 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶을 때 width 와 height 속성을 사용한다. 2가지 속성 모두 사용해도 되고, width 나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타낸다.

 

 이미지 크기를 표현하는 방법에는 2가지가 있다.

 

종류	설명	예시
%	이미지 크기의 값을 퍼센트로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다.	width="50%"
px	이미지 크기의 값을 픽셀(px)로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시한다.	width="150"

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)