방통대 컴퓨터과학과 html 웹프로그래밍 정리내용입니다.
목록 속성 & 테이블 속성
list-style-type : 항목 마커의 종류 지정(disc, circle, square, decimal etc)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.none {list-style-type: none}
.ul1 {list-style-type: disc}
.ul2 {list-style-type: circle}
.ul3 {list-style-type: square}
.ol1 {list-style-type: decimal}
.ol2 {list-style-type: lower-roman}
.ol3 {list-style-type: upper-roman}
.ol4 {list-style-type: lower-alpha}
.ol5 {list-style-type: upper-alpha}
</style>
<title>Document</title>
</head>
<body>
순서 없는 목록 표시<br>
<ul>
<li class="none">목록 표시 마크 X : none
<li class="ul1">디스크 : disc
<li class="ul2">원 : circle
<li class="ul3">사각형 : square
</ul>
<br/>순서 있는 목록<br/>
<ol>
<li class="ol1">10진수 : decimal
<li class="ol2">소문자 로마숫자 : lower-roman
<li class="ol3">대문자 로마숫자 : upper-roman
<li class="ol4">소문자 알파벳 : lower-alpha
<li class="ol5">대문자 알파벳 : upper-alpha
</ol>
</body>
</html>
list-style-position : 항목 마커의 위치 지정, inside, outside(기본)
테이블 속성
table-layout : 셀 안의 내용 크기에 따른 셀 크기의 변화 여부(auto, fixed)
border-collapse : 테이블 테두리와 셀 테두리를 하나의 테두리로 합칠 지 여부
border-space : 테두리 사이의 간격
caption-side : 테이블 캡션의 위치 설정(top, bottom)
empty-cells : 빈 셀의 테두리와 배경의 표시 여부
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.table1 { width: 300px;
table-layout: auto;
border-collapse: separate;
caption-side: top;
border-spacing: 10px 10px;
empty-cells: hide;
}
.table2 { width: 300px;
table-layout: fixed;
border-collapse: collapse;
caption-side: bottom;
}
</style>
<title>Document</title>
</head>
<body>
<table border="1">
<caption>기본 테이블</caption>
<tr>
<td>html web programming</td>
<td>CSS</td>
</tr>
<tr>
<td>javascript</td>
</tr>
</table><br/>
<table class="table1" border="1">
<caption>캡션 : auto separate top 10px 10px hide</caption>
<tr>
<td>html web programming</td>
<td>CSS</td>
</tr>
<tr>
<td>javascript</td>
</tr>
</table><br/>
<table class="table2" border="1">
<caption>캡션 : fixed collapse bottom</caption>
<tr>
<td>html web programming</td>
<td>CSS</td>
</tr>
<tr>
<td>javascript</td>
</tr>
</table>
</body>
</html>
'문돌이의 IT > HTML&CSS' 카테고리의 다른 글
| [HTML 웹프로그래밍] CSS 속성 - background속성, 테두리속성 (2) | 2017.05.12 |
|---|---|
| HTML 입력양식 form, input 속성 (0) | 2017.04.18 |
| HTML에서 멀티미디어 표현 (0) | 2017.04.17 |
| HTML에서 테이블 표현 (0) | 2017.04.16 |
| HTML 이미지삽입, 하이퍼링크삽입, <iframe> 태그 (0) | 2017.04.15 |