1. 테이블 만들고, CSS 적용해서 표 스타일 완성하기
* 테이블 내용 소스(body태그)
(1) 글꼴 적용
head 태그-----------------------------------
<style type="text/css">
body{
font:12px "맑은 고딕", 돋움;
}
</style>
(2) 테이블 구분선 적용
td, th{
padding:10px 30px;
}
table,td,th{
border:1px #000 solid;
border-collapse: collapse;
}
(3) 셀 안쪽 여백 적용
#table1 td, #table1 th{
padding:10px 30px;
}
#table1 table, #table1 td, #table1 th{
border:1px #000 solid;
border-collapse: collapse;
}
(4) th 배경 적용
th{
background: #c5c5c5;
}
(5) 남은 td 배경 적용
td:First-child{
background: #999;
}
(6) 꼬리(마지막) td 배경과 글꼴색 적용
tr:last-child td{ //마지막 td만 지정
background: #000;
color: #fff;
}
(7) 모서리 둥글게
td, th{
padding:10px 30px;
border-radius: 10px;
}
(8) 똑같은 표 복사 적용(table2)
<style type="text/css">
#table2{
border-spacing: 10px;
}
#table1 body{
font:12px "맑은 고딕", 돋움;
}
#table1 td, #table1 th{
padding:10px 30px;
border-radius: 10px;
}
#table1 table, #table1 td, #table1 th{
border:1px #000 solid;
border-collapse: collapse;
}
#table1 th{
background: #c5c5c5;
}
#table1 td:First-child{
background: #999;
}
#table1 tr:last-child td{
background: #000;
color: #fff;
}
</style>
(9) 표2에 간격 조정
#table2 td, #table2 th{
padding:10px 30px;
border: 1px solid #000;
border-radius: 10px;
}
#table2{
empty-cells:hide;
border-spacing: 10px;
}
(9-1) 숨김 지정 하지 않았을 때
(9-2) 숨김 지정하였을 때
(10) h태그 적용
body-----------------------------------
<hgroup>
<h1>프랑스 와인</h1>
<h2>프랑스 와인 매니아는 프랑스에 많다.</h2>
</hgroup>
</body>----------------------------------
css--------------------------------------------
<style type="text/css">---------------------
hgroup{
border: 1px solid #000;
border-radius: 10px;
}
</style>---------------------------------
(11) 모서리 둥글게
hgroup{
border: 1px solid #000;
border-radius: 30px 0px 0 0;
background: #ff0; padding: 10px;
}
'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
| [3주][2일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제. (0) | 2013.07.30 |
|---|---|
| [3주][1일][5~7th] 자바스크립트(JAVA SCRIPT) (0) | 2013.07.29 |
| [2주][5일][5~7th] 자바스크립트 실습. alert = 경고창. (0) | 2013.07.26 |
| [2주][5일][1~2th] HTML5 맛보기! (0) | 2013.07.26 |
| [2주][4일][1~2교시] CSS: 레이아웃 만들기, 영역 나누기. (0) | 2013.07.25 |