데니스의 놀이터

1. <caption>태그, <figcaption>태그 - 표에 제목 붙이기

 기본형 : <caption> 표 제목 </caption>

       <figcaption> 표 제목 </figcaption>

 - 표에 제목을 붙일 때 보통 <caption>태그를 사용하지만 <figcaption>태그를 사용할 때도 있습니다. 두 태그의 사용 방법을 알아보겠습니다.

 1) <caption>태그

   1. <caption>태그는 <table>태그 바로 다음에 사용합니다.

   2. <caption>태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.

 다음은 <caption>태그를 사용한 코드입니다.

<사진 1.1>

<사진 1.1> 코드는 1행에는 컴퓨터 프로그래밍 언어를 작성하였고, 2행은 서버 단 언어를 작성하였으며 3행은 웹 베이직 3개를 작성했습니다.

<caption>태그는 <table>태그 다음에 위치하고 있습니다. 다음은 결과 화면입니다.

<사진 1.1 결과 화면>

<caption>태그를 사용한 결과 화면입니다. <caption>태그로 작성한 테이블 제목은 표의 중앙에 표시되었습니다.

 2) <figcaption>태그

  1. <figcaption>태그는 figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>태그로 감싼 후 <figcaption>태그를 이용해 제목을

     입력합니다.

  2. <caption>태그와 달리 <figcaption>태그는 중앙에 정렬되지 않습니다.

  3. <figcaption>태그를 <table>태그보다 앞에 사용하면 표 위에 제목이 표시됩니다.

  4. <figcaption>태그를 </table>태그보다 뒤에 사용하면 표 아래에 제목이 표시됩니다.

 다음은 <figcaption>태그를 <table>태그 앞에 사용한 코드입니다.

<사진 1.2>

다음은 결과 화면입니다.

<사진 1.2 결과 화면>

1. CSS란?

 - CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념입니다. HTML이 텍스트나 이미지, 표 같은 각 요소를 웹 문서에

   넣어 뼈대를 만드는 것이라면 CSS는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상 등 디자인 요소를 담당합니다.

2. 스타일 형식

<사진 1.1>

p : 맨 앞에 나와 있는 부분 즉 위의 예시에서 'p'부분을 '선택자(selector)' 라고 합니다. 이는 앞으로 만들 스타일 규칙을 어디에

     적용할 것인지 나타냅니다. <p> 태그가 적용된 요소에 중괄호( { } ) 사이의 스타일을 적용하겠다는 의미입니다.

text-align : 해당 위치에 있는 것을 '스타일 속성' 이라 부릅니다.

center : 해당 위치에 있는 것을 '속성 값' 이라 부릅니다.

* '스타일 속성'과 '속성 값'은 콜론( : )으로 구분하여 '스타일 속성' : '속성 값' 형식으로 표현합니다.

  '스타일 속성'과 '속성 값' 다음에는 세미콜론( ; )으로 구분합니다. 그래서 만약 두 개의 속성을 적용한다면 다음과 같이

  작성할 수 있습니다.

<사진 1.2>

3. 스타일을 표기하는 방법

 스타일 규칙은 세미콜론( ; )으로 구분하여 중괄호( { } ) 안에 나열하면 상관없지만 앞에서 본 것처럼 한 줄로 길게 쓰면 속성이

 여러 개일 경우, 구분하기 어렵다는 단점이 있습니다. 그래서 공백을 최소화 시켜 파일 크기를 작게 만들 거라면 한 줄로

 표기하지만 개발자가 읽기 쉽고 유지/보수가 쉬우려면 여러 줄에 걸쳐 작성하는 것이 좋습니다.

 다시 말해 아래의 두 코드는 모두 같은 코드입니다.

<사진 1.3>

한줄로 작성한 코드입니다.

<사진 1.4>

여러 줄로 작성한 코드입니다.

한줄로 작성한 코드를 여러줄로 작성한 코드입니다. 다시 강조하지만 <사진 1.3>, <사진 1.4> 코드는 모양새는 다르지만 같은 기능을 하는 코드입니다.

1. colspan 속성 - 열 합치기

 기본형 : <td colspan="합칠 셀의 개수"> 내용 </td>

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

 - colspan 속성의 col은 영어로 '열'을 뜻하는 column의 앞글자 col을 사용한 것입니다. 즉, 열을 합치고자할 때 colspan속성을 사용합니다. 

  다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다

<사진 1.1>

우선 <사진 1.1>의 좌측에 있는 표를 만드는 코드입니다.

<사진 1.2>

<사진 1.2>의 table속성을 보면 width속성과 height속성이 있습니다. 이 속성을 설정해주어야 커다란 빈 공간으로 셀이 생성됩니다.

width속성과 height속성을 사용하지 않으면 아주 작은 셀로 표가 생성됩니다. 다음은 결과 화면입니다.

<사진 1.2 결과 화면>

이제 이 표의 2행2열 부분의 우측부분을 하나의 셀로 결합시켜보겠습니다.

<사진 1.3>

<사진 1.3> 코드는 2행2열의 <td>코드 내부에 colspan 속성과 속성 값 3을 작성하였습니다. 열을 통합 시킬 것이므로 colspan 속성을 사용했으며

3개의 셀을 합칠 것이므로 속성 값을 3으로 설정했습니다. 다음은 결과 화면 입니다.

<사진 1.3 결과 화면>

2. rowspan 속성 - 행 합치기

 기본형 : <td rowspan="합칠 셀의 개수"> 내용< /td>

 기본형 : <th rowspan="합칠 셀의 개수"> 내용< /th>

 - rowspan 속성의 row는 영어로 '행'을 뜻하는 row 입니다. 즉, 행을 합치고자할 때 rowspan속성을 사용합니다. 

  다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다

.

<사진 1.4>

<사진 1.4>의 좌측에 있는 표는 위에서 이미 작성하였으므로 바로 rowspan 속성을 사용하여 셀을 합치는 코드를 작성해보고 결과를 확인해보겠습니다.

<사진 1.5>

3개의 행을 합칠 것이므로 rowspan 속성을 사용하였으며, 속성 값으로 3을 설정했습니다. 만약 2개의 행을 합치고자 한다면 속성 값을 2로 주면 됩니다.

그리고 2행과 3행 부분을 보면 <td></td>속성이 4개에서 3개로 수정되어 있습니다. 이유는 셀을 합치고 결과적으로 표현되는 표는 <사진 1.4>의

우측 표와 같이 3개의 셀이므로 <td></td>속성을 3개를 작성합니다. 다음은 결과 화면입니다.

<사진 1.5 결과 화면>