목록관련 태그들
먼저 ul과li이 있습니다.
ul은 기본적인 목록 형태를 만들어줍니다.
- 이런식으로 만들어줍니다.
li은 목록의 내용을 집어넣는 것이라고 보시면 됩니다.
그리고 ul과 li에는 type라는 속성이 있는데 그것을 이용해 목록의 모양을 변경할 수 있습니다.
type속성의 값 종류
disc:●
circle:○
square:■
이런것들이 있습니다.
예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <ul> <li type="square">첫번째 내용</li> <li>두번째 내용</li> <li>세번째 내용</li> </ul> </body> </html> | cs |
ul의 중첩
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <ul> <li>첫번째 내용</li> <li>두번째 내용</li> <li>세번째 내용</li> <ul> <li>세번째의 첫번째 내용</li> <ul> <li>세번째의 첫번째의 첫번째 내용</li> </ul> </ul> </ul> </body> </html> | cs |
그다음으로는 ol이 있습니다.
ol은 목록의 종류를 고를수 있고 순서를 바꿀수도 있습니다.
type속성의 값 종류
i:로마자 소문자
1:숫자
I:로마자 대문자
A:영어 대문자
a:영어 소문자
reversed속성
순서를 거꾸로 보여줍니다.
value속성
li하던중 순서를 어디서부터 한다할때 그숫자를 넣으면 그 숫자부터 시작합니다.
start속성
처음 시작할 숫자를 설정할 수 있습니다.
예시코드↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <ol type="I" start="10" reversed > <li>첫번째내용</li> <li>두번째내용</li> <li value="3"><mark>3번째내용</mark></li> </ol> </body> </html> | cs |
다음은 dl, dt, dd입니다.
dl은 제목과 설명을 묶은 부분이라고 보면 됩니다.
dt는 제목 부분입니다.
dd는 내용 부분입니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <dl> <dt>dt의내용</dt> <dd>dd의내용</dd> <dt>두번째 dt의내용</dt> <dd>두번째 dd의내용</dd> </dl> </body> </html> | cs |
표에관한 태그들
여기서는 table과 tr, td, th가 있습니다.
table은 표를 만들자리를 만든다고 생각하시면 됩니다.
※table의 속성중 border은 표의 셀구분 두께를 조절할 수 있습니다.
tr은 행을 만드는 것입니다.
td는 제목 셀을 만드는 것 입니다.
th는 제목셀 다음의 내용으로된 열을 만드는 것입니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <table border="1"> <tr> <td>제목셀 입니다!</td> <th>내용셀 입니다.</th> </tr> <tr> <td>두번째 제목셀 입니다!</td> <th>두번째 내용셀 입니다.</th> </tr> </table> </body> </html> | cs |
위와같은 결과가 나오는 것을 볼 수 있습니다.
colspan과rowspan
colspan은 열단위로 합친 것입니다.
rowspan은 행단위로 합친 것입니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <table border="1"> <tr> <td>제목셀 입니다!</td> <th colspan="3">3개짜리 셀입니다.</th> <th rowspan="2">행합치기!</th> </tr> <tr> <td>두번째 제목셀 입니다!</td> <th>2-1</th> <th>2-2</th> <th>2-3</th> </tr> </table> </body> </html> | cs |
이렇게 사용하실 수 있습니다.
표에 제목 붙이기
caption, figure, figcaption을 이용하게 됩니다.
caption은 그냥 표앞에 붙여쓰면 제목이 붙게 됩니다.
figure은 표의 영역을 지정하는 것이라고 보면 됩니다.
figcaption은 figure태그안의 <table>앞이면 표위에 </table>뒤면 표밑에 제목이 생깁니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <table border="1"> <caption> <h2>제목 연습</h2> </caption> <tr> <th>제목</th> <td>내용</td> </tr> </table> <figure> <figcaption> <h2>표위의 제목</h2> </figcaption> <table border="1"> <tr> <th>제목셀</th> <td>내용셀</td> </tr> </table> <figcaption> <h2>표밑의 제목</h2> </figcaption> </figure> </body> </html> | cs |
이렇게 사용가능 합니다.
표구조 정의
thead:제목부분에 해당합니다.
tbody:본문부분에 해당합니다.
tfoot:결론부분에 해당합니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <table border="1"> <thead> <th>thead0</th> <td>thead1</td> </thead> <tbody> <th>tbody0</th> <td>tbody1</td> </tbody> <tfoot> <th>tfoot0</th> <td>tfoot1</td> </tfoot> </table> </body> </html> | cs |
여러열을 묶어 스타일 지정하기
col, colgroup
colgroup:col을 묶어 여러열을 묶을 수 있습니다.
col:열을 지정할 수 있습니다.
코드예시↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>세번째 문서</title> </head> <body> <table border="1"> <colgroup> <col span="2" style="background-color:blue"> <col span="1" style="background-color:yellow"> </colgroup> <thead> <th>thead0</th> <td>thead1</td> <td>thead2</td> </thead> <tbody> <th>tbody0</th> <td>tbody1</td> <td>tbody2</td> </tbody> <tfoot> <th>tfoot0</th> <td>tfoot1</td> <td>tfoot2</td> </tfoot> </table> </body> </html> | cs |
이렇게 오늘은 목록과 표에대해 알아보았습니다.