1. table
- 제목은 th(기본적으로 굵게 표시), 내용은 td태그를 사용
- <table><tr><th>...</th></tr><tr><td>...</td></tr></table>
- 테이블은 html에서 표에 있는 데이터를 명시하는 방법을 제공
- 레이아웃을 위해 테이블을 사용하는 것은 예전 방식임!
2. 캡션과 요약
- 캡션은 테이블의 상단(혹은 다른 곳)에 위치하는 테이블의 설명, 제목
- 요약은 브라우저에서는 보이지 않지만, 스크린 리더기 등을 통해 사용자에게 큰 소리로 읽어줄 수 있음
- <table summary="Anything"><caption>Anything</caption><tr><th>...</th></tr><tr><td>...</td></tr></table>
- css에서 table{ caption-side:bottom; }이라고 할 경우, 캡션이 테이블의 아래에 위치하게 됨
3. 테이블 셀 속성
- 테이블 셀은 패딩과 테두리를 가지고 있지만, 마진은 가지고 있지 않음
- 대신 border-spacing(모든 셀 주위에 적용되는 공통의 빈 공간)이라는 속성을 가지고 있음
- border-spacing:10px; 30px;라고 할 경우, 가로 10px, 세로 30px의 테두리 공간을 가짐
4. border-collapse 속성
- border-collapse:collapse;라고 할 경우, 모든 테이블 셀 주위에 하나의 테두리를 갖게 됨
5. 하나 이상의 셀 통합방법
- 행 병합시, 이전 tr의 td태그에서 rowspan="2"라고 명시해 줌
- 열 병핫미, colspan="2"라고 명시해 줌
6. 테이블내의 테이블
- 테이블내에 테이블을 배치할 경우 동일하게 태그를 사용하면 됨
- table table th{ background-color:white; }라고 제목 셀의 색상을 변경할 수 있음
7. 리스트 스타일
- li{ list-style-type:disc } : 일반적인 검은 원
- circle(흰색원), square(검은사각형), none(아무것도 없음)
- li{ list-style-image:url(background_list.gif); }로 새로운 리스트 마크를 쓸 수 있음
- list-style-position:inside라고 할 경우, 텍스트가 리스트 마크 밑에 위치,
outside라고 할 경우 텍스트가 리스트 마크 위에 위치하게 됨
원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/
- 제목은 th(기본적으로 굵게 표시), 내용은 td태그를 사용
- <table><tr><th>...</th></tr><tr><td>...</td></tr></table>
- 테이블은 html에서 표에 있는 데이터를 명시하는 방법을 제공
- 레이아웃을 위해 테이블을 사용하는 것은 예전 방식임!
2. 캡션과 요약
- 캡션은 테이블의 상단(혹은 다른 곳)에 위치하는 테이블의 설명, 제목
- 요약은 브라우저에서는 보이지 않지만, 스크린 리더기 등을 통해 사용자에게 큰 소리로 읽어줄 수 있음
- <table summary="Anything"><caption>Anything</caption><tr><th>...</th></tr><tr><td>...</td></tr></table>
- css에서 table{ caption-side:bottom; }이라고 할 경우, 캡션이 테이블의 아래에 위치하게 됨
3. 테이블 셀 속성
- 테이블 셀은 패딩과 테두리를 가지고 있지만, 마진은 가지고 있지 않음
- 대신 border-spacing(모든 셀 주위에 적용되는 공통의 빈 공간)이라는 속성을 가지고 있음
- border-spacing:10px; 30px;라고 할 경우, 가로 10px, 세로 30px의 테두리 공간을 가짐
4. border-collapse 속성
- border-collapse:collapse;라고 할 경우, 모든 테이블 셀 주위에 하나의 테두리를 갖게 됨
5. 하나 이상의 셀 통합방법
- 행 병합시, 이전 tr의 td태그에서 rowspan="2"라고 명시해 줌
- 열 병핫미, colspan="2"라고 명시해 줌
6. 테이블내의 테이블
- 테이블내에 테이블을 배치할 경우 동일하게 태그를 사용하면 됨
- table table th{ background-color:white; }라고 제목 셀의 색상을 변경할 수 있음
7. 리스트 스타일
- li{ list-style-type:disc } : 일반적인 검은 원
- circle(흰색원), square(검은사각형), none(아무것도 없음)
- li{ list-style-image:url(background_list.gif); }로 새로운 리스트 마크를 쓸 수 있음
- list-style-position:inside라고 할 경우, 텍스트가 리스트 마크 밑에 위치,
outside라고 할 경우 텍스트가 리스트 마크 위에 위치하게 됨
원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/
'정보 > 꾸미기' 카테고리의 다른 글
Element (0) | 2011.07.01 |
---|---|
CSS Layout (0) | 2011.07.01 |
CSS 작성법 (0) | 2011.07.01 |
srplayer Configuration (0) | 2011.06.28 |
글쓰기 Format (0) | 2011.06.28 |