▒ 틀만들기 - ⑧ 칸 나누기-세로 태그

[예종]

50. 틀만들기 - ⑧ 칸 나누기-세로 태그

50. 틀만들기 - ⑧ 칸 나누기-세로 <rowspan=숫자> 태그

▒ 요 약

칸 나누기-세로 <rowspan=숫자> 태그

테이블 칸나누기 두번째, '세로형'을 배워봅니다.
세로형 역시 마찬가지로
테이블의 '가로x세로' 형태의 기본모양 'n x m'이 기본이 되어
칸들을 세로로 합치며 칸을 나누게됩니다.

'가로형'에는 <colspan=숫자> 태그를 사용하였습니다.

'세로형'에는 <rowspan=숫자> 태그를 사용합니다.

세로로 합쳐지는 첫째줄 칸 <td> 태그에 끼워넣어 사용합니다.

아래와 같은 기본 테이블을

①	②
③	④

첫째줄과 두째줄의 첫째칸을 합쳐서
첫째칸은 세로로 길게, 두째칸은 2칸으로 만들고자 할 때
이렇게 -_-;;

① + ③	②
	④

①번칸 <td> 태그에 끼워넣으면 됩니다.

rowspan='숫자' 에서 '숫자'는 합쳐지는 칸의 숫자를 뜻합니다.
위에 예제는 숫자가 몇일까요?
그렇습니다 2입니다. 2칸을 합친다라는 명령입니다.

응용하실수 있겠죠?
3x3, 4x2, 2x6 등 등 다양한 테이블의 세로칸을 합할 수 있습니다.
몇 개의 예제와 소스를 올리지만 꼭 실습을 해보고 이해를 하셔야
자유롭게 칸을 만들 수 있습니다.

예제와 소스를 보고 실습해보면 더 쉽게 이해 하실 수 있습니다.

▒ 요 약

첫째칸 1칸. 두째칸 2칸

① + ③	②
	④

첫째칸 2칸. 두째칸 1칸

①	② + ④
③

첫째칸 1칸. 두째칸 1칸. 세째칸 3칸

① + ④ + ⑦	② + ⑤ + ⑧	③
		⑥
		⑨

첫째칸 2칸. 두째칸 1칸. 활용

만화로 배우는 쉬운 태그공부 포토샵 공부 1주일만에 컴맹탈출

첫째칸 2칸. 두째칸 1칸. 활용2

	이름: 석크리 나이: 20 거주지: 뉴욕
석크리

 

▒ 요 약

칸나누기-응용! 실습! 확인!

테이블을 가로로, 세로로 맘대로 칸나누기하는 법을 배워보았습니다.

'가로형'에는 <colspan=숫자> 태그
'세로형'에는 <rowspan=숫자> 태그

두 태그를 사용하여 칸나누기를 하였고
각 각 가로, 세로형으로 확인해 보았죠?
다들 잘 이해하셨나 확인해볼까요?
응용형을 배우고 실습하여 확인해 보죠. ^^


응용1

사진	오키(-_-)+
	운영자
태그공부, 포토샵공부 담당
열심히 열심히

가로, 세로 막 섞여있죠?
복잡하다고 겁부터 먹지 마세요. ^^
자, 선이 끊긴곳에 "가상의 선"을 그어보세요.
"4 x 2" 테이블이죠?
4개의줄 <tr> 과 줄마다 2개의 칸 <td>이 필요합니다.
1,2번째줄 첫째칸 세로로합치고
3,4번째줄 첫째두째칸을 가로로 합치고. 쉽죠?




응용2

이미지		공지사항
공부 교실	학생 마당	배너
		배너

이 또한 가로,세로 섞인 모델입니다. (운영자 '몽'이 물어본 테이블입니다.)
자, 이것 역시 선이 끊긴곳에 "가상의 선"을 그어보세요.
"3 x 3" 테이블이죠?
3개의줄 <tr> 과 줄마다 3개의 칸 <td>이 필요합니다.
1번째줄 첫째칸 둘째칸을 가로로 합치고
2,3번째줄 첫째칸 두째칸을 세로로 합치면 되겠죠?


어떠세요? 이제 어떤 모양이라도
응용하실수 있겠나요?

몇 개의 예제와 소스를 올리지만 꼭 실습을 해보고 이해를 하셔야
자유롭게 칸을 만들 수 있습니다.

예제소스를 보고 꼭 실습해보세요!

▒ 요 약

응용1

사진	오키(-_-)+
	운영자
태그공부, 포토샵공부 담당
열심히 열심히

응용2

이미지		공지사항
교 실	학생 마당	배너
		배너

▒ 샘 플 : 응용 2 실전 적용

		■ 공지사항 ■ 1.태그공부 오픈 2.포토샵 오픈 3.금주의 회원 4.오키만세
┍━━━━━━┯ │‥태 그 교실 │ │‥포토샵교실│ ┕‥사 진 교실 ┙	학생 마당 ┍━━━━━━┯ ├☆자 습 방 ┤ ├☆질 문 방 ┤ ├☆시 험 방 ┤ ┕☆친 목 방 ┙

 

▒ 요 약

칸나누기-응용 <rules>태그

테이블의 다양한 태그를 배웠습니다.
마지막으로 응용 태그 하나 더 배우고 테이블 단원을 정리하고
다음 단원으로 넘어갑니다.

'가로형'에는 <colspan=숫자> 태그
'세로형'에는 <rowspan=숫자> 태그
를 이용하여 자유롭게 테이블을 구성하는 방법외에
태그를 사용하여 테이블 모양을 변형시키는 태그입니다.

rules='속성'

태그입니다.
<table>태그 안에 끼워넣어 사용하며,
4가지 속성에 따라 테이블 칸 모양을 각각 속성별로 나타냅니다.

속성:

all: 모든 칸을 보여줍니다.
cols: 테이블의 칸을 세로로 합쳐진 모양으로 보여줍니다.
rows: 테이블의 칸을 가로로 합쳐진 모양으로 보여줍니다.
none: 테이블 테두리만 있고 안에 칸들은 없는듯 보여줍니다.

각 속성별로 소스와 결과를 보면 이해하기가 쉽습니다.
몇 개의 예제와 소스를 눈으로 보고 끝내지 마시고
꼭 실습을 해보고 이해를 하셔야 합니다.

▒ 요 약

속성1 rules='all'

5	천	만	프	로	젝	트
컴	으	로	허	자	허	자

속성2 rules='cols'

5	천	만	프	로	젝	트
컴	으	로	허	자	허	자

속성3 rules='rows'

5	천	만	프	로	젝	트
컴	으	로	허	자	허	자

속성4 rules='none'

5	천	만	프	로	젝	트
컴	으	로	허	자	허	자