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가 하나 추가
됩니다.
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. 이런 접근성 때문에 표를 가지고 배치를 하면
안되는 큰 이유중에 하나입니다.
지금 무슨소릴 하는거야!
말이 하나도 안되네
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%
71. input은 type속성이 무엇이냐에 따라 달라집니다.
input type=”
텍스트필드
패스워드
라디오
체크박스
파일
버튼
”/
text
password
radio
checkbox
file
submit
button
images
reset
스스로 닫는 태그입니다.
일반적인 텍스트를 입력할 때
보이지 않게 입력할 때
선택사항중 하나를 선택할 때
여러개를 확인(선택)할 때
파일을 첨부할 때
입력된 데이타 값을 전송할 때
범용으로 사용하는 버튼
용도는 submit과 같고 이미지로
사용할 때
입력된 데이타 값을 초기화할 때
73. textarea는 여러 줄로 된 텍스트필드를 제공합니다.
textarea rows=”5” cols=”50”
남기고 싶은 말을 적어주세요
/textarea
rows는 줄수, cols는 텍스트필드의 넓이입니다.
글자의 수를 이용해서 넓이를 만들어 주기 때문에
정해진 글씨 크기에 따라 다를 수 있고
그렇기 때문에 CSS를 이용하게 됩니다
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
각 각의 입력양식 마다 제목을 달아줌
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을 이용해 표시하였습니다.
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
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을 사용합니다.
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영역
이올라가 있는 셈이 됩니다.