SlideShare a Scribd company logo
1 of 115
Understanding HTML/CSS

표와 입력양식

을수
eulsoo.com
 
eulsoo.jung@gmail.com

이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
1. 표
2. 입력양식
표는 규칙을 가지고 쉽게 정보를 이해시키기 위한
디자인 형식의 하나입니다.
아주 오래전부터
사용되었습니다.
여기서 규칙은 행과 열을 이용해서
관련된 정보를 나열하는 것을 말합니다.

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원
이런 표(table)는 흔히
행(row)과 열(column)이라고 나누어 부릅니다.
col

col

col

col

월

row

col

화

수

목

row

지출

1000원

500원

200원

300원

row

수입

2000원

400원

100원

900원
이렇게 격자모양으로 row와 col(column)으로 짜여져 있는
정보는 형태적으로 사람에게 쉽게 전달할 수있을 뿐아니라
컴퓨터 입장에서도 알 수 있어야 하겠죠?
col

col

col

col

월

row

col

화

수

목

row

지출

1000원

500원

200원

300원

row

수입

2000원

400원

100원

900원

월요일에 수입이
2000원이군!
표짜기
표를 구성하는 가장 기본적인 마크업 구조입니다.

하나의 표를

만듭니다.

하나의 행을

만듭니다.

table

tr

table row
td1000원/td

하나의 셀을

table data 만듭니다.
td500원/td

td200원/td

td300원/td

/tr

/table
보시다시피 tabletrtd또한
모두 하나의 box들일 뿐입니다.

하나의 표를

만듭니다.

하나의 행을

만듭니다.

table
tr
td

1000원

td

table

tr

table row
table
td1000원/td

 data
셀을

만듭니다. td500원/td

td200원/td

td300원/td

/tr

/table

500원

td

200원

td

300원
이렇게 만들어지는 표는 영역에 따라
층구조를 가지고 쌓여지면서 보여집니다.
table
tr
td

1000원

td

500원

td

200원

td

300원

셀 td
행 tr
테이블 table
만약 행(row)하나가 추가 된다면
tr을 추가하면 됩니다.

1000원

500원

200원

300원

2000원

400원

100원

900원

table

tr

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table

tr즉 table의
row가 하나 추가
됩니다.
그럼 열(column)의 제목(table heading)은
어떻게 만들까요?
th(열제목) 셀을 넣기위해 tr을 추가하고 scope속성
에 col값을 넣어 column(열)용 th인것을 알려줍니다.

월

화

수

목

1000원

500원

200원

300원

2000원

400원

100원

900원

table

tr

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
추가된 th은 td와 같은 셀층에 속해 있습니다.

셀 tdth
행 tr
테이블 table
이제 행(row)의 제목(table heading)을
추가해 볼까요?
해당 row의 첫번째에th셀로 넣고 scope속성
에 row값을 넣어 row용 th인것을 알려줍니다.

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

빈셀에 보더를 표시하지 못
하는 ie7브라우저를 위해
넣습니다.
table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
잠깐! 왜 th를 구분하고 scope속성을
넣어야 할까요?
표는 행제목과 열제목의 관계를 지어서 정보를 식별하는 방식이기 때문에
눈을 가진 우리처럼 컴퓨터도 인식할 수 있어야 합니다.

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원
눈이 없는 컴퓨터가 식별할 수 있도록 열제목과 행제목
th을 td와 연결시켜 줄 수 있는 장치가 필요합니다.
table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table

흠.. 열제목 월과 행
제목 지출에 해당하
는 돈은 1000원이군.
그렇다면 이렇게 컴퓨터가 표의 의미를 알 수 있도록 하는
이유는 무엇일까요?
시각이 없는 장애인들은 컴퓨터의 도움을 받아
스크린리더(읽어주는 기능)통해 소리로 정보를 전달 받기 때문에
웹사이트의 정보를 누구나 누릴 수 있도록 접근성을 보장해야합니다.

html

소리

table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr


웹페이지

스크린리더

장애인
월 지출
1000원
스크린리더가 웹페이지를 읽어 주다가 표를 만나면
좌에 우방향으로 처리하기 때문에 행과 열제목에
해당하는 정보를 제대로 인지하기 어렵습니다.
table

tr


월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

td/td

td월/td

td화/td

td수/td

td목/td

/tr

tr

td지출/td

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

td수입/td

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
그렇기 때문에 스크린리더는 표를 탐색하는
별도의 기능을 통해 열과 행제목을 짝지어서 정보를
인지할 수 있도록 되어 있습니다.
th와 scope속성으로 구
분을 해주어야 기능을 사
월 용할 수 있습니다.
화
수
목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
이런 접근성 때문에 표를 가지고 배치를 하면
안되는 큰 이유중에 하나입니다.

지금 무슨소릴 하는거야!
말이 하나도 안되네
열(column)을 합치기
colspan속성을 이용해 합칠 셀의 갯수를 넣고
합쳐질 셀의 태그를 삭제합니다.

월

지출

수입

화

800원

1400원

수

목

200원

300원

900원

table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td colspan=”2”800원/td

td/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td colspan=”3”1400원/td

td/td

td/td

td900원/td

/tr

/table
행(row) 합치기
rowspan속성을 이용해 합칠 셀의 갯수를 넣고
합쳐질 셀의 태그를 삭제합니다.

월

화

500원

지출
500원
수입

수

목

300원
200원

400원

900원

table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td rowspan=”2”500원/td

td500원/td

td rowspan=”2”200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td/td

td400원/td

td/td

td900원/td

/tr

/table
행(row)과 열(col)합치기
rowspan과 colspan속성을 이용해 합칠 셀의 갯수를 넣고
합쳐질 셀의 태그를 모두 삭제합니다.

월

화

목

200원

지출

수

300원

100원

900원

500원
수입

table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td colspan=”2” 

rowspan=”2”500원/td

td/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td/td

td/td

td100원/td

td900원/td

/tr

/table
잠깐! 이렇게 행이나 열을 합칠
경우 컴퓨터에게 어떻게
의미를 전달할 까요?

월

화

목

200원

지출

수

300원

500원
수입

100원
900원
도대체 어떻게 되었
다는 거야...

table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td colspan=”2” 

rowspan=”2”500원/td

td/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td/td

td/td

td100원/td

td900원/td

/tr

/table
셀들이 병합되었을 경우 현재 이셀이
어떤 행제목과 열제목에 속했는지를 표시해 주면 됩니다.

행과열제목에 id을 부여합니다.

c11

지출

c13

c14

월

r11

c12

화

수

목

c11

c12

200원

300원

100원

900원

500원

r12

수입

r11

r12

속해있는 열과행 id값을 header속성에
값으로 지정해 줍니다.

table

tr

thnbsp;/th

th scope=”col” id=”c11”월/th

th scope=”col” id=”c12”화/th

th scope=”col” id=”c13”수/th

th scope=”col” id=”c14”목/th

/tr

tr

th scope=”row” id=”r11”지출/th

td colspan=”2” rowspan=”2”

header=”r11 r12 c11 c12”500원/td

td/td

td header=”r11 c13”200원/td

td header=”r11 c14”300원/td

/tr

tr

th scope=”row” id=”r12”수입/th

td/td

td/td

td header=”r12 c13”100원/td

td header=”r12 c14” 900원/td

/tr

/table
행(row)컨트롤
tr에 class를 이용해서 해당 행안에 속해 있는 모든셀(th,td)들을
컨트롤 할 수 있습니다.

.active {font-size:24px}

월

화

수

목

지출 1000원 500원 200원 300원
수입

2000원

400원

900원
100원
.active의 자식으로
속해있는 모든 th,td
에 글씨크기가 상속
됩니다.

table

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr class=”active”

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
열(column)컨트롤
col을 추가하여 해당하는 column셀 전체를 컨트롤합니다.

.active {background-color:black;}

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

table

colgroup

col /

col class=”active”

col style=”color:red”/

col /

col /

/colgroup

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
기본적으로 col하나는 가로셀의 갯수
와 일치합니다.

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

table

colgroup

col /

col class=”active”

col style=”color:red”/

col /

col /

/colgroup

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
colgroup을 넣지 않고 col만 넣어도 됩니다.

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

table

col /

col class=”active”

col style=”color:red”/

col /

col /

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
colgroup을 둘로 나누어서 구룹핑할 수 도 있습니다.

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

table

colgroup style=”background:black”
col /

col /

col /

/colgroup

colgroup

col /

col /

/colgroup

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/table
열(column)을 컨트롤하기 위해 만들어진
colgroupcol은 자신들의 층구조를 가지고 있습니다.

셀 tdth
행 tr

열 col
열그룹 colgroup
테이블 table
colgroup처럼 열tr을 구룹화 할 수 있습니다.
열제목thead 내용tbody 합계tfoot부분으로
tr을 구조화 시켜줄 수도 있습니다.
이때tfoot은 없을 수 있지만, theadtbody는 반드시
같이 사용 하여야만 합니다.

thead

tbody

tfoot

table

colgroup

col /

col class=”active” colspan=”2”

col style=”color:red”/

col /

col /

/colgroup

thead

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

차액

1000원

-100원

-100원

600원

table

colgroup

col /

col class=”active” colspan=”2”

col style=”color:red”/

col /

col /

/colgroup

thead

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
theadtbodytfoot도 층구조중
하나를 가지게 됩니다.

셀 tdth
행 tr
행그룹 theadtbodytfoot
열 col
열그룹 colgroup
테이블 table
table

caption주간용돈현황/caption

colgroup

col /

col class=”active” colspan=”2”

col style=”color:red”/

스크린리더를 이용하는 시각장애인을 위해서 반드시 표제목을 넣어줍니다
col /

col /

/colgroup

thead

주간용돈현황
tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

월
화
수
목
/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

지출
1000원
500원
200원
300원
td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

2000원
900원
수입
400원
100원
td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

차액
1000원
-100원 -100원
600원
td100원/td

td900원/td

/tr

/tbody

/table

caption으로 표제목 표시하기
summery 속성으로 내용 요약하기
스크린리더를 이용하는 시각장애인을 위해서 요약내용을 넣어줍니다
주간용돈현황

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

차액

1000원

-100원

-100원

600원

table summery=”월화수목, 지출,수입,차액” 

caption주간용돈현황/caption

colgroup

col /

col class=”active” colspan=”2”

col style=”color:red”/

col /

col /

/colgroup

thead

tr

thnbsp;/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
선긋기
보더가 적용되지 않은
상태의 표입니다.

table summery=”월화수목, 지출,수입,차액” 

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

/colgroup

thead

tr

th/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
표는 두가지 종류로 보더를 표현합니다.

분리(separate)된 보더모델

합쳐진(collapse) 보더모델
분리(separate)된 보더모델

table

th

td

합쳐진(collapse) 보더모델
table summery=”월화수목, 지출,수입,차액” 

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

/colgroup

thead

th,td {border:1px solid black;}

tr

th/th

tr {border:1px solid yellow;}

th scope=”col”월/th

th scope=”col”화/th

thead,tbody,tfoot {border:1px solid blue;}

th scope=”col”수/th

col {border:1px solid green;}

th scope=”col”목/th

/tr

colgroup {border:1px solid lime;}

/thead

table {border:1px solid red;}
tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

모든 표는 기본값으로
td2000원/td

td400원/td

분리된 보더모델로 표시
td100원/td

됩니다.
td900원/td

/tr

/tbody

/table

먼저 표를 구성하는
모든 태그에 보더를 지정해 봅시다
table summery=”월화수목, 지출,수입,차액” 

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

/colgroup

thead

th,td {border:1px solid black;}

tr

th/th

tr {border:1px solid yellow;}

th scope=”col”월/th

th scope=”col”화/th

thead,tbody,tfoot {border:1px solid blue;}

th scope=”col”수/th

col {border:1px solid green;}

th scope=”col”목/th

/tr

colgroup {border:1px solid lime;}

/thead

table {border:1px solid red;}
tfoot

tr

th scope=”row”차액/th

분리된 보더모델에서는
td1000원/td

td-100원/td

tr, thead, tbody, tfoot, col
td-100원/td

colgroup은 보더가 표시되
td600원/td

/tr

지 않습니다.
/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

tdthtable에만
td400원/td

td100원/td

보더가 표시됩니다.
td900원/td

/tr

/tbody

/table

분리된 보더 모델에서는
tablethtd만 표시됩니다
table summery=”월화수목, 지출,수입,차액” 

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

/colgroup

thead

tr

th,td {border:1px solid black;}

th/th

tr {border:1px solid yellow;}

th scope=”col”월/th

th scope=”col”화/th

thead,tbody,tfoot {border:1px solid blue;}

th scope=”col”수/th

col {border:1px solid green;}

th scope=”col”목/th

/tr

colgroup {border:1px solid lime;}

/thead

table {border:1px solid red;

tfoot

tr

border-collapse:collapse;

th scope=”row”차액/th

td1000원/td

}
td-100원/td

합쳐진 보더모델에서는 모든 요
td-100원/td

소에 보더가 표시됩니다.
td600원/td

/tr

다만 보더 두께가 같을 경우 층구
/tfoot

조의tbody

우선순위가 적용됩니다.
tr

하지만 ie7에서는 우선 순
th scope=”row”지출/th

위가 적용되지 않습니다.
td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table

border-collapse속성으로
합쳐진 보더모델로 만들 수 있습니다.

층구조 우선순위에 따라
th, td의 보더만 보이게 됩
니다.
층구조가 낮더라고 보더의 두께가 굵
으면 우선순위가 가장 높아집니다.
th,td {border:1px solid black;}

tr {border:1px solid yellow;}

thead {border:5px solid blue;}

col {border:1px solid green;}

colgroup {border:1px solid lime;}

table {border:5px solid red;

border-collapse:collapse;

}

층구조상 세번째인
thead가 보더의 굵기로
인해 thtd보다 우선
됩니다.

보더가 5px이 때문에 th,td보다 높지만 thead보다는 낮습니다.

table summery=”월화수목, 지출,수입,차액” 

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

/colgroup

thead

tr

th/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

하지만 ie7에서는
td-100원/td

td600원/td

성립되지않습니다.
/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
보더의 굵기가 같은 상황에서는
보더스타일에 따라 우선됩니다.
th,td {border:1px solid black;}

tr {border:1px solid yellow;}

thead {border:5px solid blue;}

col {border:1px solid green;}

colgroup {border:1px solid lime;}

table {border:5px double red;

border-collapse:collapse;

}

층구조상 세번째인
thead가 보더의 굵기로
인해 thtd보다 우선
됩니다.

이제 보더스타일이 double이므로 thead보다도 높습니다.

table summery=”월화수목, 지출,수입,차액” 

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

/colgroup

thead

tr

th/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

합쳐진 보더모델에서는 모든 요
td-100원/td

소에 보더가 표시됩니다.
td600원/td

/tr

다만 보더 두께가 같을 경우 층구
/tfoot

조의tbody

우선순위가 적용됩니다.
tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
합쳐진 보더모델을 가진 표에서
보더의 우선순위를 다시한번 정리해 봅시다.
보더가 같은 굵기일때

층구조가 우선합니다

보더가 굵으면 층구조를

무시하고 우선합니다.

보더가 같은 굵기일때

보더스타일이 우선합니다.

층구조

보더굵기

보더스타일
doblue
solid
dashed
dotted
ridge
outset
background속성 또한 층구조
순으로 표시됩니다.
th,td {border:1px solid black;}

tr {border:1px solid yellow;}

thead {background-color:blue;}

col {border:1px solid green;}

colgroup {border:1px solid lime;}

table {border:1px solid red;

background-color:red;}

층구조가 높은 순으로
보이게 됩니다.

table summery=”월화수목, 지출,수입,차액” 

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

/colgroup

thead

tr

th/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

합쳐진 보더모델 일 경우...
td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
표의 여백과 간격
분리된 보더모델에서 벌어진 공간
은 조절할 수 있습니다
th,td {border:1px solid black;}

tr {border:1px solid yellow;}

thead {background-color:blue;}

col {border:1px solid green;}

colgroup {border:1px solid lime;}

table {border:1px solid red;

background-color:red;

border-spacing:10px;}

table summery=”월화수목, 지출,수입,차액” 

cellspacing=”10px”

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

ie7에서는 border-spacing
col /

이 적용되지 않기때문에
/colgroup

thead

html속성인 cellspacing을
tr

th/th

추가해 줍니다.
th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
table summery=”월화수목, 지출,수입,차액”
cellspacing=”10px”

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

th,td {border:1px solid black; padding:10px;}

 /colgroup

thead

tr {padding:10px}

tr

thead {padding:10px}

th/th

th scope=”col”월/th

col {padding:10px}

th scope=”col”화/th

th scope=”col”수/th

colgroup {padding:10px}

th scope=”col”목/th

table {border:1px solid red;

/tr

/thead

background-color:red;

tfoot

border-spacing:10px;

tr

th scope=”row”차액/th

padding:10px;}
td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

table은 border-spacing:10px 간격에
tbody

tr

padding:10px이 추가되었으며, 각셀(th,td)에
th scope=”row”지출/th

10px의 여백(padding)이 생겼습니다.
td1000원/td

td500원/td

ie7에서는 table의 padding속성이 적용되
td200원/td

td300원/td

지 않으며,tdth에는 패딩이 적용됩니다.
/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table

분리된 보더모델의 표에서 padding은
tablethtd에서만 적용됩니다.
table summery=”월화수목, 지출,수입,차액”
cellpadding=”10px”

caption주간용돈현황/caption

colgroup

col /

col /

col /

col /

col /

th,td {border:1px solid black; padding:10px;}

 /colgroup

thead

tr {border:1px solid yellow;}

tr

thead {background-color:blue;}

th/th

th scope=”col”월/th

cellpadding속성은 padding과
col {border:1px solid green;}

th scope=”col”화/th

중복 사용시 적용되지 않습니다.
th scope=”col”수/th

colgroup {border:1px solid lime;}

th scope=”col”목/th

table {border:1px solid red;

/tr

/thead

background-color:red;

tfoot

border-spacing:10px;

tr

th scope=”row”차액/th

padding:10px;}
td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table

cellpadding속성으로도 셀(th,td)에
padding을 적용할 수 있습니다.
표의 구성
분리된 보더모델이던 아니던 표에서는
오직table만 margin을 지정할 수 있습니다.

익명의 박스에 생긴 margin
table의 박스

table {

padding:10px;

margin:10px;

border:2px solid red;

border-collapse:collapse

}

caption이 있는 표의 경우
익명의 박스를 만들어 caption
을 감싸게 하고 margin을 줄경우
익명의 박스의 바깥쪽으로 적용
하게 되어 있다

주간용돈현황
월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원
표제목 caption영역에 대해 알아보겠습니다.

caption또한 박스로 되어 있습니다.

주간용돈현황
월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원
초기값이 가운데 정렬인것만 빼고는
박스모델이 그대로 적용됩니다.
caption {

padding:10px;

margin:10px;

border:1px solid red;

}
가운데정렬

주간용돈현황
월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원
text-align으로 좌,우측으로 정렬할 수 있습니다.
caption {

padding:10px;

margin:10px;

border:1px solid red;

text-align:right;

}

주간용돈현황
월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원
또한 영역 자체를 아래에 둘 수도 있습니다.
caption {

caption-side:bottom;

padding:10px;

margin:10px;

border:1px solid red;

text-align:right;

}

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원

주간용돈현황
표제목이 필요가 없을지라도 접근성을 위해서
반드시 넣어주어야 하므로, CSS로 눈에 보이지 않도록
처리할 수 있습니다.
caption {

position:absolute;

text-indent:-9999px;

}

월

화

수

목

지출

1000원

500원

200원

300원

수입

2000원

400원

100원

900원
표의 넓이와 조절
또한 표는 들어있는 컨텐츠의 양에
따라 넓이가 늘어 납니다.
table {

border-collapse:collapse;

}

th, td {

border:1px solid #000;

padding:0; 

}

늘어난 셀이 속해 있는 col의 셀들도 같이 늘어 납니다.

이에 따라 표도 같이 늘어 납니다.

table summery=”월화수목, 지출과수입” 

caption주간용돈현황/caption

thead

tr

th/th

th scope=”col”월/th

th scope=”col”화/th

th scope=”col”수/th

th scope=”col”목/th

/tr

/thead

tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

tbody

tr

th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th

td2000원/td

td400원/td

td100원/td

td900원/td

/tr

/tbody

/table
그러므로 표의 넓이와 각 col의 넓이를
지정해 줄 필요가 있습니다.
table {

width:100%;

border-collapse:collapse;

}

th, td {

border:1px solid #000;

padding:0; 

}

10%

10%

20%

30%
100%

body

30%

table summery=”월화수목, 지출과수입” 

caption주간용돈현황/caption

colgroup

col style=”width:10%”/

col style=”width:10%”

col style=”width:20%”/

col style=”width:30%”/

col style=”width:30%”/

/colgroup

thead

tr

th/th

th scope=”col”월/th

th scope=”col”화/th

col에 class속성을 이용하지 않은
th scope=”col”수/th

것은 번번히 달라지는 정보에 따라 넓이
th scope=”col”목/th

값은 표마다 모두 달라지기 때문에 인라인
/tr

/thead

스타일을 이용하였습니다.
tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

body에 적용된 margin까지
tbody

tr

표의 넓이가 100%넓이로 꽉차있습니다.
th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th
넓이가 지정되지 않은 col의 경우
남은 값을 자동으로 계산해 줍니다.
table {

width:100%;

border-collapse:collapse;

}

th, td {

border:1px solid #000;

padding:0; 

}

10%

10%

20%

auto
100%

body

30%

table summery=”월화수목, 지출과수입” 

caption주간용돈현황/caption

colgroup

col style=”width:10%”/

col style=”width:10%”

col style=”width:20%”/

col/

col style=”width:30%”/

/colgroup

thead

tr

th/th

th scope=”col”월/th

th scope=”col”화/th

col에 class속성을 이용하지 않은
th scope=”col”수/th

것은 번번히 달라지는 정보에 따라 넓이
th scope=”col”목/th

값은 표마다 모두 달라지기 때문에 인라인
/tr

/thead

스타일을 이용하였습니다.
tfoot

tr

th scope=”row”차액/th

td1000원/td

td-100원/td

td-100원/td

td600원/td

/tr

/tfoot

body에 적용된 margin까지
tbody

tr

표의 넓이가 100%넓이로 꽉차있습니다.
th scope=”row”지출/th

td1000원/td

td500원/td

td200원/td

td300원/td

/tr

tr

th scope=”row”수입/th
표의 경우 column의 넓이가 다양하기 때문에 %단위로 전체
넓이과 각 column의 넓이를 조절한 후 표를 감싸는 요소에
의해 제한 되는 것이 좋습니다.

menu1

menu2

menu3

menu4

월

화

수

목

지출 1000원 500원 200원 300원
수입
20%

2000
원
20%

400원 100원 900원
20%
100%

20%

20%
입력양식
제공된 입력양식을
통해 사용자들은 자신의
정보를 서버로 전송할 수
있습니다.
트위터

댓글
웹메일

페이스북
입력양식의 종류
input type=”
텍스트필드
패스워드
라디오
체크박스
파일

버튼

”/

”text”

”password”

”radio”

”checkbox”

”file”

”submit”

”button”

”images”

”reset”

select 셀렉트박스
textarea 텍스트에어리어

button type=”submit”확인/button
button type=”button”이전/button

button type=”reset”초기화/button
input은 type속성이 무엇이냐에 따라 달라집니다.
input type=”
텍스트필드
패스워드
라디오
체크박스
파일

버튼

”/

text

password

radio

checkbox

file

submit

button

images

reset

스스로 닫는 태그입니다.
일반적인 텍스트를 입력할 때
보이지 않게 입력할 때
선택사항중 하나를 선택할 때
여러개를 확인(선택)할 때
파일을 첨부할 때
입력된 데이타 값을 전송할 때
범용으로 사용하는 버튼
용도는 submit과 같고 이미지로
사용할 때
입력된 데이타 값을 초기화할 때
select는 선택메뉴를 제공할 때 사용됩니다.
초기값

그룹핑

다중선택

select

option selected=selected위치를 선택해 주세요/option

option미국/option

option일본/option

optgroup label=한국

option서울/option

option대전/option

option부산/option

option광주/option

/optgroup

option브라질/option

/select
select size=3 multiple=multiple title=지역선택

option노원구/option

option강북구/option

option서초구/option

option은평구/option

option동대문구/option

/select
textarea는 여러 줄로 된 텍스트필드를 제공합니다.

textarea rows=”5” cols=”50”

남기고 싶은 말을 적어주세요

/textarea
rows는 줄수, cols는 텍스트필드의 넓이입니다.
글자의 수를 이용해서 넓이를 만들어 주기 때문에
정해진 글씨 크기에 따라 다를 수 있고
그렇기 때문에 CSS를 이용하게 됩니다
inputselecttextarea의 양식태그를 이용해서
정보를 입력받고 전송하는데 필요한 속성(기능)을
몇가지 알아보겠습니다.

name=”” maxlength=”” value=”” size=””
name=””
name속성을 이용해서 사용자가 입력한 값과 함께
서버로 전송될 컨트롤 이름을 지정해 줍니다.
텍스트필드

input type=”text” name=”m_id” /

패스워드

input type=”password” name=”m_pw” /

개발자가
개발을 진행하면서 구체적인
name값을 정해주기 때문에
html/css만 다루는 작업자는
빈값으로 둡니다.

라디오
input type=”radio” name=”age” / 1세~10세

input type=”radio” name=”age” / 10세~20세

input type=”radio” name=”age” / 20세~30세
체크박스

radio,checkbox는 한가지의 이름
으로 선택된 정보가 전송되어야
하기 때문에 같은 name값을
지정합니다.

input type=”checkbox” name=”likething” / 책보기

input type=”checkbox” name=” likething” / 공놀이

input type=”checkbox” name=” likething” / 공부하기
파일첨부

input type=”file” name=”m_file” /

버튼

input
input
input
input

셀렉트박스

select name=”location”

option selected=selected위치를 선택해 주세요/option

option미국/option

option일본/option

optgroup label=한국

option서울/option

option대전/option

option부산/option

option광주/option

/optgroup

option브라질/option

/select

텍스트에어리어

textarea maxlength=120 name=”memo”

남기고 싶은 말을 적어주세요

/textarea

type=”submit” name=”m_btn” /
type=”reset” name=”m_btn” /
type=”image” src=”foo.jpg” name=”m_btn” /
type=”button” name=”m_btn” /
maxlength=””
텍스트를 입력받는 양식에서는 maxlength속성으로
최대 글자수를 지정해 줄 수 있습니다.

텍스트필드

input type=”text” name=”m_id” maxlength=”10”/

패스워드

input type=”password” name=”m_id” maxlength=”10” /

텍스트에어리어

textarea name=”memo” maxlength=120 

남기고 싶은 말을 적어주세요

/textarea
size=””
size속성으로는 입력필드의 넓이를 조절할 수 있습니다.
이때의 값은 글자수를 이용하게 됩니다.
텍스트필드

input type=”text” name=”m_id” maxlength=”10” size=”5”/

패스워드

input type=”password” name=”m_id” maxlength=”10” size=”5” /

하지만 정해진 글씨크기에
따라 다를 수 있기 때문에 보통의 경우에
css를 이용해서 사용하게 됩니다.
size속성을 지정하지 않으면 브라우저마다의
기본넓이로 보여줍니다.
value=””
value속성은 전송될 값을 지정할 때 사용됩니다.
라디오
input type=”radio” name=”age” value=”0110”/ 1세~10세

input type=”radio” name=”age” value=”1020”/ 10세~20세

input type=”radio” name=”age” value=”2030”/ 20세~30세

checkbox의 경우 다중선택을 할 수
있기 때문에 선택한 모든 value값을
서버로 전송하게 됩니다.

age라는 name값과 함께
value값을 서버로 전송합니다.
1020을 선택했을 경우
“age 1020”을 서버로
보내게 됩니다.

체크박스
input type=”checkbox” name=”likething” value=”book”/ 책보기

input type=”checkbox” name=” likething” value=”playball”/ 공놀이

input type=”checkbox” name=” likething” value=”study”/ 공부하기
셀렉트박스

select name=”lacation”

option selected=selected value=””위치를 선택해 주세요/option

option value=”america”미국/option

option value=”japan”일본/option

선택한 해당 option의
optgroup label=한국

value값을 name인 location과
option value=”seoul”서울/option

 서버로 전송합니다.
함께
option value=”daejeon”대전/option

option value=”busan”부산/option

option value=”kwangju”광주/option

/optgroup

option value=”brazil”브라질/option

/select
텍스트필드에서 value속성은

텍스트필드에서는 입력초기값
으로 사용됩니다.
텍스트필드

input type=”text” name=”m_id” value=”” /

이전 경우와 다르게
입력 초기값으로 사용됩니다.
만약 초기값이 없을 경우는
값을 비워둡니다.
직접 입력을 받는 태그 외에도 양식의 영역을 정해주고
그룹핑하고 제목을 달아주는 태그들도 있습니다.

form

입력을 받고 서버로 전송하는 영역을 정해줌

fieldset

양식내에서 그룹핑해 줄 때 사용함

legend

그룹핑한 fieldset에 제목을 달아줌

label

각 각의 입력양식 마다 제목을 달아줌
form

div class=member

fieldset class=basic

legend기본정보/legend

label for=m_id아이디/label

input id=m_id type=text/

br/

label for=m_pw패스워드/label

input id=m_pwtype=password/

/fieldset


!

fieldset class=sub

legend부가정보/legend

label for=m_email이메일/label

input id=m_email type=text/

br/

label for=m_tel전화번호/label

input id=m_teltype=text/

/fieldset

/div

/form
먼저form에 대해 알아볼까요?
form은 서버에게 전송할 수있는
입력양식 영역임을 알려줍니다.
form action=”eulsoo.com/test.php”
method=”get”

div class=”member”

...

...

...

/div

/form
action=””은 폼안에 입력한 정보를 보
낼 서버주소를 적어줍니다.
method=””는 입력한 정보를 get방식
으로 보낼지 post방식으로 보낼지를 결정
합니다.

서버측개발과 관련된 속성이므로
개발자가 선언하게 됩니다.
form은 눈에 보이는 모양과
상관없이 html상의 양식영역을 위
해마크업 합니다.
div

양식의 넓이를 지정하기
위해 div를 사용하였습니다.
이때form은 아무 CSS속성도
사용하지 않았기 때문에
눈에 보이지 않고 그냥 뷰포트에
꽉차 있을 뿐입니다.

form은 CSS를 적용하기 위한
태그라기 보다는 입력된 정보를 보내기
위한 html상의 영역을 지정합니다.
그렇기 때문에 form사용에 대한
자세한 속성지정은 주로 개발자가
하게 됩니다.
fieldset은 입력정보를 그룹핑 시켜줍니다.
fieldset은 대부분의 브라우저에서
그룹핑한 양식영역을 border로 보여
줍니다.

기본값으로 border가
적용되는 fieldset은
border속성을 통해 두께나
선모양 그리고 심지어 없애
버릴 수 도 있습니다.

form

div class=”member”

fieldset class=”basic”

...

...

...

/fieldset

!
fieldset class=”sub”

...

...

...

/fieldset

/div

/form
legend은 fieldset의 제목을 달아 줍니다.
legend는 fieldset으로 구룹
핑한 영역을 대표하는 제목을 달아
줍니다. 이때 fieldset이 만드는
보더 중앙에 놓이게 됩니다.

기본값이 선의 가운데에
놓여서 그렇지 legend도
박스일 뿐입니다.

form

div class=”member”

fieldset class=”basic”

legend기본정보/legend

...

...

/fieldset

!
fieldset class=”sub”

legend부가정보/legend

...

...

/fieldset

/div

/form
label은 각 각의 입력양식에 제목을 달아 줍니다.
label을 사용하는것은 접근성 측
면에서 중요한 사안입니다. 스크린
리더기가 입력할 양식이 무엇인지
읽어 줄 수 있도록 label로
제목을 달아 주어야 합니다.

form

div class=”member”

fieldset class=”basic”

legend기본정보/legend

label for=m_id아이디/label

input id=m_id type=text/

...

/fieldset


!

fieldset class=”sub”

legend부가정보/legend

...

...

/fieldset

/div

/form
label은 두가지 방법으로 마크업 할 수 있습니다.
첫번째.
label과 대상을 분리하고
label에는 for를 대상이 되는
양식태그에는 id속성을 넣고 값을
똑같이 맞추어 줍니다.
form

div class=”member”

fieldset class=”basic”

legend기본정보/legend

label for=m_id아이디/label

input id=m_id type=text/

...

/fieldset


!

fieldset class=”sub”

legend부가정보/legend

...

...

/fieldset

/div

/form

두번째.
대상이되는 양식을 감싸서
label로 마크업 합니다.
form

div class=”member”

fieldset class=”basic”

legend기본정보/legend

label아이디

input id=m_id type=text/

/label

...

/fieldset


!

fieldset class=”sub”

대상을 감싸는 방식의
legend부가정보/legend

lable사용은 현재 스크린리더가
...

...

읽어주지 못하고 제목이 대상과
/fieldset

떨어질 수 없기 때문에 사용하지
/div

않는 것이 좋습니다.
/form
lable을 사용할 수 없는 상황이라면 양식태그에
title속성을 이용해 정보를 알려줍니다.
fieldset class=”basic”

legend기본정보/legend

label for=m_id아이디/label

input id=m_id type=text/br/

label for=m_pw비밀번호/label

input id=m_pw type=text title=”비밀번호”/br/

사진첨부

input type=file title=사진첨부/br/

지역선택

select title=구선택

option selected=”selected”구선택/option

option강북구/option

option서초구/option

/select

select title=동선택

option selected=”selected”동선택/option

option북창동/option

option평창동/option

/select


label과 title을 함께 쓰지 않습니다.
file의 경우 label영역까지 클릭
영역이 되므로 title을 사용하였습
니다.
여러개의 셀렉트에 한가지 제목이
있고 각 각의 제목이 필요할 경우
각 각의 셀렉트를 인지 할 수 있도
록 title을 이용해 표시하였습니다.
양식별로 label과 title을 어떻게 사용했는지
살펴 보겠습니다.
stronglabel for=your_id아이디/label/strong

input type=text id=your_id /

stronglabel for=your_pw패스워드/label/strong

input type=password id=your_pw /

em대문자,소문자,숫자 8자리 이상/em

strong연령대/strong

input id=age110 type=radio name=age /

label for=age1101세~10세/label

input id=age1020 type=radio name=age /

label for=age102010세~20세/label

input id=age2030 type=radio name=age /

label for=age203020세~30세/label
strong좋아하는일/strong

input id=book type=checkbox name=likething /

label for=book책보기/label

input id=palyball type=checkbox name=likething /

label for=palyball공놀이/label

input id=study type=checkbox name=likething /

label for=study공부하기/label

strong사진첨부/strong

input type=file title=사진첨부/

label을 이용할 경우 클릭영역이
label까지 확장 되므로
title속성으로 처리했습니다.
strong살고있는 곳/strong

select title=나라와도시선택

option selected=selected위치를 선택해 주세요/option

option미국/option

option일본/option

optgroup label=한국

option서울/option

option대전/option

option부산/option

option광주/option

/optgroup

option브라질/option

/select

select size=3 multiple=multiple title=지역선택

option노원구/option

option강북구/option

option서초구/option

option은평구/option

option동대문구/option

option강서구/option

/select
“남기고 싶은 말을 적어주세요 라는
글을 마크업하고 있기 때문에
title이나 label을 사용하지
않습니다.

textarea maxlength=120 rows=3 cols=50

남기고 싶은 말을 적어주세요

/textarea

input
input
input
input

type=button value=이전 title=이전 /

type=submit value=확인 title=확인 /

type=image src=images/submit.jpg alt=등록 /

type=reset value=초기화 title=초기화 /

이미지버튼의 경우 title속성을 사용
하지 않고 alt속성을 사용합니다.
다음과 같은 입력양식을
만들어 봅시다.
먼저 큰 구조를 만들어 줍니다.

form

div class=”member”

fieldset class=”basic”

legend기본정보/legend



/fieldset


!
fieldset class=”sub”

legend부가정보/legend



/fieldset

div class=”btn_area”

/div

/div

/form
양식을 넣을 박스를 만들어 줍니다.
form

div class=”member”

fieldset

legend기본정보/legend

p*표시는 반드시 입력해 주세요/p

div/div

div/div

div/div

div/div

div/div

div/div

/fieldset


!
fieldset

legend부가정보/legend

div/div

div/div

/fieldset

div class=”btn_area”/div

/div

/form
입력양식의 제목을 넣을 상자를 만들어 줍니다.
form

div class=”member”

fieldset

legend기본정보/legend

p*표시는 반드시 입력해 주세요/p

divstrong/strong/div

divstrong/strong/div

divstrong/strong/div

divstrong/strong/div

divstrong/strong/div

divstrong/strong/div

/fieldset


!
fieldset

legend부가정보/legend

divstrong/strong/div

div/div

/fieldset

div class=”btn_area”/div

/div

/form
어떤 입력양식이 들어가는지 볼까요?

input type=”text”/
input type=”password”/
input type=”raido”/
input type=”checkbox”/
input type=”file”/

select
textarea
input type=”button”/
input type=”submit”/
input type=”images”/
input type=”reset”/
이제 해당하는 양식을 넣어줍니다.

form

div class=”member”

fieldset

legend기본정보/legend

p*표시는 반드시 입력해 주세요/p

div

strong*label for=m_id아이디/label/strong

input type=text id=m_id name=  value=/

em대문자,소문자,숫자 8자리 이상/em

/div

div

strong*label for=m_pw패스워드/label/strong

input type=password id=m_pw name=  value= /

emquot; - quot; 표시는 제외/em

/div

div

strong*label for=tel전화번호/label/strong

input type=text id=tel name=  value=/

/div

divstrong/strong/div

divstrong/strong/div

divstrong/strong/div

/fieldset

label을 strong안에 제목으로
중략...
사용할 수 있습니다.
라디오, 체크박스, 파일첨부 양식을 넣어줍니다
...

...중략

div

strong*연령대/strong

input id=age110 type=radio name=age value= /

label for=age1101세~10세/label

input id=age1020 type=radio name=age value= /

label for=age102010세~20세/label

input id=age2030 type=radio name=age value= /

label for=age203020세~30세/label

/div

div

strong*좋아하는일/strong

input id=book type=checkbox name=like value= 

checked=checked/

label for=book책보기/label

input id=palyball type=checkbox name=like value= /

label for=palyball공놀이/label

input id=study type=checkbox name=like value= /

label for=study공부하기/label

/div

div

strong*사진첨부/strong

input type=file title=사진첨부 value=/

/div

/fieldset

중략...
label을 strong안에 사용할 수
있지만, label영역이 클릭영역
으로 잡히기 때문에 title을 사용합니다.
셀렉트 양식을 넣어 줍니다.
...

...중략

/fieldset

fieldset class=”sub”

legend부가정보/legend

div

strong살고있는 곳/strong

select title=나라와도시선택

option selected=selected value=

위치를 선택해 주세요 

/option

option value= 미국/option

option value= 일본/option

optgroup label=한국

option value= 서울/option

option value= 대전/option

option value= 부산/option

option value= 광주/option

/optgroup

option브라질/option

/select

select size=3 multiple=multiple title=지역선택

option value= 노원구/option

option value= 강북구/option

option value= 서초구/option

option value= 은평구/option

option value= 동대문구/option

option value= 강서구/option

/select

/div

중략...
textarea와 버튼들을 넣어 줍니다.

...

...중략


div

textarea maxlength=120 rows=3 cols=50

남기고 싶은 말을 적어주세요

/textarea

/div

/fieldset

div class=”btn_area”

input type=button value=이전 title=이전 /

input type=submit value=확인 title=확인 /

input type=image src=images/submit.jpg alt=등록 /
input type=reset value=초기화 title=초기화 /

/div

/div

/form
마크업을 모두 마쳤으면 이제 스타일을 만들어 봅시다.

입력양식은 모두 inline box로 되어
있으므로 한줄로 이어지게
되며, 이어지는 양식과 글자
혹은 버튼의 위아래가
맞지 않게 됩니다.
시작하기 앞서 입력양식의 기본스타일을
정의해 줍니다.
select, input, textarea {vertical-align:middle; font-size:14px;}

input[type=text], input[type=password] {padding:4px; color:green; border:1px solid #999;}
type=”text”와”password”에 보더를 재설정하여 플랫한 모양으로 바꿨습니다.

인라인요소인 양식하나의 높이는
양식마다 다르기 때문에 vertical-align
을 middle로 셋팅해 한줄의
중앙을 기준으로 맞춥니다.

이와 같은 기본셋팅은 reset.css에서
해주면 좋습니다.
먼저 양식 전체넓이와 여백, 간격, 배경색을 지정해 봅시다.
.member {width:500px; margin:0 auto; padding:20px; background-color:#F7F5DA;}
form

div class=”member”

fieldset

legend기본정보/legend



/fieldset


!
fieldset

legend부가정보/legend



/fieldset

div class=”btn_area”

/div

/div

/form
fieldset의 여백과 간격을 줍니다.
.member fieldset {padding:20px; margin:0 0 20px;}

form

div class=”member”

fieldset class=”basic”

legend기본정보/legend


padding



/fieldset


!
fieldset class=”sub”

legend부가정보/legend



margin

/fieldset

div class=”btn_area”

/div


/div

/form
사실fieldset은 legend가 있을때와
없을 때가 다름니다.
.member fieldset {padding:20px; margin:0 0 20px;}

form

div class=”member”

fieldset class=”basic”





/fieldset


!
fieldset class=”sub”

legend부가정보/legend



/fieldset

div class=”btn_area”

/div

/div

/form
비록 fieldset의
위쪽 border가legend박스의
중간을 지나가게 그려지지만
fieldset박스 영역위에 legend영역
이올라가 있는 셈이 됩니다.
legend를 꾸며줍니다.

.member legend {

padding:0 10px; 

font-weight:bold; 

font-size:16px; 

color:brown;

}
legend또한 박스이기 때문에 응용해 볼 수 있습니다

.member legend {

float:left;

margin:-34px 0 0 -75px;

padding:5px;

background-color: #999999;

border:1px solid #666666;

}
제목의 넓이를 일정하게 만들어 줍니다.
.member strong {display:inline-block; width:80px;}

인라인 요소인 strong에
display:inline-block을 주었기 때문에
ie7에서도 제대로 렌더링 됩니다.

form

div class=”member”

fieldset

legend기본정보/legend

p*표시는 반드시 입력해 주세요/p

div

strong*label for=m_id아이디/label/strong

input type=text id=m_id name=  value=/

em대문자,소문자,숫자 8자리 이상/em

/div

div

strong*label for=m_pw패스워드/label/strong

input type=password id=m_pw name=  value= /
emquot; - quot; 표시는 제외/em

/div

div

strong*label for=tel전화번호/label/strong

input type=text id=tel name=  value=/

/div

중략...
각 줄의 간격을 넓혀줍니다.
.member fieldset  div + div {margin:10px 0 0;}
각 fieldset의 자식div에서
첫번째 div를 제외한 모든 div에
위쪽으로 마진을 적용하여
간격을 만듭니다.

form

div class=”member”

fieldset

legend기본정보/legend

p*표시는 반드시 입력해 주세요/p

div

strong*label for=m_id아이디/label/strong

input type=text id=m_id name=  value=/

em대문자,소문자,숫자 8자리 이상/em

/div

div

strong*label for=m_pw패스워드/label/strong

input type=password id=m_pw name=  value= /

emquot; - quot; 표시는 제외/em

/div

div

strong*label for=tel전화번호/label/strong

input type=text id=tel name=  value=/

/div

중략...
버튼을 우측으로 정렬합니다.
.member .btn_area {text-align:right}

...

...중략


div

textarea maxlength=120 rows=3 cols=50

남기고 싶은 말을 적어주세요

/textarea

/div

/fieldset

div class=”btn_area”

input type=button value=이전 title=이전 /

input type=submit value=확인 title=확인 /

input type=image src=images/submit.jpg alt=등록
input type=reset value=초기화 title=초기화 /

/div

/div

/form
안내문구를 꾸며줍니다.
.member em {color:orange; font-size:12px}

form

em을 추가해 줍니다.
div class=”member”

fieldset

legend기본정보/legend

p*em표시는 반드시 입력해 주세요em/p

div

strong*label for=m_id아이디/label/strong

input type=text id=m_id name=  value=/

em대문자,소문자,숫자 8자리 이상/em

/div

div

strong*label for=m_pw패스워드/label/strong

input type=password id=m_pw name=  value= /

emquot; - quot; 표시는 제외/em

/div

div

strong*label for=tel전화번호/label/strong

input type=text id=tel name=  value=/

/div

중략...
필수표시 *를 꾸며줍니다.
.member b {color:red}

b을 추가해 줍니다.
form

div class=”member”

fieldset

legend기본정보/legend

pb*/bem표시는 반드시 입력해 주세요em/p

div

strongb*/blabel for=m_id아이디/label/strong
input type=text id=m_id name=  value=/

em대문자,소문자,숫자 8자리 이상/em

/div

div

strongb*/blabel for=m_pw패스워드/label/str
input type=password id=m_pw name=  value= /

emquot; - quot; 표시는 제외/em

/div

div

strongb*/blabel for=tel전화번호/label/strong
input type=text id=tel name=  value=/

/div

중략...
완성^^

More Related Content

Viewers also liked

Html초급 1강 웹표준의 이해
Html초급 1강 웹표준의 이해Html초급 1강 웹표준의 이해
Html초급 1강 웹표준의 이해tailofmoon
 
2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트Junsang Dong
 
rkskekfkakqktkdk
rkskekfkakqktkdkrkskekfkakqktkdk
rkskekfkakqktkdk지은 연
 
모바일 UX디자인의 개요
모바일 UX디자인의 개요모바일 UX디자인의 개요
모바일 UX디자인의 개요Junsang Dong
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 EssentialJunsang Dong
 
Ppt템플릿
Ppt템플릿Ppt템플릿
Ppt템플릿qku4x1
 
Medyo final patho slide orientation
Medyo final patho slide orientationMedyo final patho slide orientation
Medyo final patho slide orientationJoriz Abel
 
150610 教育学特殊XIV(学級規模)第8講
150610 教育学特殊XIV(学級規模)第8講150610 教育学特殊XIV(学級規模)第8講
150610 教育学特殊XIV(学級規模)第8講Koyo Yamamori
 
Christo Kutrovsky - Maximize Data Warehouse Performance with Parallel Queries
Christo Kutrovsky - Maximize Data Warehouse Performance with Parallel QueriesChristo Kutrovsky - Maximize Data Warehouse Performance with Parallel Queries
Christo Kutrovsky - Maximize Data Warehouse Performance with Parallel QueriesChristo Kutrovsky
 
Angina pektoris
Angina pektoris Angina pektoris
Angina pektoris saffaatifah
 
"Social Innovation for Employment" information session
"Social Innovation for Employment" information session "Social Innovation for Employment" information session
"Social Innovation for Employment" information session Nahdet El Mahrousa
 
Virtual + Magazine (2012 vEN)
Virtual + Magazine (2012 vEN)Virtual + Magazine (2012 vEN)
Virtual + Magazine (2012 vEN)michaelhandforth
 
Bò nhúng dấm chấm mắm sả ớt
Bò nhúng dấm chấm mắm sả ớtBò nhúng dấm chấm mắm sả ớt
Bò nhúng dấm chấm mắm sả ớtCác Món Ăn Ngon
 
Anteprima Pianificazione strategica per gli studi professionali della Guida a...
Anteprima Pianificazione strategica per gli studi professionali della Guida a...Anteprima Pianificazione strategica per gli studi professionali della Guida a...
Anteprima Pianificazione strategica per gli studi professionali della Guida a...eAgisco
 
Medyo final patho slide orientation
Medyo final patho slide orientationMedyo final patho slide orientation
Medyo final patho slide orientationJoriz Abel
 

Viewers also liked (18)

Html초급 1강 웹표준의 이해
Html초급 1강 웹표준의 이해Html초급 1강 웹표준의 이해
Html초급 1강 웹표준의 이해
 
2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트
 
rkskekfkakqktkdk
rkskekfkakqktkdkrkskekfkakqktkdk
rkskekfkakqktkdk
 
모바일 UX디자인의 개요
모바일 UX디자인의 개요모바일 UX디자인의 개요
모바일 UX디자인의 개요
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 Essential
 
Ppt템플릿
Ppt템플릿Ppt템플릿
Ppt템플릿
 
Medyo final patho slide orientation
Medyo final patho slide orientationMedyo final patho slide orientation
Medyo final patho slide orientation
 
150610 教育学特殊XIV(学級規模)第8講
150610 教育学特殊XIV(学級規模)第8講150610 教育学特殊XIV(学級規模)第8講
150610 教育学特殊XIV(学級規模)第8講
 
Christo Kutrovsky - Maximize Data Warehouse Performance with Parallel Queries
Christo Kutrovsky - Maximize Data Warehouse Performance with Parallel QueriesChristo Kutrovsky - Maximize Data Warehouse Performance with Parallel Queries
Christo Kutrovsky - Maximize Data Warehouse Performance with Parallel Queries
 
Fizyka
FizykaFizyka
Fizyka
 
Angina pektoris
Angina pektoris Angina pektoris
Angina pektoris
 
"Social Innovation for Employment" information session
"Social Innovation for Employment" information session "Social Innovation for Employment" information session
"Social Innovation for Employment" information session
 
Test
TestTest
Test
 
Virtual + Magazine (2012 vEN)
Virtual + Magazine (2012 vEN)Virtual + Magazine (2012 vEN)
Virtual + Magazine (2012 vEN)
 
Bò nhúng dấm chấm mắm sả ớt
Bò nhúng dấm chấm mắm sả ớtBò nhúng dấm chấm mắm sả ớt
Bò nhúng dấm chấm mắm sả ớt
 
Anteprima Pianificazione strategica per gli studi professionali della Guida a...
Anteprima Pianificazione strategica per gli studi professionali della Guida a...Anteprima Pianificazione strategica per gli studi professionali della Guida a...
Anteprima Pianificazione strategica per gli studi professionali della Guida a...
 
Medyo final patho slide orientation
Medyo final patho slide orientationMedyo final patho slide orientation
Medyo final patho slide orientation
 
Set2010 b.i. cmt
Set2010  b.i. cmtSet2010  b.i. cmt
Set2010 b.i. cmt
 

WebStandards-Basic 6.table & form

  • 3.   eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
  • 5. 표는 규칙을 가지고 쉽게 정보를 이해시키기 위한 디자인 형식의 하나입니다. 아주 오래전부터 사용되었습니다.
  • 6. 여기서 규칙은 행과 열을 이용해서 관련된 정보를 나열하는 것을 말합니다. 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원
  • 7. 이런 표(table)는 흔히 행(row)과 열(column)이라고 나누어 부릅니다. col col col col 월 row col 화 수 목 row 지출 1000원 500원 200원 300원 row 수입 2000원 400원 100원 900원
  • 8. 이렇게 격자모양으로 row와 col(column)으로 짜여져 있는 정보는 형태적으로 사람에게 쉽게 전달할 수있을 뿐아니라 컴퓨터 입장에서도 알 수 있어야 하겠죠? col col col col 월 row col 화 수 목 row 지출 1000원 500원 200원 300원 row 수입 2000원 400원 100원 900원 월요일에 수입이 2000원이군!
  • 10. 표를 구성하는 가장 기본적인 마크업 구조입니다. 하나의 표를 만듭니다. 하나의 행을 만듭니다. table tr table row td1000원/td 하나의 셀을 table data 만듭니다. td500원/td td200원/td td300원/td /tr /table
  • 11. 보시다시피 tabletrtd또한 모두 하나의 box들일 뿐입니다. 하나의 표를 만듭니다. 하나의 행을 만듭니다. table tr td 1000원 td table tr table row table td1000원/td data 셀을 만듭니다. td500원/td td200원/td td300원/td /tr /table 500원 td 200원 td 300원
  • 12. 이렇게 만들어지는 표는 영역에 따라 층구조를 가지고 쌓여지면서 보여집니다. table tr td 1000원 td 500원 td 200원 td 300원 셀 td 행 tr 테이블 table
  • 13. 만약 행(row)하나가 추가 된다면 tr을 추가하면 됩니다. 1000원 500원 200원 300원 2000원 400원 100원 900원 table tr td1000원/td td500원/td td200원/td td300원/td /tr tr td2000원/td td400원/td td100원/td td900원/td /tr /table tr즉 table의 row가 하나 추가 됩니다.
  • 14. 그럼 열(column)의 제목(table heading)은 어떻게 만들까요? th(열제목) 셀을 넣기위해 tr을 추가하고 scope속성 에 col값을 넣어 column(열)용 th인것을 알려줍니다. 월 화 수 목 1000원 500원 200원 300원 2000원 400원 100원 900원 table tr th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr td1000원/td td500원/td td200원/td td300원/td /tr tr td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 15. 추가된 th은 td와 같은 셀층에 속해 있습니다. 셀 tdth 행 tr 테이블 table
  • 16. 이제 행(row)의 제목(table heading)을 추가해 볼까요? 해당 row의 첫번째에th셀로 넣고 scope속성 에 row값을 넣어 row용 th인것을 알려줍니다. 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 빈셀에 보더를 표시하지 못 하는 ie7브라우저를 위해 넣습니다. table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 17. 잠깐! 왜 th를 구분하고 scope속성을 넣어야 할까요? 표는 행제목과 열제목의 관계를 지어서 정보를 식별하는 방식이기 때문에 눈을 가진 우리처럼 컴퓨터도 인식할 수 있어야 합니다. 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원
  • 18. 눈이 없는 컴퓨터가 식별할 수 있도록 열제목과 행제목 th을 td와 연결시켜 줄 수 있는 장치가 필요합니다. table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /table 흠.. 열제목 월과 행 제목 지출에 해당하 는 돈은 1000원이군.
  • 19. 그렇다면 이렇게 컴퓨터가 표의 의미를 알 수 있도록 하는 이유는 무엇일까요? 시각이 없는 장애인들은 컴퓨터의 도움을 받아 스크린리더(읽어주는 기능)통해 소리로 정보를 전달 받기 때문에 웹사이트의 정보를 누구나 누릴 수 있도록 접근성을 보장해야합니다. html 소리 table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr 웹페이지 스크린리더 장애인 월 지출 1000원
  • 20. 스크린리더가 웹페이지를 읽어 주다가 표를 만나면 좌에 우방향으로 처리하기 때문에 행과 열제목에 해당하는 정보를 제대로 인지하기 어렵습니다. table tr 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 td/td td월/td td화/td td수/td td목/td /tr tr td지출/td td1000원/td td500원/td td200원/td td300원/td /tr tr td수입/td td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 21. 그렇기 때문에 스크린리더는 표를 탐색하는 별도의 기능을 통해 열과 행제목을 짝지어서 정보를 인지할 수 있도록 되어 있습니다. th와 scope속성으로 구 분을 해주어야 기능을 사 월 용할 수 있습니다. 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 22. 이런 접근성 때문에 표를 가지고 배치를 하면 안되는 큰 이유중에 하나입니다. 지금 무슨소릴 하는거야! 말이 하나도 안되네
  • 23. 열(column)을 합치기 colspan속성을 이용해 합칠 셀의 갯수를 넣고 합쳐질 셀의 태그를 삭제합니다. 월 지출 수입 화 800원 1400원 수 목 200원 300원 900원 table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td colspan=”2”800원/td td/td td200원/td td300원/td /tr tr th scope=”row”수입/th td colspan=”3”1400원/td td/td td/td td900원/td /tr /table
  • 24. 행(row) 합치기 rowspan속성을 이용해 합칠 셀의 갯수를 넣고 합쳐질 셀의 태그를 삭제합니다. 월 화 500원 지출 500원 수입 수 목 300원 200원 400원 900원 table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td rowspan=”2”500원/td td500원/td td rowspan=”2”200원/td td300원/td /tr tr th scope=”row”수입/th td/td td400원/td td/td td900원/td /tr /table
  • 25. 행(row)과 열(col)합치기 rowspan과 colspan속성을 이용해 합칠 셀의 갯수를 넣고 합쳐질 셀의 태그를 모두 삭제합니다. 월 화 목 200원 지출 수 300원 100원 900원 500원 수입 table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td colspan=”2” rowspan=”2”500원/td td/td td200원/td td300원/td /tr tr th scope=”row”수입/th td/td td/td td100원/td td900원/td /tr /table
  • 26. 잠깐! 이렇게 행이나 열을 합칠 경우 컴퓨터에게 어떻게 의미를 전달할 까요? 월 화 목 200원 지출 수 300원 500원 수입 100원 900원 도대체 어떻게 되었 다는 거야... table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td colspan=”2” rowspan=”2”500원/td td/td td200원/td td300원/td /tr tr th scope=”row”수입/th td/td td/td td100원/td td900원/td /tr /table
  • 27. 셀들이 병합되었을 경우 현재 이셀이 어떤 행제목과 열제목에 속했는지를 표시해 주면 됩니다. 행과열제목에 id을 부여합니다. c11 지출 c13 c14 월 r11 c12 화 수 목 c11 c12 200원 300원 100원 900원 500원 r12 수입 r11 r12 속해있는 열과행 id값을 header속성에 값으로 지정해 줍니다. table tr thnbsp;/th th scope=”col” id=”c11”월/th th scope=”col” id=”c12”화/th th scope=”col” id=”c13”수/th th scope=”col” id=”c14”목/th /tr tr th scope=”row” id=”r11”지출/th td colspan=”2” rowspan=”2” header=”r11 r12 c11 c12”500원/td td/td td header=”r11 c13”200원/td td header=”r11 c14”300원/td /tr tr th scope=”row” id=”r12”수입/th td/td td/td td header=”r12 c13”100원/td td header=”r12 c14” 900원/td /tr /table
  • 28. 행(row)컨트롤 tr에 class를 이용해서 해당 행안에 속해 있는 모든셀(th,td)들을 컨트롤 할 수 있습니다. .active {font-size:24px} 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 900원 100원 .active의 자식으로 속해있는 모든 th,td 에 글씨크기가 상속 됩니다. table tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr class=”active” th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 29. 열(column)컨트롤 col을 추가하여 해당하는 column셀 전체를 컨트롤합니다. .active {background-color:black;} 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 table colgroup col / col class=”active” col style=”color:red”/ col / col / /colgroup tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 30. 기본적으로 col하나는 가로셀의 갯수 와 일치합니다. 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 table colgroup col / col class=”active” col style=”color:red”/ col / col / /colgroup tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 31. colgroup을 넣지 않고 col만 넣어도 됩니다. 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 table col / col class=”active” col style=”color:red”/ col / col / tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 32. colgroup을 둘로 나누어서 구룹핑할 수 도 있습니다. 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 table colgroup style=”background:black” col / col / col / /colgroup colgroup col / col / /colgroup tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /table
  • 33. 열(column)을 컨트롤하기 위해 만들어진 colgroupcol은 자신들의 층구조를 가지고 있습니다. 셀 tdth 행 tr 열 col 열그룹 colgroup 테이블 table
  • 34. colgroup처럼 열tr을 구룹화 할 수 있습니다. 열제목thead 내용tbody 합계tfoot부분으로 tr을 구조화 시켜줄 수도 있습니다. 이때tfoot은 없을 수 있지만, theadtbody는 반드시 같이 사용 하여야만 합니다. thead tbody tfoot table colgroup col / col class=”active” colspan=”2” col style=”color:red”/ col / col / /colgroup thead tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 35. 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 차액 1000원 -100원 -100원 600원 table colgroup col / col class=”active” colspan=”2” col style=”color:red”/ col / col / /colgroup thead tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 36. theadtbodytfoot도 층구조중 하나를 가지게 됩니다. 셀 tdth 행 tr 행그룹 theadtbodytfoot 열 col 열그룹 colgroup 테이블 table
  • 37. table caption주간용돈현황/caption colgroup col / col class=”active” colspan=”2” col style=”color:red”/ 스크린리더를 이용하는 시각장애인을 위해서 반드시 표제목을 넣어줍니다 col / col / /colgroup thead 주간용돈현황 tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th 월 화 수 목 /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td 지출 1000원 500원 200원 300원 td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td 2000원 900원 수입 400원 100원 td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td 차액 1000원 -100원 -100원 600원 td100원/td td900원/td /tr /tbody /table caption으로 표제목 표시하기
  • 38. summery 속성으로 내용 요약하기 스크린리더를 이용하는 시각장애인을 위해서 요약내용을 넣어줍니다 주간용돈현황 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 차액 1000원 -100원 -100원 600원 table summery=”월화수목, 지출,수입,차액” caption주간용돈현황/caption colgroup col / col class=”active” colspan=”2” col style=”color:red”/ col / col / /colgroup thead tr thnbsp;/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 40. 보더가 적용되지 않은 상태의 표입니다. table summery=”월화수목, 지출,수입,차액” caption주간용돈현황/caption colgroup col / col / col / col / col / /colgroup thead tr th/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 41. 표는 두가지 종류로 보더를 표현합니다. 분리(separate)된 보더모델 합쳐진(collapse) 보더모델
  • 43. table summery=”월화수목, 지출,수입,차액” caption주간용돈현황/caption colgroup col / col / col / col / col / /colgroup thead th,td {border:1px solid black;} tr th/th tr {border:1px solid yellow;} th scope=”col”월/th th scope=”col”화/th thead,tbody,tfoot {border:1px solid blue;} th scope=”col”수/th col {border:1px solid green;} th scope=”col”목/th /tr colgroup {border:1px solid lime;} /thead table {border:1px solid red;} tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th 모든 표는 기본값으로 td2000원/td td400원/td 분리된 보더모델로 표시 td100원/td 됩니다. td900원/td /tr /tbody /table 먼저 표를 구성하는 모든 태그에 보더를 지정해 봅시다
  • 44. table summery=”월화수목, 지출,수입,차액” caption주간용돈현황/caption colgroup col / col / col / col / col / /colgroup thead th,td {border:1px solid black;} tr th/th tr {border:1px solid yellow;} th scope=”col”월/th th scope=”col”화/th thead,tbody,tfoot {border:1px solid blue;} th scope=”col”수/th col {border:1px solid green;} th scope=”col”목/th /tr colgroup {border:1px solid lime;} /thead table {border:1px solid red;} tfoot tr th scope=”row”차액/th 분리된 보더모델에서는 td1000원/td td-100원/td tr, thead, tbody, tfoot, col td-100원/td colgroup은 보더가 표시되 td600원/td /tr 지 않습니다. /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td tdthtable에만 td400원/td td100원/td 보더가 표시됩니다. td900원/td /tr /tbody /table 분리된 보더 모델에서는 tablethtd만 표시됩니다
  • 45. table summery=”월화수목, 지출,수입,차액” caption주간용돈현황/caption colgroup col / col / col / col / col / /colgroup thead tr th,td {border:1px solid black;} th/th tr {border:1px solid yellow;} th scope=”col”월/th th scope=”col”화/th thead,tbody,tfoot {border:1px solid blue;} th scope=”col”수/th col {border:1px solid green;} th scope=”col”목/th /tr colgroup {border:1px solid lime;} /thead table {border:1px solid red; tfoot tr border-collapse:collapse; th scope=”row”차액/th td1000원/td } td-100원/td 합쳐진 보더모델에서는 모든 요 td-100원/td 소에 보더가 표시됩니다. td600원/td /tr 다만 보더 두께가 같을 경우 층구 /tfoot 조의tbody 우선순위가 적용됩니다. tr 하지만 ie7에서는 우선 순 th scope=”row”지출/th 위가 적용되지 않습니다. td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table border-collapse속성으로 합쳐진 보더모델로 만들 수 있습니다. 층구조 우선순위에 따라 th, td의 보더만 보이게 됩 니다.
  • 46. 층구조가 낮더라고 보더의 두께가 굵 으면 우선순위가 가장 높아집니다. th,td {border:1px solid black;} tr {border:1px solid yellow;} thead {border:5px solid blue;} col {border:1px solid green;} colgroup {border:1px solid lime;} table {border:5px solid red; border-collapse:collapse; } 층구조상 세번째인 thead가 보더의 굵기로 인해 thtd보다 우선 됩니다. 보더가 5px이 때문에 th,td보다 높지만 thead보다는 낮습니다. table summery=”월화수목, 지출,수입,차액” caption주간용돈현황/caption colgroup col / col / col / col / col / /colgroup thead tr th/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td 하지만 ie7에서는 td-100원/td td600원/td 성립되지않습니다. /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 47. 보더의 굵기가 같은 상황에서는 보더스타일에 따라 우선됩니다. th,td {border:1px solid black;} tr {border:1px solid yellow;} thead {border:5px solid blue;} col {border:1px solid green;} colgroup {border:1px solid lime;} table {border:5px double red; border-collapse:collapse; } 층구조상 세번째인 thead가 보더의 굵기로 인해 thtd보다 우선 됩니다. 이제 보더스타일이 double이므로 thead보다도 높습니다. table summery=”월화수목, 지출,수입,차액” caption주간용돈현황/caption colgroup col / col / col / col / col / /colgroup thead tr th/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td 합쳐진 보더모델에서는 모든 요 td-100원/td 소에 보더가 표시됩니다. td600원/td /tr 다만 보더 두께가 같을 경우 층구 /tfoot 조의tbody 우선순위가 적용됩니다. tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 48. 합쳐진 보더모델을 가진 표에서 보더의 우선순위를 다시한번 정리해 봅시다. 보더가 같은 굵기일때 층구조가 우선합니다 보더가 굵으면 층구조를 무시하고 우선합니다. 보더가 같은 굵기일때 보더스타일이 우선합니다. 층구조 보더굵기 보더스타일 doblue solid dashed dotted ridge outset
  • 49. background속성 또한 층구조 순으로 표시됩니다. th,td {border:1px solid black;} tr {border:1px solid yellow;} thead {background-color:blue;} col {border:1px solid green;} colgroup {border:1px solid lime;} table {border:1px solid red; background-color:red;} 층구조가 높은 순으로 보이게 됩니다. table summery=”월화수목, 지출,수입,차액” caption주간용돈현황/caption colgroup col / col / col / col / col / /colgroup thead tr th/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th 합쳐진 보더모델 일 경우... td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 51. 분리된 보더모델에서 벌어진 공간 은 조절할 수 있습니다 th,td {border:1px solid black;} tr {border:1px solid yellow;} thead {background-color:blue;} col {border:1px solid green;} colgroup {border:1px solid lime;} table {border:1px solid red; background-color:red; border-spacing:10px;} table summery=”월화수목, 지출,수입,차액” cellspacing=”10px” caption주간용돈현황/caption colgroup col / col / col / col / ie7에서는 border-spacing col / 이 적용되지 않기때문에 /colgroup thead html속성인 cellspacing을 tr th/th 추가해 줍니다. th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 52. table summery=”월화수목, 지출,수입,차액” cellspacing=”10px” caption주간용돈현황/caption colgroup col / col / col / col / col / th,td {border:1px solid black; padding:10px;} /colgroup thead tr {padding:10px} tr thead {padding:10px} th/th th scope=”col”월/th col {padding:10px} th scope=”col”화/th th scope=”col”수/th colgroup {padding:10px} th scope=”col”목/th table {border:1px solid red; /tr /thead background-color:red; tfoot border-spacing:10px; tr th scope=”row”차액/th padding:10px;} td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot table은 border-spacing:10px 간격에 tbody tr padding:10px이 추가되었으며, 각셀(th,td)에 th scope=”row”지출/th 10px의 여백(padding)이 생겼습니다. td1000원/td td500원/td ie7에서는 table의 padding속성이 적용되 td200원/td td300원/td 지 않으며,tdth에는 패딩이 적용됩니다. /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table 분리된 보더모델의 표에서 padding은 tablethtd에서만 적용됩니다.
  • 53. table summery=”월화수목, 지출,수입,차액” cellpadding=”10px” caption주간용돈현황/caption colgroup col / col / col / col / col / th,td {border:1px solid black; padding:10px;} /colgroup thead tr {border:1px solid yellow;} tr thead {background-color:blue;} th/th th scope=”col”월/th cellpadding속성은 padding과 col {border:1px solid green;} th scope=”col”화/th 중복 사용시 적용되지 않습니다. th scope=”col”수/th colgroup {border:1px solid lime;} th scope=”col”목/th table {border:1px solid red; /tr /thead background-color:red; tfoot border-spacing:10px; tr th scope=”row”차액/th padding:10px;} td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table cellpadding속성으로도 셀(th,td)에 padding을 적용할 수 있습니다.
  • 55. 분리된 보더모델이던 아니던 표에서는 오직table만 margin을 지정할 수 있습니다. 익명의 박스에 생긴 margin table의 박스 table { padding:10px; margin:10px; border:2px solid red; border-collapse:collapse } caption이 있는 표의 경우 익명의 박스를 만들어 caption 을 감싸게 하고 margin을 줄경우 익명의 박스의 바깥쪽으로 적용 하게 되어 있다 주간용돈현황 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원
  • 56. 표제목 caption영역에 대해 알아보겠습니다. caption또한 박스로 되어 있습니다. 주간용돈현황 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원
  • 57. 초기값이 가운데 정렬인것만 빼고는 박스모델이 그대로 적용됩니다. caption { padding:10px; margin:10px; border:1px solid red; } 가운데정렬 주간용돈현황 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원
  • 58. text-align으로 좌,우측으로 정렬할 수 있습니다. caption { padding:10px; margin:10px; border:1px solid red; text-align:right; } 주간용돈현황 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원
  • 59. 또한 영역 자체를 아래에 둘 수도 있습니다. caption { caption-side:bottom; padding:10px; margin:10px; border:1px solid red; text-align:right; } 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원 주간용돈현황
  • 60. 표제목이 필요가 없을지라도 접근성을 위해서 반드시 넣어주어야 하므로, CSS로 눈에 보이지 않도록 처리할 수 있습니다. caption { position:absolute; text-indent:-9999px; } 월 화 수 목 지출 1000원 500원 200원 300원 수입 2000원 400원 100원 900원
  • 62. 또한 표는 들어있는 컨텐츠의 양에 따라 넓이가 늘어 납니다. table { border-collapse:collapse; } th, td { border:1px solid #000; padding:0; } 늘어난 셀이 속해 있는 col의 셀들도 같이 늘어 납니다. 이에 따라 표도 같이 늘어 납니다. table summery=”월화수목, 지출과수입” caption주간용돈현황/caption thead tr th/th th scope=”col”월/th th scope=”col”화/th th scope=”col”수/th th scope=”col”목/th /tr /thead tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot tbody tr th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th td2000원/td td400원/td td100원/td td900원/td /tr /tbody /table
  • 63. 그러므로 표의 넓이와 각 col의 넓이를 지정해 줄 필요가 있습니다. table { width:100%; border-collapse:collapse; } th, td { border:1px solid #000; padding:0; } 10% 10% 20% 30% 100% body 30% table summery=”월화수목, 지출과수입” caption주간용돈현황/caption colgroup col style=”width:10%”/ col style=”width:10%” col style=”width:20%”/ col style=”width:30%”/ col style=”width:30%”/ /colgroup thead tr th/th th scope=”col”월/th th scope=”col”화/th col에 class속성을 이용하지 않은 th scope=”col”수/th 것은 번번히 달라지는 정보에 따라 넓이 th scope=”col”목/th 값은 표마다 모두 달라지기 때문에 인라인 /tr /thead 스타일을 이용하였습니다. tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot body에 적용된 margin까지 tbody tr 표의 넓이가 100%넓이로 꽉차있습니다. th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th
  • 64. 넓이가 지정되지 않은 col의 경우 남은 값을 자동으로 계산해 줍니다. table { width:100%; border-collapse:collapse; } th, td { border:1px solid #000; padding:0; } 10% 10% 20% auto 100% body 30% table summery=”월화수목, 지출과수입” caption주간용돈현황/caption colgroup col style=”width:10%”/ col style=”width:10%” col style=”width:20%”/ col/ col style=”width:30%”/ /colgroup thead tr th/th th scope=”col”월/th th scope=”col”화/th col에 class속성을 이용하지 않은 th scope=”col”수/th 것은 번번히 달라지는 정보에 따라 넓이 th scope=”col”목/th 값은 표마다 모두 달라지기 때문에 인라인 /tr /thead 스타일을 이용하였습니다. tfoot tr th scope=”row”차액/th td1000원/td td-100원/td td-100원/td td600원/td /tr /tfoot body에 적용된 margin까지 tbody tr 표의 넓이가 100%넓이로 꽉차있습니다. th scope=”row”지출/th td1000원/td td500원/td td200원/td td300원/td /tr tr th scope=”row”수입/th
  • 65. 표의 경우 column의 넓이가 다양하기 때문에 %단위로 전체 넓이과 각 column의 넓이를 조절한 후 표를 감싸는 요소에 의해 제한 되는 것이 좋습니다. menu1 menu2 menu3 menu4 월 화 수 목 지출 1000원 500원 200원 300원 수입 20% 2000 원 20% 400원 100원 900원 20% 100% 20% 20%
  • 67. 제공된 입력양식을 통해 사용자들은 자신의 정보를 서버로 전송할 수 있습니다.
  • 71. input은 type속성이 무엇이냐에 따라 달라집니다. input type=” 텍스트필드 패스워드 라디오 체크박스 파일 버튼 ”/ text password radio checkbox file submit button images reset 스스로 닫는 태그입니다. 일반적인 텍스트를 입력할 때 보이지 않게 입력할 때 선택사항중 하나를 선택할 때 여러개를 확인(선택)할 때 파일을 첨부할 때 입력된 데이타 값을 전송할 때 범용으로 사용하는 버튼 용도는 submit과 같고 이미지로 사용할 때 입력된 데이타 값을 초기화할 때
  • 72. select는 선택메뉴를 제공할 때 사용됩니다. 초기값 그룹핑 다중선택 select option selected=selected위치를 선택해 주세요/option option미국/option option일본/option optgroup label=한국 option서울/option option대전/option option부산/option option광주/option /optgroup option브라질/option /select select size=3 multiple=multiple title=지역선택 option노원구/option option강북구/option option서초구/option option은평구/option option동대문구/option /select
  • 73. textarea는 여러 줄로 된 텍스트필드를 제공합니다. textarea rows=”5” cols=”50” 남기고 싶은 말을 적어주세요 /textarea rows는 줄수, cols는 텍스트필드의 넓이입니다. 글자의 수를 이용해서 넓이를 만들어 주기 때문에 정해진 글씨 크기에 따라 다를 수 있고 그렇기 때문에 CSS를 이용하게 됩니다
  • 74. inputselecttextarea의 양식태그를 이용해서 정보를 입력받고 전송하는데 필요한 속성(기능)을 몇가지 알아보겠습니다. name=”” maxlength=”” value=”” size=””
  • 75. name=”” name속성을 이용해서 사용자가 입력한 값과 함께 서버로 전송될 컨트롤 이름을 지정해 줍니다. 텍스트필드 input type=”text” name=”m_id” / 패스워드 input type=”password” name=”m_pw” / 개발자가 개발을 진행하면서 구체적인 name값을 정해주기 때문에 html/css만 다루는 작업자는 빈값으로 둡니다. 라디오 input type=”radio” name=”age” / 1세~10세 input type=”radio” name=”age” / 10세~20세 input type=”radio” name=”age” / 20세~30세 체크박스 radio,checkbox는 한가지의 이름 으로 선택된 정보가 전송되어야 하기 때문에 같은 name값을 지정합니다. input type=”checkbox” name=”likething” / 책보기 input type=”checkbox” name=” likething” / 공놀이 input type=”checkbox” name=” likething” / 공부하기
  • 76. 파일첨부 input type=”file” name=”m_file” / 버튼 input input input input 셀렉트박스 select name=”location” option selected=selected위치를 선택해 주세요/option option미국/option option일본/option optgroup label=한국 option서울/option option대전/option option부산/option option광주/option /optgroup option브라질/option /select 텍스트에어리어 textarea maxlength=120 name=”memo” 남기고 싶은 말을 적어주세요 /textarea type=”submit” name=”m_btn” / type=”reset” name=”m_btn” / type=”image” src=”foo.jpg” name=”m_btn” / type=”button” name=”m_btn” /
  • 77. maxlength=”” 텍스트를 입력받는 양식에서는 maxlength속성으로 최대 글자수를 지정해 줄 수 있습니다. 텍스트필드 input type=”text” name=”m_id” maxlength=”10”/ 패스워드 input type=”password” name=”m_id” maxlength=”10” / 텍스트에어리어 textarea name=”memo” maxlength=120 남기고 싶은 말을 적어주세요 /textarea
  • 78. size=”” size속성으로는 입력필드의 넓이를 조절할 수 있습니다. 이때의 값은 글자수를 이용하게 됩니다. 텍스트필드 input type=”text” name=”m_id” maxlength=”10” size=”5”/ 패스워드 input type=”password” name=”m_id” maxlength=”10” size=”5” / 하지만 정해진 글씨크기에 따라 다를 수 있기 때문에 보통의 경우에 css를 이용해서 사용하게 됩니다. size속성을 지정하지 않으면 브라우저마다의 기본넓이로 보여줍니다.
  • 79. value=”” value속성은 전송될 값을 지정할 때 사용됩니다. 라디오 input type=”radio” name=”age” value=”0110”/ 1세~10세 input type=”radio” name=”age” value=”1020”/ 10세~20세 input type=”radio” name=”age” value=”2030”/ 20세~30세 checkbox의 경우 다중선택을 할 수 있기 때문에 선택한 모든 value값을 서버로 전송하게 됩니다. age라는 name값과 함께 value값을 서버로 전송합니다. 1020을 선택했을 경우 “age 1020”을 서버로 보내게 됩니다. 체크박스 input type=”checkbox” name=”likething” value=”book”/ 책보기 input type=”checkbox” name=” likething” value=”playball”/ 공놀이 input type=”checkbox” name=” likething” value=”study”/ 공부하기
  • 80. 셀렉트박스 select name=”lacation” option selected=selected value=””위치를 선택해 주세요/option option value=”america”미국/option option value=”japan”일본/option 선택한 해당 option의 optgroup label=한국 value값을 name인 location과 option value=”seoul”서울/option 서버로 전송합니다. 함께 option value=”daejeon”대전/option option value=”busan”부산/option option value=”kwangju”광주/option /optgroup option value=”brazil”브라질/option /select 텍스트필드에서 value속성은 텍스트필드에서는 입력초기값 으로 사용됩니다. 텍스트필드 input type=”text” name=”m_id” value=”” / 이전 경우와 다르게 입력 초기값으로 사용됩니다. 만약 초기값이 없을 경우는 값을 비워둡니다.
  • 81. 직접 입력을 받는 태그 외에도 양식의 영역을 정해주고 그룹핑하고 제목을 달아주는 태그들도 있습니다. form 입력을 받고 서버로 전송하는 영역을 정해줌 fieldset 양식내에서 그룹핑해 줄 때 사용함 legend 그룹핑한 fieldset에 제목을 달아줌 label 각 각의 입력양식 마다 제목을 달아줌
  • 82. form div class=member fieldset class=basic legend기본정보/legend label for=m_id아이디/label input id=m_id type=text/ br/ label for=m_pw패스워드/label input id=m_pwtype=password/ /fieldset ! fieldset class=sub legend부가정보/legend label for=m_email이메일/label input id=m_email type=text/ br/ label for=m_tel전화번호/label input id=m_teltype=text/ /fieldset /div /form
  • 83. 먼저form에 대해 알아볼까요? form은 서버에게 전송할 수있는 입력양식 영역임을 알려줍니다. form action=”eulsoo.com/test.php” method=”get” div class=”member” ... ... ... /div /form action=””은 폼안에 입력한 정보를 보 낼 서버주소를 적어줍니다. method=””는 입력한 정보를 get방식 으로 보낼지 post방식으로 보낼지를 결정 합니다. 서버측개발과 관련된 속성이므로 개발자가 선언하게 됩니다.
  • 84. form은 눈에 보이는 모양과 상관없이 html상의 양식영역을 위 해마크업 합니다. div 양식의 넓이를 지정하기 위해 div를 사용하였습니다. 이때form은 아무 CSS속성도 사용하지 않았기 때문에 눈에 보이지 않고 그냥 뷰포트에 꽉차 있을 뿐입니다. form은 CSS를 적용하기 위한 태그라기 보다는 입력된 정보를 보내기 위한 html상의 영역을 지정합니다. 그렇기 때문에 form사용에 대한 자세한 속성지정은 주로 개발자가 하게 됩니다.
  • 85. fieldset은 입력정보를 그룹핑 시켜줍니다. fieldset은 대부분의 브라우저에서 그룹핑한 양식영역을 border로 보여 줍니다. 기본값으로 border가 적용되는 fieldset은 border속성을 통해 두께나 선모양 그리고 심지어 없애 버릴 수 도 있습니다. form div class=”member” fieldset class=”basic” ... ... ... /fieldset ! fieldset class=”sub” ... ... ... /fieldset /div /form
  • 86. legend은 fieldset의 제목을 달아 줍니다. legend는 fieldset으로 구룹 핑한 영역을 대표하는 제목을 달아 줍니다. 이때 fieldset이 만드는 보더 중앙에 놓이게 됩니다. 기본값이 선의 가운데에 놓여서 그렇지 legend도 박스일 뿐입니다. form div class=”member” fieldset class=”basic” legend기본정보/legend ... ... /fieldset ! fieldset class=”sub” legend부가정보/legend ... ... /fieldset /div /form
  • 87. label은 각 각의 입력양식에 제목을 달아 줍니다. label을 사용하는것은 접근성 측 면에서 중요한 사안입니다. 스크린 리더기가 입력할 양식이 무엇인지 읽어 줄 수 있도록 label로 제목을 달아 주어야 합니다. form div class=”member” fieldset class=”basic” legend기본정보/legend label for=m_id아이디/label input id=m_id type=text/ ... /fieldset ! fieldset class=”sub” legend부가정보/legend ... ... /fieldset /div /form
  • 88. label은 두가지 방법으로 마크업 할 수 있습니다. 첫번째. label과 대상을 분리하고 label에는 for를 대상이 되는 양식태그에는 id속성을 넣고 값을 똑같이 맞추어 줍니다. form div class=”member” fieldset class=”basic” legend기본정보/legend label for=m_id아이디/label input id=m_id type=text/ ... /fieldset ! fieldset class=”sub” legend부가정보/legend ... ... /fieldset /div /form 두번째. 대상이되는 양식을 감싸서 label로 마크업 합니다. form div class=”member” fieldset class=”basic” legend기본정보/legend label아이디 input id=m_id type=text/ /label ... /fieldset ! fieldset class=”sub” 대상을 감싸는 방식의 legend부가정보/legend lable사용은 현재 스크린리더가 ... ... 읽어주지 못하고 제목이 대상과 /fieldset 떨어질 수 없기 때문에 사용하지 /div 않는 것이 좋습니다. /form
  • 89. lable을 사용할 수 없는 상황이라면 양식태그에 title속성을 이용해 정보를 알려줍니다. fieldset class=”basic” legend기본정보/legend label for=m_id아이디/label input id=m_id type=text/br/ label for=m_pw비밀번호/label input id=m_pw type=text title=”비밀번호”/br/ 사진첨부 input type=file title=사진첨부/br/ 지역선택 select title=구선택 option selected=”selected”구선택/option option강북구/option option서초구/option /select select title=동선택 option selected=”selected”동선택/option option북창동/option option평창동/option /select label과 title을 함께 쓰지 않습니다. file의 경우 label영역까지 클릭 영역이 되므로 title을 사용하였습 니다. 여러개의 셀렉트에 한가지 제목이 있고 각 각의 제목이 필요할 경우 각 각의 셀렉트를 인지 할 수 있도 록 title을 이용해 표시하였습니다.
  • 90. 양식별로 label과 title을 어떻게 사용했는지 살펴 보겠습니다. stronglabel for=your_id아이디/label/strong input type=text id=your_id / stronglabel for=your_pw패스워드/label/strong input type=password id=your_pw / em대문자,소문자,숫자 8자리 이상/em strong연령대/strong input id=age110 type=radio name=age / label for=age1101세~10세/label input id=age1020 type=radio name=age / label for=age102010세~20세/label input id=age2030 type=radio name=age / label for=age203020세~30세/label
  • 91. strong좋아하는일/strong input id=book type=checkbox name=likething / label for=book책보기/label input id=palyball type=checkbox name=likething / label for=palyball공놀이/label input id=study type=checkbox name=likething / label for=study공부하기/label strong사진첨부/strong input type=file title=사진첨부/ label을 이용할 경우 클릭영역이 label까지 확장 되므로 title속성으로 처리했습니다.
  • 92. strong살고있는 곳/strong select title=나라와도시선택 option selected=selected위치를 선택해 주세요/option option미국/option option일본/option optgroup label=한국 option서울/option option대전/option option부산/option option광주/option /optgroup option브라질/option /select select size=3 multiple=multiple title=지역선택 option노원구/option option강북구/option option서초구/option option은평구/option option동대문구/option option강서구/option /select
  • 93. “남기고 싶은 말을 적어주세요 라는 글을 마크업하고 있기 때문에 title이나 label을 사용하지 않습니다. textarea maxlength=120 rows=3 cols=50 남기고 싶은 말을 적어주세요 /textarea input input input input type=button value=이전 title=이전 / type=submit value=확인 title=확인 / type=image src=images/submit.jpg alt=등록 / type=reset value=초기화 title=초기화 / 이미지버튼의 경우 title속성을 사용 하지 않고 alt속성을 사용합니다.
  • 95. 먼저 큰 구조를 만들어 줍니다. form div class=”member” fieldset class=”basic” legend기본정보/legend /fieldset ! fieldset class=”sub” legend부가정보/legend /fieldset div class=”btn_area” /div /div /form
  • 96. 양식을 넣을 박스를 만들어 줍니다. form div class=”member” fieldset legend기본정보/legend p*표시는 반드시 입력해 주세요/p div/div div/div div/div div/div div/div div/div /fieldset ! fieldset legend부가정보/legend div/div div/div /fieldset div class=”btn_area”/div /div /form
  • 97. 입력양식의 제목을 넣을 상자를 만들어 줍니다. form div class=”member” fieldset legend기본정보/legend p*표시는 반드시 입력해 주세요/p divstrong/strong/div divstrong/strong/div divstrong/strong/div divstrong/strong/div divstrong/strong/div divstrong/strong/div /fieldset ! fieldset legend부가정보/legend divstrong/strong/div div/div /fieldset div class=”btn_area”/div /div /form
  • 98. 어떤 입력양식이 들어가는지 볼까요? input type=”text”/ input type=”password”/ input type=”raido”/ input type=”checkbox”/ input type=”file”/ select textarea input type=”button”/ input type=”submit”/ input type=”images”/ input type=”reset”/
  • 99. 이제 해당하는 양식을 넣어줍니다. form div class=”member” fieldset legend기본정보/legend p*표시는 반드시 입력해 주세요/p div strong*label for=m_id아이디/label/strong input type=text id=m_id name= value=/ em대문자,소문자,숫자 8자리 이상/em /div div strong*label for=m_pw패스워드/label/strong input type=password id=m_pw name= value= / emquot; - quot; 표시는 제외/em /div div strong*label for=tel전화번호/label/strong input type=text id=tel name= value=/ /div divstrong/strong/div divstrong/strong/div divstrong/strong/div /fieldset label을 strong안에 제목으로 중략... 사용할 수 있습니다.
  • 100. 라디오, 체크박스, 파일첨부 양식을 넣어줍니다 ... ...중략 div strong*연령대/strong input id=age110 type=radio name=age value= / label for=age1101세~10세/label input id=age1020 type=radio name=age value= / label for=age102010세~20세/label input id=age2030 type=radio name=age value= / label for=age203020세~30세/label /div div strong*좋아하는일/strong input id=book type=checkbox name=like value= checked=checked/ label for=book책보기/label input id=palyball type=checkbox name=like value= / label for=palyball공놀이/label input id=study type=checkbox name=like value= / label for=study공부하기/label /div div strong*사진첨부/strong input type=file title=사진첨부 value=/ /div /fieldset 중략... label을 strong안에 사용할 수 있지만, label영역이 클릭영역 으로 잡히기 때문에 title을 사용합니다.
  • 101. 셀렉트 양식을 넣어 줍니다. ... ...중략 /fieldset fieldset class=”sub” legend부가정보/legend div strong살고있는 곳/strong select title=나라와도시선택 option selected=selected value= 위치를 선택해 주세요 /option option value= 미국/option option value= 일본/option optgroup label=한국 option value= 서울/option option value= 대전/option option value= 부산/option option value= 광주/option /optgroup option브라질/option /select select size=3 multiple=multiple title=지역선택 option value= 노원구/option option value= 강북구/option option value= 서초구/option option value= 은평구/option option value= 동대문구/option option value= 강서구/option /select /div 중략...
  • 102. textarea와 버튼들을 넣어 줍니다. ... ...중략 div textarea maxlength=120 rows=3 cols=50 남기고 싶은 말을 적어주세요 /textarea /div /fieldset div class=”btn_area” input type=button value=이전 title=이전 / input type=submit value=확인 title=확인 / input type=image src=images/submit.jpg alt=등록 / input type=reset value=초기화 title=초기화 / /div /div /form
  • 103. 마크업을 모두 마쳤으면 이제 스타일을 만들어 봅시다. 입력양식은 모두 inline box로 되어 있으므로 한줄로 이어지게 되며, 이어지는 양식과 글자 혹은 버튼의 위아래가 맞지 않게 됩니다.
  • 104. 시작하기 앞서 입력양식의 기본스타일을 정의해 줍니다. select, input, textarea {vertical-align:middle; font-size:14px;} input[type=text], input[type=password] {padding:4px; color:green; border:1px solid #999;} type=”text”와”password”에 보더를 재설정하여 플랫한 모양으로 바꿨습니다. 인라인요소인 양식하나의 높이는 양식마다 다르기 때문에 vertical-align 을 middle로 셋팅해 한줄의 중앙을 기준으로 맞춥니다. 이와 같은 기본셋팅은 reset.css에서 해주면 좋습니다.
  • 105. 먼저 양식 전체넓이와 여백, 간격, 배경색을 지정해 봅시다. .member {width:500px; margin:0 auto; padding:20px; background-color:#F7F5DA;} form div class=”member” fieldset legend기본정보/legend /fieldset ! fieldset legend부가정보/legend /fieldset div class=”btn_area” /div /div /form
  • 106. fieldset의 여백과 간격을 줍니다. .member fieldset {padding:20px; margin:0 0 20px;} form div class=”member” fieldset class=”basic” legend기본정보/legend padding /fieldset ! fieldset class=”sub” legend부가정보/legend margin /fieldset div class=”btn_area” /div /div /form
  • 107. 사실fieldset은 legend가 있을때와 없을 때가 다름니다. .member fieldset {padding:20px; margin:0 0 20px;} form div class=”member” fieldset class=”basic” /fieldset ! fieldset class=”sub” legend부가정보/legend /fieldset div class=”btn_area” /div /div /form 비록 fieldset의 위쪽 border가legend박스의 중간을 지나가게 그려지지만 fieldset박스 영역위에 legend영역 이올라가 있는 셈이 됩니다.
  • 108. legend를 꾸며줍니다. .member legend { padding:0 10px; font-weight:bold; font-size:16px; color:brown; }
  • 109. legend또한 박스이기 때문에 응용해 볼 수 있습니다 .member legend { float:left; margin:-34px 0 0 -75px; padding:5px; background-color: #999999; border:1px solid #666666; }
  • 110. 제목의 넓이를 일정하게 만들어 줍니다. .member strong {display:inline-block; width:80px;} 인라인 요소인 strong에 display:inline-block을 주었기 때문에 ie7에서도 제대로 렌더링 됩니다. form div class=”member” fieldset legend기본정보/legend p*표시는 반드시 입력해 주세요/p div strong*label for=m_id아이디/label/strong input type=text id=m_id name= value=/ em대문자,소문자,숫자 8자리 이상/em /div div strong*label for=m_pw패스워드/label/strong input type=password id=m_pw name= value= / emquot; - quot; 표시는 제외/em /div div strong*label for=tel전화번호/label/strong input type=text id=tel name= value=/ /div 중략...
  • 111. 각 줄의 간격을 넓혀줍니다. .member fieldset div + div {margin:10px 0 0;} 각 fieldset의 자식div에서 첫번째 div를 제외한 모든 div에 위쪽으로 마진을 적용하여 간격을 만듭니다. form div class=”member” fieldset legend기본정보/legend p*표시는 반드시 입력해 주세요/p div strong*label for=m_id아이디/label/strong input type=text id=m_id name= value=/ em대문자,소문자,숫자 8자리 이상/em /div div strong*label for=m_pw패스워드/label/strong input type=password id=m_pw name= value= / emquot; - quot; 표시는 제외/em /div div strong*label for=tel전화번호/label/strong input type=text id=tel name= value=/ /div 중략...
  • 112. 버튼을 우측으로 정렬합니다. .member .btn_area {text-align:right} ... ...중략 div textarea maxlength=120 rows=3 cols=50 남기고 싶은 말을 적어주세요 /textarea /div /fieldset div class=”btn_area” input type=button value=이전 title=이전 / input type=submit value=확인 title=확인 / input type=image src=images/submit.jpg alt=등록 input type=reset value=초기화 title=초기화 / /div /div /form
  • 113. 안내문구를 꾸며줍니다. .member em {color:orange; font-size:12px} form em을 추가해 줍니다. div class=”member” fieldset legend기본정보/legend p*em표시는 반드시 입력해 주세요em/p div strong*label for=m_id아이디/label/strong input type=text id=m_id name= value=/ em대문자,소문자,숫자 8자리 이상/em /div div strong*label for=m_pw패스워드/label/strong input type=password id=m_pw name= value= / emquot; - quot; 표시는 제외/em /div div strong*label for=tel전화번호/label/strong input type=text id=tel name= value=/ /div 중략...
  • 114. 필수표시 *를 꾸며줍니다. .member b {color:red} b을 추가해 줍니다. form div class=”member” fieldset legend기본정보/legend pb*/bem표시는 반드시 입력해 주세요em/p div strongb*/blabel for=m_id아이디/label/strong input type=text id=m_id name= value=/ em대문자,소문자,숫자 8자리 이상/em /div div strongb*/blabel for=m_pw패스워드/label/str input type=password id=m_pw name= value= / emquot; - quot; 표시는 제외/em /div div strongb*/blabel for=tel전화번호/label/strong input type=text id=tel name= value=/ /div 중략...
  • 117.   eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.