• 검색 결과가 없습니다.

3--홈페이지구축-02-3

N/A
N/A
Protected

Academic year: 2021

Share "3--홈페이지구축-02-3"

Copied!
23
0
0

로드 중.... (전체 텍스트 보기)

전체 글

(1)

2

장 드림위버 활용

sec-2

테이블 태그 활용

(2)

Part2-2

테이블 기능 및 문서 레이아

웃 이해

(3)

1. HTML 표 (Table)

지정 태그

테이블 (Table) : 행 (row)

와 열 (coloum)

으로 구성

표 정의 : <table> ~ </table> 태그로 정의

행 (Row)

<tr> ~ </tr> 태그로 생성

다수의 데이터 셀로 구성

<td> ~ </td>

로 생성 ( td : table data)

텍스트 , 링크 , 이미지 , 폼 , 또는 다른 테이블 포함 가능

예 :

<table border="1">

< tr>

< td> 1

행 ,

첫번째 셀

</td>

< td> 1

행 ,

두번째 셀

</td>

< /tr>

< tr>

< td> 2

행 ,

첫번째 셀

</td>

< td> 2

행 ,

두번째 셀

</td>

< /tr>

< /table>

실습 : table-01.htm

(4)

1. HTML 표 (Table)

지정 태그

관련 태그

태그

설 명

<table>

표 정의

<th>

표 내의 헤더 ( 제목 )

셀 정의

<tr>

표 내 행 (row) 정의

<td>

표 내에 데이터 셀 정의

<cap-tion>

표 캡션 정의

<col-group>

표 서식 지정을 위해 하나 이상 열 (column)

그룹 지정

<col>

<colgroup>

요소 내 각 열에 대한 속성 지정

<thead>

표 내 헤더 (header)

내용 그룹

, CSS

와 연계 활용

<tbody>

표 내 바디 (body)

내용 그룹

, CSS

와 연계 활용

<tfoot>

표 내 바닥글 (foot)

헤더 내용 그룹

, CSS

와 연계 활용

(5)

표 관련 주요 속성

1)

<table>

태그 관련 속성

속성

속성 값

설명

align

left

center

right

본문 내 표 정렬

bgcolor

rgb(x,x,x)

#rrggbb

컬러명

표 배경색 지정

(x: 0~255, rr: 00~ ff)

border

1

""

표 경계선 두께 지정

cellpadding

픽셀값

셀 내용과 셀 내부 경계와 간격

cellspacing

픽셀값

셀간 간격 정의

width

픽셀값

%

표 넓이 지정

(6)

표 관련 주요 속성

2)

<tr>

태그 관련 속성

속성

속성 값

설명

align

right

left

center

justify

char

특정 열 (row)

내용 수평 정렬 지정

bgcolor

rgb(x,x,x)

#rrggbb

컬러명

특정 열 배경색 지정

(x: 0~255, rr: 00~ ff)

valign

top

middle

bottom

baseline

특정 열 내용 수직 정렬 지정

(7)

표 관련 주요 속성

3)

<td>

태그 관련 속성

속성

속성 값

설명

align

right

left

center

justify

char

특정 셀 내용 수평 정렬 지정

bgcolor

rgb(x,x,x)

#rrggbb

컬러명

특정 셀 배경색 지정

(x: 0~255, rr: 00~ ff)

valign

top

middle

bottom

baseline

특정 셀 내용 수직 정렬 지정

height

픽셀값

%

특정 셀 높이 지정

width

픽셀값

%

특정 셀 너비 지정

(8)

실습

다음 표를 완성하시오

캡션 ( 표 예제 )

너비 (300 픽셀 ), 배경색 (ffcc00)

경계선 두계 (3 픽셀 ), 표정렬 ( 가운데 )

셀 패딩 (20 픽셀 )

1 번째 행 : 표 제목

2 번째 행

배경색 (green), 수직정렬 (top)

수평정렬 (right

3 번째 행 1 열

배경색 (white), 셀 높이 (100 픽셀 )

3 번째 행 2 열

수직정렬 (bottom)

실습 : table-02.htm

(9)

2.

셀 병합

관련 <td>

태그 속성

속성

속성 값

설명

colspan

숫자값

병합될 셀의 개수 지정

rowspan

숫자값

병합될 행의 개수 지정

셀 병합

colspan=“

2”

rowspan=“2

m

(10)

(11)

셀 병합 예제

<tr> 내

<td> 개수

에 유의 할 것

(12)

1)

표 삽입

4 x 1 테이블 ( 표 ) 삽입하기

1) Insert 메뉴  Table

1) 행 및 열 개수 지정 2) 표 너비 지정 3) 테두리 두께 지정 4) 셀 안쪽 여백지정 5) 셀 사이 간격 지정 6) 표 제목 줄 / 칸 지정 7) 표 제목 지정

(13)
(14)
(15)

2)

표 활용

(16)

3) 행 ,

열 편집

열 (column) 삽입

(17)

행 (row) 삽입

임의 행 선택  1) [Insert][Table Objects]

(18)

셀 병합 (Merge cells)

셀 분리 (split cell)

행으로 나누기

열로 나누기

(19)

4)

표 속성 (properties) 변경

표 선택 또는 <table>

태그 선택

너비 / 정렬방식 / 셀 여백 / 셀 간격 / ……

외곽선 두께 (

Border

):

0( 선 없음 )

(20)

테이블에 관련된 [PROPERTIES] 패널

1) Table Id : 테이블 이름을 지정합니다 . 입력된 이름은 CSS 의 ID 와 같다 . 2) Rows/Cols : 테이블의 행과 열 수를 지정한다 . 3) W : 테이블의 가로 크기를 지정한다 . 4) CellPad : 셀 안에 삽입한 데이터 주변의 상하좌우 여백을 지정한다 . 5) CellSpace : 셀과 셀 사이의 간격을 지정한다 .. 6) Align : 테이블을 왼쪽 , 중앙 , 오른쪽으로 가로 정렬한다 . 7) Border : 테이블의 테두리 굵기를 지정한다 .. 8) Class : CSS 클래스를 적용한다 .

9) [Clear Column Widths] : 테이블에 지정된 가로 크기를 삭제한다 .

10) [Convert Table Widths To Pixels] : 테이블의 가로 크기 단위를 pixels’ ‘ 로 지정한다 . 11) [Convert Table Widths To Percent] : 테이블의 가로 크기 단위를 percent’ ‘ 로 지정한다 . 12) [Clear Row Heigh] : 테이블에 지정된 세로 크기를 삭제한다 .

(21)

셀에 관련된 [PROPERTIES] 패널

1) Format : 문단 단위에 H1 ~ H6’, ‘Pre’ ‘ 태그 등을 적용할 수 있다 . 2) Class : 텍스트에 클래스를 적용하거나 적용된 클래스 목록을 표시한다 . 3) [Bold] : 텍스트를 진하게 강조 표시한다 . 4) [Italic] : 텍스트를 기울임 꼴 형태로 표시한다 . 5) [Unoreded List] : 블릿 기호 (■, ●, ○ 등 ) 로 이루어진 블릿 목록 문단을 지정한다 . 6) [Ordered List] : 숫자 , 로마자 , 알파벳 문자 기호로 이루어진 순서 목록 문단을 지정한다 . 7) [Remove Blockquote] : 들여쓰기 한 텍스트 문단을 한 단계씩 해제한다 . 8) [Blockquote] : 텍스트 문단을 들여쓰기 한다 . 9) Title : 하이퍼링크를 지정할 때 활성화되며 , 입력한 텍스트는 하이퍼링크 툴 팁에 표시된다 . 10) ID : 텍스트에 적용된 ID 방식의 CSS 스타일의 목록을 표시하거나 적용할 때 사용한다 . 11) Link : 선택 영역의 텍스트에 하이퍼링크를 지정한다 . 12) Target : 하이퍼링크의 타깃을 지정한다 . 셀에 관련된 [PROPERTIES] 패널의 경우에는 [HTML] 과 [CSS] 를 클릭할 때 항목이 다르게 표시 .

(22)

셀 속성 변경 실습

(23)

표 활용 실습 과제

수치

표 관련 주요 속성
표 관련 주요 속성  2)  &lt;tr&gt;  태그 관련 속성 속성 속성 값 설명 align rightleft center justify char 특정 열 (row)  내용 수평 정렬 지정 bgcolor rgb(x,x,x)#rrggbb 컬러명     특정 열 배경색 지정 (x: 0~255, rr: 00~ ff) valign top middle bottom baseline     특정 열 내용 수직 정렬 지정
표 관련 주요 속성  3)  &lt;td&gt;  태그 관련 속성 속성 속성 값 설명 align rightleft center justify char     특정 셀 내용 수평 정렬 지정 bgcolor rgb(x,x,x)#rrggbb 컬러명     특정 셀 배경색 지정 (x: 0~255, rr: 00~ ff) valign top middle bottom baseline     특정 셀 내용 수직 정렬 지정 height 픽셀값 % 특정 셀 높이 지정
표 활용 실습 과제

참조

관련 문서

*단어 사이의 공통성과

약국은 당초 수집 목적과 합리적으로 관련된 범위에서 정보주체에게 불이익이 발생하는지 여부, 암호화 등 안전성 확보에 필요한 조치를 하였는지 여부 등을

(Taekwondo, Weight Lifting Players) (90 min × 6 days/week) Warming

15) 세광음악출판사

멘토링 과정에서는 많은 어려움이 발생하기 때문에 초지일관 자신 감과참을성을 가지고 끈질기게 멘토링에 참여하는 것이 필요하다. 계획된 멘토링에 진지하고 헌신적으로

[r]

산출 자료에

그러므로 ㉥ ‘김 선생님’은 현재의 담화 상황에 참여하지 않는 인물을 지칭하는 표현이라는 설명은 적절하다.. 그러므로 ㉤이 아버지가 지금까지 은주와 나눈 대화의 화제